🔌 Build a Native Module in React Native (Battery Level Example for Android & iOS)

Ever wonder how libraries like react-native-camera or react-native-device-info access native features?
In this guide, you’ll learn how to create your own native module in React Native — using Kotlin for Android and Swift for iOS — to fetch the battery level of the device.
You'll understand how the React Native bridge works and how JavaScript can talk directly to platform-native code.

🚀 What You’ll Build

We'll build a lightweight but powerful native module called BatteryStatus that retrieves the current battery level of the device.

It’s a perfect hands-on project to understand how the React Native bridge acts as a translator between your JavaScript and native code — giving you the best of both worlds: cross-platform development and low-level access to device features.

✅ Pre-requisites Checklist

Make sure the following tools are installed and working:

• ✅ Node.js & npm
• ✅ React Native CLI (npx react-native init)
• ✅ Android Studio (for Android)
• ✅ Xcode (for iOS on macOS)

⚠️ This tutorial is for React Native CLI projects (not Expo). Expo doesn’t support custom native modules out of the box unless you eject or use Expo Modules API.

🏗️ Step 1: Create a New Project

Start by initializing a fresh React Native app:

npx react-native init BatteryModuleApp
cd BatteryModuleApp

We’ll first create the native module for Android, then move on to iOS.

🤖 Android: Build the Native Module in Kotlin

🧱 Step 2: Create the BatteryModule.kt Class

📄 android/app/src/main/java/com/batterymoduleapp/BatteryModule.kt


package com.batterymoduleapp

import android.content.Intent
import android.content.IntentFilter
import android.os.BatteryManager
import com.facebook.react.bridge.*

class BatteryModule(reactContext: ReactApplicationContext) :
  ReactContextBaseJavaModule(reactContext) {

  // Module name used to access from JavaScript
  override fun getName(): String = "BatteryStatus"

  @ReactMethod
  fun getBatteryLevel(promise: Promise) {
    try {
      // Get battery info from system intent
      val batteryIntent = reactApplicationContext.registerReceiver(
        null, IntentFilter(Intent.ACTION_BATTERY_CHANGED)
      )
      val level = batteryIntent?.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) ?: -1
      val scale = batteryIntent?.getIntExtra(BatteryManager.EXTRA_SCALE, -1) ?: -1
      val batteryPct = level * 100 / scale

      promise.resolve(batteryPct) // Send value back to JS
    } catch (e: Exception) {
      promise.reject("BATTERY_ERROR", "Failed to get battery level", e)
    }
  }
}

📦 Step 3: Register the Module with BatteryPackage.kt

📄 android/app/src/main/java/com/batterymoduleapp/BatteryPackage.kt

package com.batterymoduleapp

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class BatteryPackage : ReactPackage {
  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
    return listOf(BatteryModule(reactContext))
  }

  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
    return emptyList()
  }
}

🧩 Step 4: Register the Package in MainApplication.kt

📄android/app/src/main/java/com/batterymoduleapp/MainApplication.kt

override fun getPackages(): List<ReactPackage> {
  return listOf(
    MainReactPackage(),
    BatteryPackage() // 👈 Register your package here
  )
}

🍏 iOS: Build the Native Module in Swift

🧱 Step 5: Create BatteryStatus.swift

📄 ios/BatteryModuleApp/BatteryStatus.swift

import Foundation
import UIKit

@objc(BatteryStatus)
class BatteryStatus: NSObject {

  @objc
  func getBatteryLevel(_ resolve: @escaping RCTPromiseResolveBlock,
                       rejecter reject: @escaping RCTPromiseRejectBlock) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    let level = UIDevice.current.batteryLevel

    if level < 0 {
      reject("BATTERY_ERROR", "Battery level is unavailable", nil)
    } else {
      resolve(Int(level * 100))
    }
  }
}

🧠 What’s RCTPromiseResolveBlock?

It’s a bridge-friendly way of returning asynchronous values from native Swift code back to JavaScript.

🧩 Step 6: Bridge Swift to React Native

Create an Objective-C bridging file:

📄 ios/BatteryModuleApp/BatteryStatus.m

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(BatteryStatus, NSObject)
RCT_EXTERN_METHOD(getBatteryLevel:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
@end

📄 If not already created, add a bridging header file:
BatteryModuleApp-Bridging-Header.h

#import <React/RCTBridgeModule.h>

⚛️ Step 7: Call the Module from JavaScript

📄 App.js

import React from 'react';
import {NativeModules, Button, Alert, View} from 'react-native';

const {BatteryStatus} = NativeModules;

export default function App() {
  const getBattery = async () => {
    try {
      const level = await BatteryStatus.getBatteryLevel();
      Alert.alert(`Battery Level: ${level}%`);
    } catch (e) {
      Alert.alert('Error fetching battery level');
    }
  };

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="Get Battery Level" onPress={getBattery} />
    </View>
  );
}

🧠 This works because React Native’s bridge exposes our native BatteryStatus class to JavaScript via NativeModules.

🛠️ Troubleshooting Tips

“Native module cannot be found” error?

• Android: Check if BatteryPackage is added to MainApplication.kt
• iOS: Confirm RCT_EXTERN_MODULE is in place and bridging header is set
• Try cleaning: cd android && ./gradlew clean or npx react-native clean

iOS build fails on Swift?

• Make sure you’ve created and linked the Bridging-Header.h correctly
• Check your target’s build settings

🧠 Final Thoughts

Custom native modules unlock the full capabilities of React Native. You can:

• 🔓 Access low-level features (camera, Bluetooth, sensors)
• 🚀 Improve performance by offloading heavy tasks to native code
• 🔌 Integrate native SDKs (payments, health data, media)

And best of all — you gain true cross-platform control while keeping the power of React Native’s declarative UI.

Follow me on LinkedIn

Got questions or ideas for improvements? Drop them in the comments! 💬