Using Environment Variables in a React Native App

Hi, fellows I am super excited to be sharing my knowledge about using environment variables in a react native app.

After working on some really fun and exciting projects with react native I had a need to use environment variables for specific secret keys that are very important and vital to the mobile application.

What are environment variables?

In software development, an environment refers to the settings and conditions in which a piece of code is executed. It generally corresponds to a phase in the software development lifecycle — like development, testing, or production.

Engineering teams usually adopt different tools, platforms, or software configurations for each of these environments. For example:

The database used in the development/testing stage will be different from that used in production to prevent interference with production data.
The hostname for each domain will also vary (for example, production.example.com or dev.example.com) to maintain the separation of concerns.

Environment variables let you store globally scoped values to the environment your code is running in, making them available throughout the codebase. They enable you to:

Decouple configurations from your code and limit the need to modify and re-deploy an application when configuration data changes.
Set different configurations for different environments.
Enable your application to be deployed in any environment without code changes

Now that we understand what Environment variables are, let us see an example in a real react native project.

In this lecture we won't be going over how to set up or configure your machine to run a react native app on it, I assume you already know how to do so and have also generated a new react native project by yourself before now, here is a link to help you get started Here.

General setup

First, we need to install the react-native-config module to the project:

npm install react-native-config --save

For React Native 0.60 or greater, for Android auto-linking is available, so you just need to install pods for iOS:

npx pod-install ios

cd ios
pod install

moving forward, we should create a file, at the root of the project, where we will be storing our environment variables: .env

I have created 3 key and value pairs Environment variables

API_URL=https://test.herokuapp.com
APP_KEY=763674dbc7ttyegvcwv7263fg7
APP_ENV=5645665vt

Now that we have our Environment variables declared in our .env file we can now create a folder called config also in our root directory on the app, in this config folder, we will create a file called app.config.ts where we will declare different variables and also write comments above each variable on what they do or stand for

These values can be imported into our app.tsx file where we will try to display each of our environment keys on our app

Note

Environment Variables are not to be displayed to the public as we demonstrated in this lecture, it's just to show us or let us see the values that we stored in our .env file

Conclusion

So react-native-config is a simple way to implement build types for environment variables and is much more flexible if your React Native development doesn’t cover just JSX and you also work with the platform's native code.

I hope my article was helpful to you.

iyiola osuagwu's Blog