Why native modules extend capabilities in React Native

Introduction

Native modules let your React Native app do things that JavaScript alone cannot. They connect your app to device features and native code for more power.

When you need to access device hardware like camera or GPS that React Native doesn't support directly.

When you want to use a native library or SDK that is only available in Java or Swift/Objective-C.

When you want better performance for complex tasks by running code directly on the device's native side.

When you need to handle background tasks or system events that JavaScript cannot manage well.

When you want to customize native UI components beyond what React Native offers.

Syntax

React Native

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.someMethod(args, (error, result) => {
  if (error) {
    // handle error
  } else {
    // use result
  }
});

You import native modules from NativeModules in React Native.

Native modules expose methods you can call from JavaScript.

Examples

Calling a native method to get the device name.

React Native

import { NativeModules } from 'react-native';
const { DeviceInfo } = NativeModules;
DeviceInfo.getDeviceName((error, name) => {
  if (!error) {
    console.log(name);
  }
});

Using a native module method that returns a Promise.

React Native

import { NativeModules } from 'react-native';
const { BatteryStatus } = NativeModules;
BatteryStatus.getBatteryLevel().then(level => {
  console.log('Battery level:', level);
});

Sample App

This app uses a native module to get the device name and shows it on screen. You can refresh the name by pressing the button.

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, Button, NativeModules } from 'react-native';

const { DeviceInfo } = NativeModules;

export default function App() {
  const [deviceName, setDeviceName] = useState('Unknown');

  const fetchDeviceName = () => {
    DeviceInfo.getDeviceName((error, name) => {
      if (!error) {
        setDeviceName(name);
      }
    });
  };

  useEffect(() => {
    fetchDeviceName();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Device Name:</Text>
      <Text style={{ fontWeight: 'bold', fontSize: 20 }}>{deviceName}</Text>
      <Button title="Refresh" onPress={fetchDeviceName} />
    </View>
  );
}

Important Notes

Native modules require writing some code in Java (Android) or Swift/Objective-C (iOS).

They help bridge React Native with native device features and libraries.

Always test native modules on real devices or emulators because they depend on platform APIs.

Summary

Native modules let React Native apps use device features not available in JavaScript.

They connect JavaScript code with native platform code for more power and flexibility.

Use native modules when you need hardware access, native libraries, or better performance.

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