React Native TurboModule 연결기 - Android

1. TurboModule의 JS Spec 정의

2. 프로젝트 package.json에 “codegenConfig“ 추가

이 부분들은 ios와 다를게 없으므로 이미 작성된 포스팅을 참고한다

👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻

React Native TurboModule 연결기 - iOS

3. 명령어로 코드젠 실행

위 명령어를 실행하면 “android/app/build/generated/source/codesen/java/com/프로젝트명” 경로에 *Spec.java가 생성된다

4. 네이티브 모듈 작성

“android/app/src/main/java/com/streakly” 이 경로에
구현체(NativeCameraModule.kt)와, 등록체(NativeCameraPackage.kt) 파일을 만들면 된다

//NativeCameraModule.kt

package com.streakly

import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactApplicationContext

class NativeCameraModule(
  context: ReactApplicationContext
) : NativeCameraSpec(context) {

  override fun getStatus(promise: Promise) {
    promise.resolve("연결됨")
  }
}

//NativeCameraPackage.kt

package com.streakly

import com.facebook.react.TurboReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.module.model.ReactModuleInfo
import com.facebook.react.module.model.ReactModuleInfoProvider

class NativeCameraPackage : TurboReactPackage() {

  override fun getModule(
    name: String,
    reactContext: ReactApplicationContext
  ): NativeModule? {
    return if (name == "NativeCamera") {
      NativeCameraModule(reactContext)
    } else {
      null
    }
  }

  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
    return ReactModuleInfoProvider {
      mapOf(
        "NativeCamera" to ReactModuleInfo(
          "NativeCamera",
          "NativeCamera",
          false, // canOverrideExistingModule
          false, // needsEagerInit
          true,  // hasConstants 
          false, // isCxxModule -> JS와 네이티브의 연결을 직접 만든 c++코드로 연결하니? - RNCore를 사용한다면 false
          true   // isTurboModule -> 뉴 아키텍처인 터보모듈을 사용하니? - 이전 아키텍처인 브릿지를 사용한다면 false
        )
      )
    }
  }
}

5. 모듈 실행! 끝

import { Button, View } from 'react-native';
import NativeCamera from '../../../specs/NativeCamera';

export const RecordScreen: React.FC = () => {
  const onPressGallery = async () => {
    try {
      const res = await NativeCamera.getStatus();
      console.log(res);
    } catch (e) {
      console.error(e);
    }
  };
  return (
    <View>
      <Button title="갤러리에서 가져오기" onPress={onPressGallery} />
      <Button title="사진 찍기" onPress={() => {}} />
    </View>
  );
};