[React Native] Android Native Module 사용하기

https://reactnative.dev/docs/native-modules-android 2024년 1월에 작성된 공식 문서를 참고하여 작성한 글입니다.

 

React Native를 사용하여 안드로이드의 네이티브 기능을 활용하려면 해당 기능을 제공하는 네이티브 모듈이 필요합니다. 

React Native(JavaScript) 에서 Android(Kotlin) 코드를 활용할 수 있는 방법에 대해 알아보겠습니다.

 

 

1️⃣ RN에 안드로이드 모듈 등록

/android/app/src/main/java/com/{패키지명}에 커스텀 모듈과 패키지를 추가합니다. 

 

JavaScript에서 필요한 기능을 구현할 클래스 입니다. 해당 모듈은 java/kotlin을 활용할 수 있는  ReactContextBaseJavaModule을 extend 합니다. 

 

🔎 LogModule.kt

package com.{패키지명}

import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import android.util.Log


class LogModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName() = "LogModule"

    @ReactMethod
    fun showLog(message: String) {
        Log.e("LogModule Run", message)
    }

}

 

• getName(): Android의 모든 Java/Kotlin 네이티브 모듈은 getName()메서드를 구현해야 합니다. 이 메서드를 통해 반환되는 모듈 이름을 JavaScript에서 사용합니다.
• @ReactMethod: JavaScript에서 호출한 메서드에 필요한 어노테이션입니다. 테스트를 위해 로그를 남기는 메서드를 작성했습니다.

 

🔎 LogPackage.kt

 

LogModule 등록에 쓰이는 패키지입니다. 해당 패키지를 MainApplication.kt 파일의 getPackages 메소드에 등록하여 React Native에서 사용할 수 있습니다. 

package com.{패키지명}

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager

class LogPackage : ReactPackage {

    override fun createViewManagers(
            reactContext: ReactApplicationContext
    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()

    override fun createNativeModules(
            reactContext: ReactApplicationContext
    ): List<NativeModule> = listOf(LogModule(reactContext)) // <- 모듈 추가
}

 

 

🔎 MainAppliction.kt

package com.{패키지명}

...

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
                add(LogPackage()) // <- 패키지 추가
            }
            
 ...
 }

 

getPackages()에 패키지를 추가해주면 안드로이드용 모듈 등록이 완료됩니다. 

 

 

2️⃣ 안드로이드 모듈 사용하기 

🔎 LogModule.js

안드로이드의 LogModule.kt를 JavaScript로 매핑하는 클래스입니다. 

import { NativeModules } from 'react-native';
const { LogModule } = NativeModules;
export default LogModule;

 

 

🔎 모듈-사용할-파일.js

LogModule.js 을 사용하여 모듈의 메서드를 호출할 수 있습니다. 

import LogModule from './modules/LogModule';

...

<Button onPress={() => LogModule.showLog('로그 모듈의 메서드가 정상적으로 실행됩니다');}/>

...