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.

Practice

1. Why do React Native apps use native modules?

easy

A. To make the app slower and less efficient

B. To write all app code in JavaScript only

C. To avoid using any native platform code

D. To access device features not available in JavaScript

Solution

1. Step 1: Understand React Native limitations

   JavaScript in React Native cannot access all device hardware or native libraries directly.

2. Step 2: Role of native modules

   Native modules bridge JavaScript with native platform code to access those features.

3. Final Answer:

   To access device features not available in JavaScript -> Option D

4. Quick Check:

   Native modules = access device features [OK]

Hint: Native modules add device features JavaScript lacks [OK]

Common Mistakes:

• Thinking native modules replace JavaScript code
• Believing native modules slow down the app
• Assuming native modules are optional for all features

2. Which of the following is the correct way to import a native module in React Native?

easy

A. import { NativeModules } from 'react-native';

B. import NativeModules from 'react-native';

C. require('NativeModules');

D. import NativeModules from 'native-modules';

Solution

1. Step 1: Recall React Native import syntax

   NativeModules is a named export from 'react-native', so it must be imported with curly braces.

2. Step 2: Check each option

   import { NativeModules } from 'react-native'; uses correct syntax with curly braces; others are incorrect or invalid module names.

3. Final Answer:

   import { NativeModules } from 'react-native'; -> Option A

4. Quick Check:

   Correct import uses curly braces [OK]

Hint: Use curly braces to import named exports [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using wrong module names
• Using require without assignment

3. What will the following React Native code output if the native module 'DeviceInfo' returns the device name 'Pixel 5'?

import { NativeModules } from 'react-native';
const { DeviceInfo } = NativeModules;

DeviceInfo.getDeviceName((name) => {
  console.log('Device:', name);
});

medium

A. Device: Pixel 5

B. Device: undefined

C. Error: getDeviceName is not a function

D. Device: null

Solution

1. Step 1: Understand native module callback

   The native module 'DeviceInfo' calls the callback with the device name 'Pixel 5'.

2. Step 2: Check console.log output

   The callback logs 'Device: Pixel 5' to the console.

3. Final Answer:

   Device: Pixel 5 -> Option A

4. Quick Check:

   Callback logs device name correctly [OK]

Hint: Callbacks print native data as expected [OK]

Common Mistakes:

• Assuming synchronous return instead of callback
• Expecting undefined if native module not linked
• Confusing function names or parameters

4. You wrote this code to use a native module but get an error: TypeError: NativeModules.CameraModule.getPicture is not a function. What is the most likely cause?

medium

A. You forgot to import React

B. JavaScript syntax error in your code

C. The native module is not properly linked or registered

D. You used the wrong variable name for NativeModules

Solution

1. Step 1: Analyze the error message

   The error says the function does not exist on the native module object.

2. Step 2: Understand native module linking

   If the native module is not linked or registered correctly, its functions won't be available in JavaScript.

3. Final Answer:

   The native module is not properly linked or registered -> Option C

4. Quick Check:

   Linking issues cause missing native functions [OK]

Hint: Check native module linking if functions missing [OK]

Common Mistakes:

• Assuming import errors cause this
• Ignoring native build steps
• Confusing variable names with linking problems

5. You want to create a React Native app that uses a native module to access the phone's biometric sensor for fingerprint authentication. Which of the following is the best approach?

hard

A. Write all biometric code in JavaScript without native modules

B. Use a native module to connect JavaScript with the platform's biometric API

C. Use only React Native UI components without any native code

D. Use a web API inside a WebView for biometric access

Solution

1. Step 1: Identify biometric sensor access needs

   Biometric sensors require native platform APIs not accessible directly from JavaScript.

2. Step 2: Choose the correct integration method

   Native modules bridge JavaScript with native biometric APIs for secure and efficient access.

3. Step 3: Evaluate other options

   JavaScript alone or WebView cannot access biometric hardware securely or at all.

4. Final Answer:

   Use a native module to connect JavaScript with the platform's biometric API -> Option B

5. Quick Check:

   Native modules enable hardware access [OK]

Hint: Use native modules for hardware features like biometrics [OK]

Common Mistakes:

• Trying to access hardware only with JavaScript
• Ignoring security and platform API requirements
• Using WebView for native hardware access