Why native modules extend capabilities in React Native - Why It Works This Way

Overview - Why native modules extend capabilities

What is it?

Native modules are pieces of code written in platform-specific languages like Swift for iOS or Kotlin for Android. They let React Native apps do things that JavaScript alone cannot, such as accessing device hardware or system features. By connecting JavaScript with native code, apps can use advanced capabilities smoothly.

Why it matters

Without native modules, React Native apps would be limited to what JavaScript can do, missing out on many device features like camera controls, sensors, or background tasks. Native modules solve this by bridging the gap, enabling apps to feel fast, powerful, and fully integrated with the device.

Where it fits

Before learning native modules, you should understand React Native basics and JavaScript. After this, you can explore creating custom native modules or using third-party ones to add advanced features to your app.

Mental Model

Core Idea

Native modules act as bridges that connect JavaScript code with platform-specific native code to unlock device features beyond JavaScript's reach.

Think of it like...

It's like having a translator between two friends who speak different languages; the translator helps them understand each other and work together smoothly.

JavaScript (React Native)  ──▶  [Native Module Bridge]  ──▶  Native Code (Swift/Kotlin)
       ▲                                         ▲
       │                                         │
    UI & Logic                             Device Features

Build-Up - 6 Steps

1

Foundation

Understanding React Native's JavaScript Layer

Concept: React Native apps run JavaScript code that controls the app's UI and logic.

React Native uses JavaScript to create app screens and handle user actions. This code runs in a JavaScript engine separate from the device's native system. It can do many things but cannot directly access some device features like sensors or system APIs.

Result

You can build basic apps with UI and simple logic using only JavaScript in React Native.

Knowing that JavaScript runs separately and has limits helps understand why extra code is needed to reach device features.

2

Foundation

Limits of JavaScript in Mobile Apps

Concept: JavaScript alone cannot access all device hardware or system-level features.

JavaScript runs in a sandboxed environment and cannot directly control hardware like the camera, GPS, or Bluetooth. These require native code that talks directly to the device's operating system.

Result

Without native code, apps miss out on many important features users expect.

Recognizing JavaScript's sandbox helps explain why bridging to native code is necessary.

3

Intermediate

What Are Native Modules in React Native?

Concept: Native modules are pieces of native code exposed to JavaScript through a bridge.

Developers write native modules in Swift/Objective-C for iOS or Kotlin/Java for Android. These modules expose functions that JavaScript can call. The React Native bridge sends messages between JavaScript and native code asynchronously.

Result

JavaScript can call native functions to use device features, and native code can send data back.

Understanding native modules as bridges clarifies how React Native extends its capabilities.

4

Intermediate

How React Native Bridge Connects Code

🤔Before reading on: do you think the bridge sends data synchronously or asynchronously? Commit to your answer.

Concept: The bridge sends messages asynchronously between JavaScript and native code to avoid blocking the app.

When JavaScript calls a native module, the call is serialized and sent over the bridge. Native code processes it and sends results back. This keeps the UI smooth but means calls are not instant.

Result

Apps stay responsive even when using native features, but developers must handle asynchronous behavior.

Knowing the bridge is asynchronous helps avoid bugs and design better app flows.

5

Advanced

Creating Custom Native Modules

🤔Before reading on: do you think you can write native modules for both iOS and Android using the same code? Commit to your answer.

Concept: Custom native modules require writing platform-specific code separately for iOS and Android.

To add a new feature not covered by existing modules, developers write native code for each platform and expose it to JavaScript. This involves understanding native languages and React Native's module registration.

Result

You can extend your app with any device feature by creating custom native modules.

Knowing the need for platform-specific code explains why some features require more work.

6

Expert

Performance and Limitations of Native Modules

🤔Before reading on: do you think using many native module calls can slow down your app? Commit to your answer.

Concept: Excessive communication over the bridge can cause performance issues due to asynchronous message passing.

Each call over the bridge has overhead. Frequent or large data transfers can cause lag. Optimizing native module usage and minimizing bridge calls improves app performance.

Result

Efficient native module design leads to smooth, fast apps that fully use device capabilities.

Understanding bridge overhead helps write performant apps and avoid common pitfalls.

Under the Hood

React Native runs JavaScript in a separate thread from the native UI thread. The bridge serializes calls and data between JavaScript and native code asynchronously using JSON or binary messages. Native modules register with the bridge and expose methods callable from JavaScript. Responses and events flow back through the bridge, enabling two-way communication.

Why designed this way?

The asynchronous bridge design prevents blocking the UI thread, keeping apps responsive. Separating JavaScript and native code allows cross-platform UI logic while still accessing platform-specific features. Early React Native versions used this bridge to balance flexibility and performance before newer architectures emerged.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ JavaScript    │──────▶│ React Native  │──────▶│ Native Module │
│ Thread        │       │ Bridge        │       │ (Swift/Kotlin)│
│ (UI & Logic)  │◀─────│ (Async Comm.) │◀─────│               │
└───────────────┘       └───────────────┘       └───────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Do native modules run on the JavaScript thread? Commit to yes or no.

Common Belief: Native modules run on the same thread as JavaScript, so they block UI updates.

Reality: Native modules run on native threads separate from JavaScript, and communication is asynchronous to avoid blocking the UI.

Why it matters: Believing native modules block UI can cause unnecessary fear of using them and limit app features.

Quick: Can you write one native module codebase that works unchanged on both iOS and Android? Commit to yes or no.

Common Belief: You can write a single native module codebase that works on both platforms without changes.

Reality: Native modules require separate implementations for iOS and Android because they use different languages and APIs.

Why it matters: Expecting one codebase leads to confusion and wasted effort when platform-specific code is needed.

Quick: Does calling native modules always improve app performance? Commit to yes or no.

Common Belief: Using native modules always makes the app faster because native code is quicker than JavaScript.

Reality: Excessive calls over the bridge can slow the app due to communication overhead, so native modules must be used wisely.

Why it matters: Misusing native modules can degrade performance, causing lag and poor user experience.

Expert Zone

1

Native modules can emit events to JavaScript, enabling real-time updates from native code without polling.

2

The React Native bridge can be bypassed using newer architectures like TurboModules and Fabric for better performance.

3

Memory management between JavaScript and native code requires care to avoid leaks or crashes, especially with complex data.

When NOT to use

Avoid native modules for simple UI logic or features fully supported by React Native libraries. Instead, use pure JavaScript or community packages to reduce complexity and maintenance.

Production Patterns

In production, native modules are often wrapped in JavaScript APIs with error handling and fallbacks. Teams maintain separate native codebases with automated tests and CI to ensure stability across platforms.

Connections

Foreign Function Interface (FFI)

Native modules are a form of FFI allowing code in one language to call code in another.

Understanding FFI concepts from systems programming helps grasp how React Native bridges JavaScript and native code.

Microservices Architecture

Both use asynchronous communication between separate components to achieve modularity and scalability.

Knowing microservices patterns clarifies why React Native uses an asynchronous bridge to keep UI responsive.

Human Language Translation

Native modules act like translators between JavaScript and native languages, enabling understanding and cooperation.

Seeing native modules as translators highlights the importance of clear interfaces and protocols for smooth interaction.

Common Pitfalls

#1 Calling native module methods too frequently causing UI lag.

Wrong approach:

setInterval(() => NativeModules.CameraModule.takePicture(), 10);

Correct approach:

Use event-driven calls or throttle calls: NativeModules.CameraModule.takePicture() only when user taps button.

Root cause:

Not realizing that each call crosses the asynchronous bridge with overhead, causing performance issues.

#2 Assuming native module code is shared between iOS and Android.

Wrong approach:

// iOS Swift code used directly on Android
func getDeviceName() -> String { return UIDevice.current.name }

Correct approach:

// Separate Android Kotlin code
fun getDeviceName(): String = android.os.Build.MODEL

Root cause:

Misunderstanding platform differences and native languages.

#3 Ignoring error handling when calling native modules.

Wrong approach:

NativeModules.LocationModule.getCurrentPosition(); // no try/catch or promise handling

Correct approach:

try { const pos = await NativeModules.LocationModule.getCurrentPosition(); } catch (e) { console.error(e); }

Root cause:

Assuming native calls always succeed leads to crashes or silent failures.

Key Takeaways

Native modules let React Native apps access device features that JavaScript alone cannot reach.

They work by bridging JavaScript and native code asynchronously to keep apps responsive.

Creating native modules requires writing platform-specific code for iOS and Android separately.

Excessive or unoptimized native module calls can hurt app performance due to bridge overhead.

Understanding native modules deeply helps build powerful, smooth, and fully featured mobile apps.