{"library":"react-native-config","title":"React Native Config Variables","description":"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-native-config"],"cli":null},"imports":["import Config from 'react-native-config';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Config from \"react-native-config\";\nimport { useEffect, useState } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\n\nconst App = () => {\n  const [apiUrl, setApiUrl] = useState('');\n  const [googleMapsKey, setGoogleMapsKey] = useState('');\n\n  useEffect(() => {\n    // Variables from .env are automatically loaded into the Config object\n    // Ensure you have a .env file in your project root, e.g.:\n    // API_URL=https://myapi.com/v1\n    // GOOGLE_MAPS_API_KEY=your_google_maps_api_key\n    // SENSITIVE_KEY_EXAMPLE=DO_NOT_STORE_SECRETS_DIRECTLY_HERE\n\n    setApiUrl(Config.API_URL);\n    setGoogleMapsKey(Config.GOOGLE_MAPS_API_KEY);\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.header}>React Native Config Example</Text>\n      <Text style={styles.label}>API URL:</Text>\n      <Text style={styles.value}>{apiUrl || 'Not set'}</Text>\n      <Text style={styles.label}>Google Maps Key:</Text>\n      <Text style={styles.value}>{googleMapsKey || 'Not set'}</Text>\n      <Text style={styles.warning}>\n        Warning: Do not store sensitive keys in .env for mobile apps as they are not obfuscated.\n      </Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n    backgroundColor: '#f5f5f5',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 20,\n    color: '#333',\n  },\n  label: {\n    fontSize: 16,\n    fontWeight: '600',\n    marginTop: 10,\n    color: '#555',\n  },\n  value: {\n    fontSize: 16,\n    marginBottom: 5,\n    color: '#007bff',\n  },\n  warning: {\n    fontSize: 12,\n    color: 'red',\n    marginTop: 30,\n    textAlign: 'center',\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}