{"library":"react-native-build-config","title":"React Native Build Config","description":"react-native-build-config is a utility module for React Native that exposes native build configuration variables (from Gradle for Android and Info.plist for iOS) directly to your JavaScript codebase. This allows developers to manage environment-specific settings, API endpoints, application version details (like `VERSION_NAME` and `VERSION_CODE`), and debug flags consistently across both native and JavaScript layers of their application. The current stable version is 0.3.2, with releases typically tied to compatibility updates for new React Native versions or addressing platform-specific nuances. Its primary differentiation is its direct integration with existing native build systems, avoiding the need for separate JavaScript-specific environment variable solutions and ensuring synchronization with native build variants.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-build-config"],"cli":null},"imports":["import BuildConfig from 'react-native-build-config';","const BuildConfig = require('react-native-build-config');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import BuildConfig from 'react-native-build-config';\nimport { useEffect, useState } from 'react';\nimport { Text, View, StyleSheet } from 'react-native';\n\nconst App = () => {\n  const [config, setConfig] = useState({});\n\n  useEffect(() => {\n    // In a real app, these would be configured in build.gradle (Android) \n    // or Info.plist (iOS) during the native build process.\n    // Example of accessing pre-defined config:\n    setConfig({\n      apiUrl: BuildConfig.API_URL || 'https://defaultapi.com',\n      showErrors: BuildConfig.SHOW_ERRORS || false,\n      versionName: BuildConfig.VERSION_NAME || '1.0.0',\n      versionCode: BuildConfig.VERSION_CODE || 1,\n      applicationId: BuildConfig.APPLICATION_ID || 'com.example',\n      debug: BuildConfig.DEBUG || false,\n      buildType: BuildConfig.BUILD_TYPE || 'release',\n    });\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>App Configuration:</Text>\n      {Object.entries(config).map(([key, value]) => (\n        <Text key={key} style={styles.item}>\n          {key}: {String(value)}\n        </Text>\n      ))}\n      <Text style={styles.note}> \n        (Values are sourced from native build config like build.gradle or Info.plist)\n      </Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    padding: 20,\n    backgroundColor: '#f5f5f5',\n  },\n  title: {\n    fontSize: 22,\n    fontWeight: 'bold',\n    marginBottom: 15,\n    color: '#333',\n  },\n  item: {\n    fontSize: 16,\n    marginBottom: 5,\n    color: '#555',\n  },\n  note: {\n    fontSize: 12,\n    marginTop: 20,\n    color: '#888',\n    fontStyle: 'italic'\n  }\n});\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to access various build configuration variables, including custom ones like `API_URL` and `SHOW_ERRORS`, as well as standard native build variables like `VERSION_NAME` and `DEBUG`, from the `BuildConfig` object within a React Native functional component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}