If using react-native-dotenv with expo, make sure to set 

---
title: Why We Can’t Use dotenv for Babel
privateVideoUrl: https://stream.mux.com/aMyMVvkRIttJZqXUea8gNReS01nCPVWMzuITOe4fUIlU.m3u8
isPublicLesson: true
---

Options for using dotenv with Babel:

-   [babel-plugin-transform-inline-environment-variables](https://www.npmjs.com/package/babel-plugin-transform-inline-environment-variables)
-   [react-native-dotenv](https://www.npmjs.com/package/react-native-dotenv)
-   [Expo environment variables](https://docs.expo.dev/guides/environment-variables/)
-   [react-native-config](https://www.npmjs.com/package/react-native-config)
-   [Expo Snack](https://snack.expo.dev/)

Kemal Ahmed

Why We Can’t Use dotenv for Babel

The fourth module is about using .env with React Native.

React Native does not use JavaScript bundlers,

like Webpack, to compile, as it has its own way

So you cannot use .env as you normally do for React Native.

However, you can inject environment variables using

In this lesson, I'm just going to introduce some concepts

that will come up before we do the demo for the next lesson.

Unlike Webpack, which facilitates building bundles

in using a script, Babel only takes configuration

Libraries like .env must be wrapped in a Babel plugin

to inject the environment variables in a way

The easiest way to do this is using React Native.env.

There also is a library called React Native Config,

which is useful if you're trying to inject environment

variables directly into your custom native components

to make sure the linking works for each React Native environment.

You can always load values into JavaScript

and then pass them down to your custom native components.

I'm actually maintainer of React Native.env,

As long as you don't need .env flow strategies on it,

like development versus production configurations.

If you want to play around with Expo without setting up

your whole environment, there is an online IDE called Snack.

However, it does not allow you to install Babel plugins,

like React Native.env, as Dev Dependencies.

You'll have to play around with this locally, unfortunately.

you can use Babel plugin transform in-line environment

And this is what React Native.env is modeled off of.

But again, it doesn't let you use .env flow.

So is this library for more than just React Native?

Theoretically, it should work with anything

I was asked about if other native bundlers, like Native

And actually, Native Script works with Webpack.

So no, it does not need a special Babel plugin.

And since we're using Babel as a pre-compiler,

we will have to be weary of a few things.

For one, we have to be weary of a second-end-name variable,

but it is frequently overwritten, both Expo and React Native

At that time, you can run the build app from that IDE.

the app will not change, and environment variables

In other words, you have to rebuild your React Native app

All right, anything you should look out for?

There are a number of automated build tools out there

that support React Native environment variables,

BitRise allows you to set your environment variables

in a dashboard, like in previous modules.

which dangerously force you to commit environment variables

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript