Exposing Native Constants to JavaScript
In this lesson, you will learn how to bridge static configuration data from your device’s native environment directly into your JavaScript application at startup.
Why send constants to JavaScript?
Sometimes, your application needs information that is baked into the native platform but shouldn't change while the app is running—such as an API endpoint, a feature flag, or a hardware-specific setting like the device's model name or a custom environment identifier. Instead of hardcoding these values in JavaScript (which can lead to sync issues), we can fetch them directly from the native side the moment the app initializes.
The Mechanism
When a Native Module is initialized, React Native allows us to define a set of constant values that are made available to the JavaScript layer immediately. This is essentially a "handshake" where the native runtime says, "Here is a snapshot of my environment configuration," and JavaScript stores it as a plain object.
For example, if you wanted to expose a constant value like API_VERSION from your native code, you would define it in your module’s initialization logic. Once the bridge is established, you can access these values in your JavaScript code through your imported module:
import { NativeModules } from 'react-native';
// Accessing the constants exposed by the native layer
const { MyCustomModule } = NativeModules;
console.log(MyCustomModule.API_VERSION); // Output: "v1.0.0"
Why use this over other methods?
Because these constants are provided during the initialization of the module, they are available as soon as the JavaScript bundle loads. This makes them perfect for "static" configuration—data that doesn't need to be updated via events or method calls later on. By keeping this data on the native side, you maintain a single source of truth for platform-specific configurations without the overhead of making asynchronous calls across the bridge every time you need to check a setting.
Key Takeaway: Exposing native constants allows you to pass fixed, environment-specific data from the native runtime to JavaScript at startup, creating a seamless link between your native configuration and your application logic.