Getting started with React Native and Expo can be a great way to build mobile applications, especially if you're already familiar with React. One important aspect of app development is the use of environment variables. In this article, we'll show you how to use a .env file to manage your environment variables in a React Native project built with Expo.

What is Expo?

Expo is a framework for building React Native apps. It is a set of tools and services made for React Native. It will help you begin building React Native apps with ease. Expo provides a command-line interface that allows developers to easily create, build, and publish their apps.

What is a .env file?

Environment variables are a set of dynamic values that are used by your application at runtime. For example, you may want to use a different API key or URL depending on whether you're running your app locally or in production. A .env file is a simple text file that contains key-value pairs, and is used to store environment variables for your app.

Using a .env file with Expo

To use a .env file with Expo, you'll need to install the "dotenv" package. This package will load your environment variables from your .env file, and make them available in your app.

Here are the steps you'll need to follow:

First, navigate to your project's root directory in your terminal.
Run the following command to install the dotenv package:
1- npm install dotenv
2- Create a .env file in your root directory. Here's an example of what it might contain:

//.env file
API_KEY=your-api-key
API_URL=https://api.example.com

3- When configuring Babel, remember to add the path to your .env file as well. This file should always be located in the root directory of your project. See below

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

Now, you can use your environment variables in your code. Here's an example of how to access the API key:

import { API_KEY } from '@env';
console.log(API_KEY);

In this example, we're using the "API_KEY" variable that we defined in our .env file. The "@env" syntax is used to tell Expo to load the variable from the .env file.

Please note that our .env file should always be located in the root directory of our project. To ensure the security of our API, it's important to add the .env file to the .gitignore file. This will prevent the file from being pushed to the repository and keep our API credentials safe.

Conclusion

Using a .env file to manage your environment variables can be a great way to keep your app's sensitive information secure, and simplify the process of deploying your app to different environments. By following the steps outlined in this article, you can get started with managing your environment variables in a React Native project built with Expo.