Cargar .env en un proyecto de React Native

Para cargar un archivo .env en un proyecto de React Native, es común usar la biblioteca react-native-dotenv o react-native-config, que te permite gestionar variables de entorno de manera eficiente.

1. Instalar las dependencias necesarias

Ejecuta el siguiente comando en la terminal para instalar react-native-config en tu proyecto.

npm install react-native-config

Si estás usando Yarn:

yarn add react-native-config

2. Agregar las variables de entorno en un archivo .env

Crea un archivo .env en la raíz de tu proyecto. Aquí puedes definir tus variables de entorno. Por ejemplo:

API_URL=https://api.ejemplo.com
APP_ENV=development

3. Configurar react-native-config

Asegúrate de vincular la biblioteca react-native-config con tu proyecto de React Native.

Para proyectos con autolinking (React Native 0.60+):

No necesitas hacer nada especial, ya que la librería se vincula automáticamente. Sin embargo, si estás en una versión anterior de React Native, puedes vincular manualmente ejecutando:

npx react-native link react-native-config

iOS:

Abre el archivo ios/NombreDeTuApp.xcworkspace en Xcode, luego:

1. En el árbol del proyecto, selecciona tu proyecto, ve a Build Settings y busca All para encontrar la opción Preprocessor Macros.
2. Agrega una entrada con el valor ${CONFIGURATION} $(inherited).

Android:

1. En el archivo android/app/build.gradle, agrega la siguiente línea dentro de defaultConfig:

   apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

2. Asegúrate de que tu archivo settings.gradle tenga lo siguiente:

   include ':react-native-config'
   project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

4. Uso de las variables de entorno en tu código

En tu código de React Native, puedes acceder a las variables de entorno utilizando la biblioteca de la siguiente manera:

import Config from 'react-native-config';

console.log(Config.API_URL);  // Esto mostrará 'https://api.ejemplo.com'

5. Recomendaciones y buenas prácticas

• Nunca incluyas tus archivos .env en tu control de versiones. Asegúrate de agregarlo a tu archivo .gitignore:

  .env

• Si estás utilizando servicios externos (como una API), define variables separadas para entornos de desarrollo, producción, y pruebas. Puedes crear archivos como .env.production, .env.staging, etc., y configurarlos correctamente en cada entorno de despliegue.

6. Recarga de las variables de entorno

Si cambias alguna variable en el archivo .env, deberás reiniciar tu aplicación para que los cambios surtan efecto. Puedes hacer esto deteniendo la ejecución y reiniciando con:

npm run android  # Para Android
npm run ios      # Para iOS

Ahora usaremos la biblioteca react-native-dotenv. Esta biblioteca es ligera y fácil de usar para manejar variables de entorno en un proyecto.

1. Instalar react-native-dotenv

Primero, instala la biblioteca react-native-dotenv en tu proyecto utilizando npm o yarn.

Con npm:

npm install react-native-dotenv

Con yarn:

yarn add react-native-dotenv

2. Configurar babel.config.js

Ahora, debes configurar Babel para que pueda reconocer y cargar las variables de entorno desde el archivo .env. Para ello, abre el archivo babel.config.js en la raíz de tu proyecto y añade el plugin de react-native-dotenv.

Asegúrate de que tu archivo babel.config.js se vea similar a este:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module:react-native-dotenv', {
      moduleName: '@env',
      path: '.env',
      blacklist: null,
      whitelist: null,
      safe: false,
      allowUndefined: true
    }]
  ]
};

3. Crear el archivo .env

En la raíz de tu proyecto, crea un archivo .env y define tus variables de entorno. Asegúrate de seguir el formato NOMBRE=valor.

Por ejemplo:

API_URL=https://api.miapp.com
APP_ENV=development

4. Uso de las variables en el código

Ahora puedes importar y usar las variables de entorno directamente en tus componentes o módulos de React Native. Debes utilizar la sintaxis de importación de ES6 para acceder a estas variables.

import { API_URL, APP_ENV } from '@env';

console.log(API_URL);  // Esto mostrará 'https://api.miapp.com'
console.log(APP_ENV);  // Esto mostrará 'development'

5. Evitar incluir el archivo .env en tu control de versiones

Es importante que no subas el archivo .env a tu repositorio, especialmente si contiene información sensible como claves de API. Asegúrate de añadirlo a tu archivo .gitignore:

.env

6. Recarga de las variables de entorno

Cada vez que modifiques el archivo .env, debes detener y reiniciar tu aplicación para que los cambios surtan efecto.

npx react-native run-android  # Para Android
npx react-native run-ios      # Para iOS

7. Consideraciones adicionales

• Archivos .env para diferentes entornos: Puedes tener múltiples archivos .env para diferentes entornos (por ejemplo, .env.production, .env.staging). Sin embargo, con react-native-dotenv, solo se carga un archivo .env especificado en la configuración de Babel. Puedes cambiar el nombre del archivo en el campo path del plugin Babel si lo necesitas.
• Variables críticas: No uses este método para variables extremadamente sensibles como contraseñas, ya que las variables de entorno pueden quedar expuestas si alguien inspecciona el paquete de tu aplicación.

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.