Why native modules extend capabilities in React Native - The Real Reasons

The Big Idea

Discover how tiny native code pieces can supercharge your React Native app beyond JavaScript limits!

The Scenario

Imagine building a React Native app that needs to use the phone's camera in a special way or access a new sensor. Without native modules, you might be stuck trying to make JavaScript do things it wasn't built for.

The Problem

Relying only on JavaScript limits your app because it can't directly talk to all the phone's hardware or system features. This makes your app slower, less powerful, and sometimes impossible to build certain features.

The Solution

Native modules let you write small pieces of code in the phone's own language (like Swift for iOS or Kotlin for Android) and connect them to your React Native app. This way, you get full access to device features while still using JavaScript for most of your app.

Before vs After

✗ Before

const camera = require('basic-camera'); // limited features

✓ After

import { NativeModules } from 'react-native';
const { CustomCamera } = NativeModules; // full device control

What It Enables

Native modules unlock the full power of the device, letting your app do things JavaScript alone cannot.

Real Life Example

A fitness app uses a native module to access the phone's heart rate sensor directly, giving real-time health data that JavaScript alone can't reach.

Key Takeaways

JavaScript alone can't access all device features.

Native modules bridge React Native with device-specific code.

This makes apps faster, richer, and more capable.

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