How to access environment variables located in .env - React Native

Question

I currently have .env file in which I am saving api keys and such (not actual keys in the example below):

API_URL=https://www.example.si/3000
IOS_API_KEY=738d7hfu3hffsjfsd
STRIPE_KEY=pk_fh843f483ff3f43f34
APP_ID=pk_fh843f483ff3f43f34

I need to access these keys in my AppDelegate.m file.

I've tried the following:

NSString *AppID = @(getenv("APP_ID"));

But it didn't work.I get an error : "***+[NSString stringWithUTF8String:] NULL cString" .

I cannot use variable as @"AppID" where I want to pass it in. Any ideas on how to solve this issue would be helpful.

Answer 1

I ended up using a library for this, called react-native-config:

https://github.com/luggit/react-native-config

and it works really well. It also has a system in place to avoid delayed (state based) caching so as soon as you save .env file there is no chance of remembering the previous state of .env file.

Answer 2

For those using EXPO, there are two options as explained at docs.expo.dev/guides/environment-variables/

This is the option I chose for my project:

Using the extra field

Setup your app.config.js with this:

module.exports = {
  name: 'MyApp',
  version: '1.0.0',
  extra: {
    apiUrl: process.env.API_URL,
  },
};

Then run API_URL="https://production.example.com" npx expo start. If you're using Windows, you can use something like https://www.npmjs.com/package/cross-env to be able to set the variables like this.

Now you should be able to access your env variables:

import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig?.extra?.apiUrl;

Answer 3

Use "Process.env.{{variable_name}}" to access the Environment Variable.