react-native-config

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;