Hướng dẫn tạo Native Module trong React Native: Lấy thông tin pin điện thoại!

Lê Lân

19/08/2025

Hướng Dẫn Tạo Native Module Trong React Native: Lấy Mức Pin Thiết Bị Với Kotlin và Swift

Mở Đầu

Bạn đã bao giờ thắc mắc cách các thư viện như react-native-camera hay react-native-device-info truy cập các tính năng gốc (native) trên thiết bị như thế nào chưa?

Trong bài viết này, bạn sẽ học cách tự tạo một native module trong React Native để lấy mức pin hiện tại của thiết bị. Chúng ta sẽ lần lượt phát triển module với Kotlin cho Android và Swift cho iOS. Bằng cách này, bạn sẽ hiểu rõ cách hoạt động của React Native Bridge — cầu nối giúp mã JavaScript giao tiếp trực tiếp với mã nền tảng gốc.

Dự án thực hành này không chỉ giúp bạn lấy thông tin pin mà còn trang bị kiến thức nền tảng để mở rộng truy cập các tính năng thiết bị khác bằng cách tận dụng tối đa sức mạnh của React Native: phát triển đa nền tảng kết hợp với quyền truy cập sâu vào chức năng hệ điều hành.

🤖 Android: Xây Dựng Native Module Với Kotlin

🧱 Bước 1: Tạo lớp `BatteryModule.kt`

📄 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) {

    override fun getName(): String = "BatteryStatus"

    @ReactMethod
    fun getBatteryLevel(promise: Promise) {
        try {
            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

            // Tính toán phần trăm pin
            val batteryPct = level * 100 / scale
            promise.resolve(batteryPct) // Trả về giá trị cho JS
        } catch (e: Exception) {
            promise.reject("BATTERY_ERROR", "Failed to get battery level", e)
        }
    }
}

Lưu ý: getBatteryLevel dùng Promise là cách hiệu quả để gửi giá trị bất đồng bộ từ Kotlin về JavaScript qua bridge.

📦 Bước 2: Đăng ký module trong `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()
    }
}

🧩 Bước 3: Đăng ký package trong `MainApplication.kt`

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

override fun getPackages(): List<ReactPackage> {
    return listOf(
        MainReactPackage(),
        BatteryPackage() // 👈 Đăng ký package tại đây
    )
}

🍏 iOS: Xây Dựng Native Module Với Swift

🧱 Bước 4: Tạo lớp `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))
        }
    }
}

🧠 RCTPromiseResolveBlock là gì?

Đây là kiểu callback được React Native thiết kế để giúp module native trả lời bất đồng bộ với JavaScript thông qua Promise.

🧩 Bước 5: Kết nối Swift với React Native qua Objective-C bridging

📄 ios/BatteryModuleApp/BatteryStatus.m

#import <React/RCTBridgeModule.h>

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

Nếu chưa có, tạo file BatteryModuleApp-Bridging-Header.h và thêm:

#import <React/RCTBridgeModule.h>

⚛️ Bước 6: Sử dụng Native Module trong 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>
  );
}

React Native Bridge tự động expose class BatteryStatus để bạn có thể gọi getBatteryLevel từ JS thông qua NativeModules .

🛠️ Mẹo Khắc Phục Sự Cố Thường Gặp

Lỗi "Native module cannot be found":

Android: Kiểm tra BatteryPackage đã được đăng ký trong MainApplication.kt chưa.

iOS: Đảm bảo RCT_EXTERN_MODULE và bridging header được tạo đúng cách.

Dọn sạch build cache:

Android: cd android && ./gradlew clean

React Native: npx react-native clean

Xác thực cấu hình Swift nếu build iOS bị lỗi.

🧠 Kết Luận

Tạo native module là cách tuyệt vời để tận dụng sức mạnh nền tảng gốc trong React Native. Bạn có thể:

🔓 Truy cập các tính năng cấp thấp như camera, Bluetooth, cảm biến...

🚀 Tăng hiệu năng bằng cách xử lý tác vụ nặng trên native

🔌 Tích hợp các SDK gốc (thanh toán, sức khỏe, media)

Qua dự án lấy mức pin, bạn đã học cách bridge JavaScript với code Kotlin và Swift thành công, đảm bảo phát triển đa nền tảng nhưng vẫn có thể tận dụng trọn vẹn sức mạnh các nền tảng riêng biệt.

Hãy bắt đầu tạo module native cho ứng dụng của bạn để mở rộng tính năng và nâng cao trải nghiệm người dùng!

Tham Khảo

React Native Official Docs – Native Modules: https://reactnative.dev/docs/native-modules-intro

Android Kotlin BatteryManager Documentation: https://developer.android.com/reference/android/os/BatteryManager

Apple Developer – UIDevice batteryLevel: https://developer.apple.com/documentation/uikit/uidevice/1620059-batterylevel

React Native GitHub – Bridging Swift: https://reactnative.dev/docs/native-modules-ios#exporting-swift

Pranjale Lav LinkedIn: https://www.linkedin.com/in/lav-pranjale-628559147/

Bạn có câu hỏi hoặc ý tưởng cải tiến? Đừng ngần ngại để lại bình luận hoặc theo dõi tác giả trên LinkedIn!