react-native-dotenv VS react-native-config

Best way to store API keys in RN? I need to store the google autocomplete API key somewhere but react-native-config and react-native-dotenv can be reverse-engineered. Any ideas? Thanks!

To consume env variables in js code you'd need https://www.npmjs.com/package/react-native-dotenv — basically, it will allow to reference single variable in the js code and at compile time it will pick up current value from the config

It's not possible to use react-native-dotenv in native code files like `build.gradle` or `Info.plist`: https://github.com/goatandsheep/react-native-dotenv/issues/190

Then install the 'react-native-dotenv' library in your project with the below commands using NPM or Yarn.

While you still developing your app use this package https://www.npmjs.com/package/react-native-dotenv

I know, not a direct answer to your question, but if you're looking for file-defined custom properties, the typical solution is to use https://github.com/goatandsheep/react-native-dotenv

⚙️ Handel environment variables with react-native-env

There are a few special libraries from npm that are used to make all this work and we cover them all in the video. Specifically we needed an AsyncStorage library and dotEnv, a library to manage local environment variable for the application

It's time to use the Firebase project configuration in the Expo app. To do so, first install the Firebase SDK by running expo install firebase. Additionally, install react-native-dotenv by running npm install react-native-dotenv, so that environment variables can be imported in the app via an .env file. Next, add the module:react-native-dotenv plugin to the default Expo babel.config.js file.

We will be making use of the handy npm library react-native-dotenv

Best way to store API keys in RN? I need to store the google autocomplete API key somewhere but react-native-config and react-native-dotenv can be reverse-engineered. Any ideas? Thanks!

React Native Config bring you the ability, for example, to have different environments which will make it easier to work with different API endpoints and test your application.

have you looked at react-native-config?

It’s recommended to use react-native-config and react-native-dot-env to place your secure key, endpoint.

I put all my API keys and global config elements into here. I have a single file with an object which is indexed with they key PROD STAGE or DEV, which is pulled from a CURRENT_ENV.tsx file. I write to this file using a simple bash script and a make command. Alternatives to this are things like react-native-config but those packages don't obfuscate anything either so I could never justify their extra complexity.

Honestly, security wise it doesn't matter too much where you store it in the app. It'll be accessible one way or another. Common practice is that variables like this would be stored in a config/environment file. See: https://github.com/luggit/react-native-config

There are a few ways to use environment variables in React Native, but I used react-native-config. Setup is very simple: