{"id":13880,"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.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/ismaeldcom/react-native-build-config","tags":["javascript","react-native","android","ios","config","env","config-var","plist","typescript"],"install":[{"cmd":"npm install react-native-build-config","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-build-config","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-build-config","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily exports a default object containing the build configuration. While CommonJS `require` also works, ESM import should use the default import pattern.","wrong":"import { BuildConfig } from 'react-native-build-config';","symbol":"BuildConfig","correct":"import BuildConfig from 'react-native-build-config';"},{"note":"This is the documented CommonJS import method, widely compatible with older Node.js environments and React Native versions.","symbol":"BuildConfig (CJS)","correct":"const BuildConfig = require('react-native-build-config');"}],"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."},"warnings":[{"fix":"For React Native < 0.60, use `react-native-build-config@0.1.0` and follow the manual linking instructions provided in the package's README, which involves modifying `android/settings.gradle`, `android/app/build.gradle`, and `MainActivity.java` (for Android).","message":"For React Native versions prior to 0.60, auto-linking is not supported. You must manually link the native module for both Android and iOS projects to ensure `react-native-build-config` functions correctly. Attempting to use versions > 0.1.0 without manual linking on older RN versions will result in runtime errors.","severity":"breaking","affected_versions":"<0.60.0"},{"fix":"Ensure variables are correctly declared in `android/app/build.gradle` (using `buildConfigField`) for Android builds and in `ios/YourApp/Info.plist` (using `<key>` and `<string>`/`<true>`/`<false>`) for iOS builds. Variable names must match exactly between native declarations and JS access.","message":"The method for defining configuration variables differs between Android and iOS. Android requires `buildConfigField` declarations in `android/app/build.gradle`, while iOS uses `<key>` and `<value>` entries within the `Info.plist` file. Misconfiguration on either platform will lead to variables not being exposed in JavaScript.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always anticipate the native type for known variables (e.g., `VERSION_CODE` as a number, `DEBUG` as a boolean) and perform type checks or explicit conversions in JavaScript if strict type handling is required.","message":"Some native build variables (like `VERSION_CODE`) are exposed with specific types. For example, `VERSION_CODE` is a number in native, and exposed as such, while `VERSION_NAME` is a string. `DEBUG` is a boolean. Developers should be mindful of these types when accessing variables in JavaScript to avoid unexpected type-related errors.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.3.2':74 'across':60 'address':88 'allow':37 'android':26,127 'api':45 'applic':47,68 'avoid':105 'build':3,8,20,103,121 'code':55 'codebas':35 'compat':80 'config':4,9,129,132 'config-var':131 'configur':21 'consist':59 'current':70 'debug':57 'detail':49 'develop':38 'differenti':95 'direct':31,98 'endpoint':46 'ensur':117 'env':130 'environ':42,113 'environment-specif':41 'exist':101 'expos':18 'flag':58 'gradl':24 'info.plist':28 'integr':99 'io':30,128 'javascript':34,64,111,123 'javascript-specif':110 'layer':65 'like':50 'manag':40 'modul':13 'name':52 'nativ':2,7,16,19,62,85,102,120,126 'need':107 'new':83 'nuanc':92 'platform':90 'platform-specif':89 'plist':134 'primari':94 'react':1,6,15,84,125 'react-nat':124 'react-native-build-config':5 'releas':76 'separ':109 'set':44 'solut':115 'specif':43,91,112 'stabl':71 'synchron':118 'system':104 'tie':78 'typescript':135 'typic':77 'updat':81 'util':12 'var':133 'variabl':22,114 'variant':122 'version':48,51,54,72,86","created_at":"2026-04-20T01:56:47.311501+00:00","updated_at":"2026-04-20T01:56:47.311501+00:00","problems":[{"fix":"Ensure that `react-native-build-config` is properly linked. If React Native < 0.60, manual linking is required. If RN >= 0.60, confirm auto-linking is working (e.g., by running `npx react-native run-android` or `npx react-native run-ios` to rebuild native modules). Also verify that the native build config (Gradle/Info.plist) has been properly configured and rebuilt.","cause":"The native module `RNBuildConfig` was not correctly linked or initialized, or the `BuildConfig` object is not available at runtime.","error":"TypeError: Cannot read property 'API_URL' of undefined"},{"fix":"Place `buildConfigField` declarations within the `defaultConfig { ... }` block or within specific `buildTypes { debug { ... } }` / `productFlavors { ... }` blocks in your `android/app/build.gradle` file. Double-check the syntax, ensuring correct type, name, and string-wrapped value format.","cause":"This error typically occurs during the Android build process because `buildConfigField` is used outside of the `defaultConfig` or `buildTypes` blocks in `android/app/build.gradle`, or has incorrect syntax.","error":"Error: buildConfigField \"String\", \"API_URL\", \"\\\"https://myapi.com\\\"\" does not define a valid field for BuildConfig."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-native-build-config","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}