Cómo utilizar las variables de entorno de React Native: una guía completa

En el desarrollo de aplicaciones móviles con React Native, la correcta gestión de variables de entorno es fundamental para manejar configuraciones sensibles y específicas de cada entorno (desarrollo, pruebas, producción). Las environment variables o variables de entorno permiten almacenar información confidencial como claves API, endpoints de servicios y otros datos sensibles, sin exponerlos en el código fuente. 

¿Por qué son importantes las environment variables en React Native?

En cualquier aplicación, las variables de entorno son claves para mantener la seguridad y la flexibilidad del código. Al separar la configuración específica del entorno de la lógica de la aplicación, puedes gestionar más fácilmente las diferencias entre entornos de desarrollo, pruebas y producción sin necesidad de hacer cambios directos en el código fuente.

Por ejemplo, una aplicación que consume una API externa puede tener diferentes URLs dependiendo del entorno en el que se esté ejecutando. Utilizando variables de entorno, es posible cambiar la URL automáticamente según el entorno, sin necesidad de tocar el código fuente.

Además, mantener las credenciales y las configuraciones sensibles fuera del código fuente es una práctica recomendada en términos de seguridad y conformidad con normativas como GDPR y PCI DSS, que exigen un manejo seguro de la información.

Paso a Paso: Cómo utilizar variables de entorno en React Native

A continuación, describimos el proceso para implementar correctamente variables de entorno en un proyecto de React Native.

1. Configura un archivo .env

El primer paso es crear un archivo .env en el directorio raíz de tu proyecto. Este archivo contendrá todas las variables de entorno que deseas definir. Cada variable de entorno sigue el formato clave-valor:

API_URL=https://api.example.com
GOOGLE_MAPS_API_KEY=your-google-maps-api-key

El archivo .env no debe ser incluido en el control de versiones (como Git), ya que podría exponer información sensible. Asegúrate de incluir el archivo .env en tu archivo .gitignore.

# .gitignore
.env

2. Instalar las dependencias necesarias

Para trabajar con variables de entorno en React Native, es necesario utilizar bibliotecas externas. La más utilizada es react-native-dotenv, que permite cargar y usar variables de entorno en tu código JavaScript. Para instalarla, ejecuta el siguiente comando:

npm install react-native-dotenv

Una vez instalada, asegúrate de agregarla a tu configuración de Babel. Para esto, edita tu archivo babel.config.js y agrega el plugin:

module.exports = {
 presets: ['module:metro-react-native-babel-preset'],
 plugins: [
   ['module:react-native-dotenv', {
     "moduleName": "@env",
     "path": ".env",
   }]
 ]
};

3. Acceder a las variables de entorno en tu código

Ahora que has configurado correctamente el archivo .env y la biblioteca correspondiente, puedes empezar a acceder a las variables de entorno en tu código. Importa las variables desde el archivo .env utilizando la siguiente sintaxis:

import { API_URL, GOOGLE_MAPS_API_KEY } from '@env';
console.log(API_URL);
console.log(GOOGLE_MAPS_API_KEY);

Al ejecutar la aplicación, React Native cargará automáticamente las variables desde el archivo .env correspondiente. Es importante recordar que cualquier cambio en el archivo .env requerirá que reinicies tu servidor de desarrollo para que los cambios surtan efecto.

4. Manejo de diferentes entornos

Es común tener diferentes archivos de entorno para manejar las configuraciones específicas de cada entorno (desarrollo, pruebas, producción). Puedes hacerlo creando múltiples archivos .env como .env.development, .env.production, y cargarlos según el entorno en el que se esté ejecutando la aplicación.

Para automatizar este proceso, puedes instalar react-native-config, una biblioteca que facilita la gestión de múltiples archivos .env. Instala la dependencia con el siguiente comando:

npm install react-native-config

Luego, configura tus archivos .env específicos para cada entorno:

.env.development
.env.production
Asegúrate de configurar scripts en tu package.json para cada entorno:
"scripts": {
 "start": "react-native start",
 "start:development": "ENVFILE=.env.development react-native run-android",
 "start:production": "ENVFILE=.env.production react-native run-android"
}

Esto te permitirá ejecutar la aplicación en diferentes entornos fácilmente.

5. Buenas prácticas en el uso de variables de entorno

• No almacenar información sensible en el código fuente: Nunca incluyas claves API o credenciales directamente en tu código. Usa variables de entorno para mantenerlas fuera del alcance público.
• Cifrado de variables de entorno sensibles: Si manejas información altamente sensible, considera utilizar un servicio de almacenamiento seguro de secretos, como AWS Secrets Manager o Google Secret Manager, para mayor protección.
• Documentación: Asegúrate de mantener actualizada la documentación sobre las variables de entorno utilizadas en cada proyecto, para que los desarrolladores puedan configurar los entornos adecuadamente.

El uso de environment variables en React Native es una herramienta clave para gestionar configuraciones específicas de cada entorno y garantizar la seguridad de las aplicaciones móviles. Seguir estos pasos no solo mejora la organización del código, sino que también refuerza la seguridad al mantener las configuraciones sensibles fuera del código fuente.

Si bien el proceso de configuración de variables de entorno puede ser sencillo para desarrolladores experimentados, muchas empresas prefieren delegar la gestión de estos aspectos técnicos a equipos especializados.

En Rootstack, somos expertos en el desarrollo de aplicaciones móviles con React Native y en la implementación de soluciones seguras para gestionar configuraciones de entorno. Contáctanos hoy para optimizar y asegurar tu aplicación React Native.

Te recomendamos en video