react-native-build-config

import BuildConfig from 'react-native-build-config'; import { useEffect, useState } from 'react'; import { Text, View, StyleSheet } from 'react-native'; const App = () => { const [config, setConfig] = useState({}); useEffect(() => { // In a real app, these would be configured in build.gradle (Android) // or Info.plist (iOS) during the native build process. // Example of accessing pre-defined config: setConfig({ apiUrl: BuildConfig.API_URL || 'https://defaultapi.com', showErrors: BuildConfig.SHOW_ERRORS || false, versionName: BuildConfig.VERSION_NAME || '1.0.0', versionCode: BuildConfig.VERSION_CODE || 1, applicationId: BuildConfig.APPLICATION_ID || 'com.example', debug: BuildConfig.DEBUG || false, buildType: BuildConfig.BUILD_TYPE || 'release', }); }, []); return ( <View style={styles.container}> <Text style={styles.title}>App Configuration:</Text> {Object.entries(config).map(([key, value]) => ( <Text key={key} style={styles.item}> {key}: {String(value)} </Text> ))} <Text style={styles.note}> (Values are sourced from native build config like build.gradle or Info.plist) </Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20, backgroundColor: '#f5f5f5', }, title: { fontSize: 22, fontWeight: 'bold', marginBottom: 15, color: '#333', }, item: { fontSize: 16, marginBottom: 5, color: '#555', }, note: { fontSize: 12, marginTop: 20, color: '#888', fontStyle: 'italic' } }); export default App;