Why We Can’t Use dotenv for Babel

[00:00 - 00:12] 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 to build native mobile components.

[00:13 - 00:21] So you cannot use .env as you normally do for React Native. However, you can inject environment variables using Babel.

[00:22 - 00:38] 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 and plugins.

[00:39 - 00:51] Libraries like .env must be wrapped in a Babel plugin to inject the environment variables in a way that is configurable. The easiest way to do this is using React Native.env.

[00:52 - 01:11] 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 as in beyond JavaScript. However, my recommendation, even still, is to try avoid this as you then have to make sure the linking works for each React Native environment.

[01:12 - 01:23] 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, which is a Babel plugin.

[01:24 - 01:35] So I'll go over its use, and it's very, very troubleshooting problems. If you are using Expo, you can also use Expo environment variables.

[01:36 - 01:52] 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.

[01:53 - 02:05] 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.

[02:06 - 02:17] If you're using the default bundler, you can use Babel plugin transform in-line environment variables, which is great. And this is what React Native.env is modeled off of.

[02:18 - 02:27] But again, it doesn't let you use .env flow. So is this library for more than just React Native?

[02:28 - 02:39] Theoretically, it should work with anything that pre-compiles with Babel. I was asked about if other native bundlers, like Native Script, work the same way.

[02:40 - 02:47] And actually, Native Script works with Webpack. So no, it does not need a special Babel plugin.

[02:48 - 03:00] 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, Babel.env.

[03:01 - 03:16] It should be the same as Node.env, but it is frequently overwritten, both Expo and React Native toolchains overwrite this value. After we build our React Native app, we have to open the native publisher.

[03:17 - 03:24] So Android Studio or Xcode. At that time, you can run the build app from that IDE.

[03:25 - 03:39] However, when you run from the IDE, the app will not change, and environment variables will not read up late. In other words, you have to rebuild your React Native app every time you change your end settings.

[03:40 - 03:46] All right, anything you should look out for? The inconsistency of build tools.

[03:47 - 04:00] There are a number of automated build tools out there that support React Native environment variables, such as BitRise. BitRise allows you to set your environment variables in a dashboard, like in previous modules.

[04:01 - 04:12] Stay away from tools like CodeMagic, which dangerously force you to commit environment variables to Git. Even though they're encrypted, it still poses a lot of risks.

[04:13 - 04:14] And with that, let's get into the demo.