environment variables on react-native custom dependency

Question

My project has a node dependency which depends on a environment variable to be set, the code is something simple as const KEY = process.env.SOME_KEY. I understand that react-native has no support for traditional environment variables.

What are de options to fulfill this need and make this code work? Supposing I don't have control over the dependency's code.

Answer 1

The solution is pretty straight forward here, you should go with a custom babel transformer that will replace all process.env. calls within your code with real env values during transpilation step (during that phase there's an access to environmental variables). Transforms are also applied to the dependencies of your app which means you can apply neccessary modifications to the 3rd party code w/o actually changing it.

In order to do it, you should first create a .babelrc file like the one below and place it in the root of your project:

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

Once that's done, go and npm install babel-preset-react-native and babel-plugin-transform-inline-environment-variables.

Finally, rerun react-native start (basically restart the packager) and all your process.env calls will be replaced.