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.