React Native Config Variables

1.6.1 · active · verified Tue Apr 21

react-native-config is a module that provides a straightforward way to expose configuration variables to React Native applications, aligning with the 12 Factor App methodology for configuration. It supports multiple platforms including iOS, Android, macOS, and Windows. The current stable version is 1.6.1, with releases occurring frequently to address platform-specific issues, introduce new architecture support (like Fabric for iOS and Android), and extend compatibility to newer platforms like visionOS. Its key differentiators include broad platform support and a simple `.env` file interface, making it easy to manage environment-specific variables without modifying code. However, it's crucial to understand that it does not obfuscate or encrypt secrets, which is a fundamental limitation for mobile apps; therefore, sensitive keys should not be stored directly in `.env` files. The package emphasizes ease of use for non-sensitive configuration parameters across diverse mobile and desktop platforms supported by React Native.

Common errors

Warnings

Install

Imports

Quickstart

This example demonstrates how to define environment variables in a `.env` file and access them within a React Native component using `react-native-config`. It highlights the basic usage pattern for displaying configuration values and includes a crucial warning about storing sensitive information.

import Config from "react-native-config";
import { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  const [apiUrl, setApiUrl] = useState('');
  const [googleMapsKey, setGoogleMapsKey] = useState('');

  useEffect(() => {
    // Variables from .env are automatically loaded into the Config object
    // Ensure you have a .env file in your project root, e.g.:
    // API_URL=https://myapi.com/v1
    // GOOGLE_MAPS_API_KEY=your_google_maps_api_key
    // SENSITIVE_KEY_EXAMPLE=DO_NOT_STORE_SECRETS_DIRECTLY_HERE

    setApiUrl(Config.API_URL);
    setGoogleMapsKey(Config.GOOGLE_MAPS_API_KEY);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>React Native Config Example</Text>
      <Text style={styles.label}>API URL:</Text>
      <Text style={styles.value}>{apiUrl || 'Not set'}</Text>
      <Text style={styles.label}>Google Maps Key:</Text>
      <Text style={styles.value}>{googleMapsKey || 'Not set'}</Text>
      <Text style={styles.warning}>
        Warning: Do not store sensitive keys in .env for mobile apps as they are not obfuscated.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    marginTop: 10,
    color: '#555',
  },
  value: {
    fontSize: 16,
    marginBottom: 5,
    color: '#007bff',
  },
  warning: {
    fontSize: 12,
    color: 'red',
    marginTop: 30,
    textAlign: 'center',
  },
});

export default App;

view raw JSON →