Expo App environments for Dev, UAT and Production

Follow below Steps

1. Install expo-constants package. To install the package run the below command.

   npm i expo-constants

2. Add environment.js file and paste below code.

import Constants from 'expo-constants';
import { Platform } from 'react-native';

const localhost = Platform.OS === 'ios' ? 'localhost:8080' : '10.0.2.2:8080';

const ENV = {
  dev: {
    apiUrl: 'https://dev.myapi.com/api',
    amplitudeApiKey: null,
  },
  staging: {
    apiUrl: 'https://uat.myapi.com/api',
    amplitudeApiKey: '[Enter your key here]',
    // Add other keys you want here
  },
  prod: {
    apiUrl: 'https://prod.myapi.com/api',
    amplitudeApiKey: '[Enter your key here]',
    // Add other keys you want here
  },
};

const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else if (env === 'staging') {
    return ENV.staging;
  } else if (env === 'prod') {
    return ENV.prod;
  }
};

export default getEnvVars;

3. Accessing Environment Variables

// Import getEnvVars() from environment.js
import getEnvVars from '../environment';
const { apiUrl } = getEnvVars();

/******* SESSIONS::LOG IN *******/
// LOG IN
// credentials should be an object containing phone number:
// {
//   "phone" : "9876342222"
// }
export const logIn = (credentials, jsonWebToken) =>
  fetch(`${apiUrl}/phone`, {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + jsonWebToken,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(credentials),
  });

4. To create the builds use the below commands.

Dev - expo build:ios --release-channel dev

Staging - expo build:ios --release-channel staging

Production - expo build:ios --release-channel prod

Now that Expo supports config file as app.config.js or app.config.ts, we can use the dotenv. Check this: https://docs.expo.io/guides/environment-variables/#using-a-dotenv-file

• Refer link

This can be done using different Release Channel names, lets say you have created 3 release channels this way:

expo publish --release-channel prod
expo publish --release-channel staging
expo publish --release-channel dev

then you can have a function to set environment vars accordingly:

import * as Updates from 'expo-updates';

function getEnvironment() {
  if (Updates.releaseChannel.startsWith('prod')) {
    // matches prod*
    return { envName: 'PRODUCTION', dbUrl: 'ccc', apiKey: 'ddd' }; // prod env settings
  } else if (Updates.releaseChannel.startsWith('staging')) {
    // matches staging*
    return { envName: 'STAGING', dbUrl: 'eee', apiKey: 'fff' }; // stage env settings
  } else {
    // assume any other release channel is development
    return { envName: 'DEVELOPMENT', dbUrl: 'aaa', apiKey: 'bbb' }; // dev env settings
  }
}

Refer to expo documentation for more info!

For those who are using Expo sdk 46(or any newer version), you can do the following way

1. Rename the app.json to app.config.js
2. Add API URL under extra property

export default () => ({
  expo: {
    name: '',
    slug: ''
    extra: {
      API_URL: process.env.API_URL || null,
    },
    // ...
  },
});

We can access this API using expo constants like this(wherever we want). Don't forget to import constants from Expo.

const myApi = Constants.expoConfig.extra.API_URL 
axios.get(myApi).... // using API END POINT

For Local development to access API you can do it in two ways

1. API_URL="http:// localhost:3000" expo start
2. Just comment the Contants.expoConfig..... and directly paste local URL like const myApi = "http:// localhost:3000"

And in eas.json

{
  "production": {
    "env": {
      "API_URL": "https://prod.example.com"
    }
  },
  "staging": {
    "env": {
      "API_URL": "https://staging.example.com"
    }
  }
}

Once we run eas build the appropriate API endpoint will be set. Refer to the same in Expo documentation https://docs.expo.dev/eas-update/environment-variables/