DEV Community

Ayomide
Ayomide

Posted on

2

A guide to env variables in react native

#reactnative #typescript #javascript #mobile

React Native, the powerful framework for building cross-platform apps, thrives on code reusability and flexibility. But managing sensitive data like API keys, development URLs, or feature flags directly in your codebase can be risky and impractical. Here's where environment variables (env variables) come in, offering a secure and dynamic approach to configuration management.

While familiar to frontend devs, using environment variables in React Native has some key differences that can trip up newcomers.

Think you can just use process.env in React Native like the good old days of frontend development? Hold your horses! While process.env exists in Node.js, React Native runs your JavaScript code in the Hermes engine, which lacks this module. But before you panic, there's good news!

React Native offers specific solutions for managing environment variables, tailored to its cross-platform needs

There are two main approaches to accessing env variables in React Native:

  1. Using Libraries:

  • react-native-dotenv: This popular library automatically loads env variables from a .env file at runtime.

  • react-native-config: This library offers more advanced features like custom parsing and handling platform-specific variables.

  1. Using Native Modules:

For more granular control and access to native platform features, you can create custom native modules to retrieve env variables directly from the device's environment.

react-native-dotenv

  • Installation: 
npm install -D react-native-dotenv
Enter fullscreen mode Exit fullscreen mode
  • Setup: babel.config.js 
api.cache(false)
module.exports = {
  plugins: [
    ['module:react-native-dotenv']
  ]
};
Enter fullscreen mode Exit fullscreen mode

Here is our .env file:

API_TOKEN=abc123
Enter fullscreen mode Exit fullscreen mode

and it can be accessed in our code like this:

import {API_TOKEN} from "@env"

console.log(API_TOKEN)
Enter fullscreen mode Exit fullscreen mode

react-native-config

As said above, the specificity of this library is that it allows you to access your variables on both sides. They did that by parsing the .env files directly on the native sides and generating a map.

import Config from "react-native-config";

const token = Config.API_TOKEN; // abc123
Enter fullscreen mode Exit fullscreen mode

Conclusion

While traditional process.env might not be your immediate companion in React Native, powerful alternatives like react-native-dotenv and react-native-config effectively manage your env variables. By choosing the right tool for your needs, you'll not only ensure secure and flexible configuration, but also contribute to a cleaner and more maintainable codebase. Remember, these env variable heroes exist to empower your cross-platform React Native development, allowing you to focus on building amazing apps!

Key Takeaways:

  • React Native offers tailored solutions for env variables, distinct from process.env.
  • react-native-dotenv excels in simplicity and quick integration.
  • react-native-config unlocks advanced features and customization.
  • Secure your data, choose wisely, and build with confidence!
  • Go forth and conquer the env variable landscape in React Native!

Top comments (1)

Collapse
 
sibasis_padhi profile image
Sibasis Padhi •

Nice article. Any other alternative to Babel?