react-native-config | Bring some 12 factor love to your mobile apps | Form library

(Note: For React Native 0.60 or greater, autolinking is available). (Note: For Windows, this module supports autolinking when used with react-native-windows@0.63 or later. For earlier versions you need to manually link the module.).
Manual Link (iOS) In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-config and add ReactNativeConfig.xcodeproj Expand the ReactNativeConfig.xcodeproj ➜ Products folder In the project navigator, select your project. Add libReactNativeConfig.a to your project's Build Phases ➜ Link Binary With Libraries And go the Build Settings tab. Make sure All is toggled on (instead of Basic) Look for Header Search Paths and add $(SRCROOT)/../node_modules/react-native-config/ios/** as non-recursive
Manual Link (Android) android/settings.gradle + include ':react-native-config' + project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android') android/app/build.gradle dependencies { implementation "com.facebook.react:react-native:+" // From node_modules + implementation project(':react-native-config') } MainApplication.java + import com.lugg.ReactNativeConfig.ReactNativeConfigPackage; @Override protected List<ReactPackage> getPackages() { return Arrays.asList( new MainReactPackage() + new ReactNativeConfigPackage() ); }
Manual Link (Windows) windows/myapp.sln Add the RNCConfig project to your solution. Open the solution in Visual Studio 2019 Right-click Solution icon in Solution Explorer > Add > Existing Project if using react-native-windows@0.62 or later select node_modules\react-native-config\windows\RNCConfig\RNCConfig.vcxproj if using react-native-windows@0.61 select node_modules\react-native-config\windows\RNCConfig61\RNCConfig61.vcxproj windows/myapp/myapp.vcxproj Add a reference to RNCConfig to your main application project. From Visual Studio 2019: Right-click main application project > Add > Reference... Check RNCConfig from Solution Projects. pch.h Add #include "winrt/RNCConfig.h". app.cpp Add PackageProviders().Append(winrt::RNCConfig::ReactPackageProvider()); before InitializeComponent();.
With one extra step environment values can be exposed to "Info.plist" and Build settings in the native project. Add dependency to react-native-config.
click on the file tree and create new file of type XCConfig
save it under ios folder as "Config.xcconfig" with the following content:
add the following to your ".gitignore":
go to project settings
apply config to your configurations
Go to Edit scheme... -> Build -> Pre-actions, click + and select New Run Script Action. Paste below code which will generate "tmp.xcconfig" before each build exposing values to Build Settings and Info.plist. Make sure to select your target under Provide build settings from, so $SRCROOT environment variables is available to the script. (Note that this snippet has to be placed after "cp ... ${PROJECT_DIR}/../.env" if approach explained below is used). "${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"
You can now access your env variables in the Info.plist, for example $(MY_ENV_VARIABLE). If you face issues accessing variables, please open a new issue and provide as much details as possible so above steps can be improved.