DEV Community

Alex
Alex

Posted on

🚀 Access .env variables in React Native with native speed — Introducing react-native-config-jsi

#reactnative #mobile #jsi #ios

Environment variables are a staple in every project. Whether it's your API key, app name, or feature flags — you've probably used .env files with react-native-config or similar solutions.

But here’s the catch: those tools are mostly bridge-based, rely on runtime JSON, and aren’t exactly the fastest — especially for performance-sensitive apps.

That’s why I built react-native-config-jsi — a lightweight, ultra-fast JSI-based library that lets you access .env variables natively, via C++.

⚡ Why this matters

  • ✅ Synchronous access to .env variables at runtime (no async/Promise)
  • ⚙️ Backed by C++ and integrated via React Native JSI
  • 🧠 Minimal overhead — no bridges, no JSON, no wrappers
  • 🧩 Works like react-native-config but faster and cleaner

📦 Install 

npm install react-native-config-jsi
Enter fullscreen mode Exit fullscreen mode

🔧 Setup

  1. Create your .env file: 
API_KEY=your_api_key
APP_NAME=MyAwesomeApp
Enter fullscreen mode Exit fullscreen mode
  1. For iOS:
  2. Run pod install inside the ios/ directory
  3. Add a Run Script Phase in Xcode Build Phases: 
bash "${SRCROOT}/../node_modules/react-native-config-jsi/src/scripts/generate.sh"
Enter fullscreen mode Exit fullscreen mode

This step ensures that your .env gets compiled into a native source file during build time.

🚀 Usage 

import { RNConfig } from "react-native-config-jsi";

const apiKey = RNConfig.get("API_KEY");
console.log("API_KEY:", apiKey);
Enter fullscreen mode Exit fullscreen mode

⚠️ After changing .env, make sure to rebuild or restart the app to apply changes.

🧩 Behind the scenes

This library uses a small C++ layer to parse the .env file at build time and expose the key-value pairs via a JSI binding. That means:

  • No bridge involved
  • No runtime parsing
  • Instant reads from C++ memory

🛠 Use cases

  • Reading API keys or environment-specific configs at startup
  • Feature toggles via env vars
  • Optimizing config reads in performance-sensitive screens

🔗 Links

This is especially useful for those who already use JSI-based tooling or want the cleanest possible access to .env variables without touching the bridge.

Try it out and let me know what you think — happy to answer questions and improve it based on real-world feedback!

🧠

Top comments (0)