How to Setup Environmental Variables in React Native (Expo)
Published: 2023-01-09 01:27:24

---
title: How to Setup Environmental Variables in  React Native (Expo)
published: true
date: 2021-12-07 21:08:19 UTC
tags: 
canonical_url: https://ezeavictor.hashnode.dev/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](https://www.npmjs.com/package/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

![Screenshot (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638907363322/a88Sev2lF.png)

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](https://twitter.com/victorebukaezea)