How to Setup Environmental Variables in React Native (Expo)

Introduction

For mobile developers using expo or react native (a cross-platform framework for building mobile software applications), you might want to hide your AWS or Stripe API key's before pushing it to GitHub.

With the following steps, you will learn how to hide your API key

First Step

make sure you have expo installed globally on your machine, you can do so by running one of the following command lines on your terminal.

npm install --global expo-cli
yarn global add expo-cli

After the installation go ahead and create an expo project by running the following command line.

expo init myapi-app

Go ahead and open your project on your IDE project directory terminal and install a package called react-native-dotenv by running any of the following commands on your project terminal.

npm install react-native-dotenv
yarn add react-native-dotenv

After the installation go ahead to your root project directory and create a file called .env file

Open your .env file and set up your API keys (Google, Stripe, MongoDB etc..)

GOOGLE_API_KEY=YOUR_API_KEY

Then go ahead to your **babel.config.js ** file and add the following lines of code to it

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
        }
      ]
    ]
  };
};

You can now import your API key and use it in your project by calling it, you can do this in your app.js or index.js file in your project.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { MapView } from 'react-native-maps'
import MapViewDirections from 'react-native-maps-directions';

import { GOOGLE_API_KEY } from '@env'

const App = () => {
    return (
        <MapView>
            <MapViewDirections
                origin={origin.description}
                destination={destination.description}
                apikey={GOOGLE_API_KEY}
                strokeWidth={3}
                strokeColor="black"

            />
        </MapView>
    );
}

const styles = StyleSheet.create({})

export default App;

**Last step **

Go to your .gitignore file and add .env this will let git ignore your .env file while pushing your code to GitHub

node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/

# macOS
.DS_Store

.env

Go ahead and run expo start on your terminal to start your application

Conclusion You have learnt how to hide your API keys using .env and **react-native-dotenv **package for your expo react-native project

you can follow me on Twitter