Setting environment variable in react-native?

by

Instead of hard-coding your app constants and doing a switch on the environment (I’ll explain how to do that in a moment), I suggest using the twelve factor suggestion of having your build process define your BASE_URL and your API_KEY.

To answer how to expose your environment to react-native, I suggest using Babel’s babel-plugin-transform-inline-environment-variables.

To get this working you need to download the plugin and then you will need to setup a .babelrc and it should look something like this:

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

And so if you transpile your react-native code by running API_KEY=my-app-id react-native bundle (or start, run-ios, or run-android) then all you have to do is have your code look like this:

const apiKey = process.env['API_KEY'];

And then Babel will replace that with:

const apiKey = 'my-app-id';

More Related Contents:

  1. Conditional Text Rendering in React Native
  2. What is the difference between Expo and React Native?
  3. React Native version mismatch
  4. Module AppRegistry is not registered callable module (calling runApplication)
  5. React navigation goBack() and update parent state
  6. Render HTML in React Native
  7. How to upload file to server using react-native
  8. How do I display an animated gif in React Native?
  9. react-native-fbsdk error: No resource found that matches the given name: attr ‘android:keyboardNavigationCluster’
  10. How to remove ‘Warning: Async Storage has been extracted from react-native core…’?
  11. StackNavigator through Component gives undefined error
  12. Renaming a React Native project?
  13. Does react native support base64 encoded images?
  14. FlatList calls `onEndReached` when it’s rendered
  15. React Native – Device back button handling
  16. Is React Native’s Async Storage secure?
  17. Pass Data between Pages in React native
  18. Getting “Cannot read property ‘pickAlgorithm’ of null” error in react native
  19. Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`
  20. React Native Android Build Error MainActivity.java:29: error: cannot find symbol
  21. Auto scale image height with React Native
  22. Detect ScrollView has reached the end
  23. Facing issue ” Failed to install the app. Make sure you have the Android development environment ” in react native
  24. Network Response Time Out Error (create-react-native-app) (expo)
  25. How to download a file with React Native?
  26. emulator-5554 unauthorized for adb devices
  27. How to set default font family in React Native?
  28. What is react-native link?
  29. React Native – Difference between onChange vs onChangeText of TextInput
  30. fetch response.json() gives responseData = undefined

Leave a Comment