Expo 에서 eject 없이 네이티브 모듈 설치하기

Update: Expo SDK 46 버전부터 공식적으로 expo eject 는 deprecated 되었습니다.
https://docs.expo.dev/faq/#is-expo-eject-deprecated

원래 엑스포에서는 내부적으로 sdk 에서 제공해주는 네이티브 모듈만 사용할 수 있었다.
그래서 커뮤니티에서 만들어진 써드파티 네이티브 모듈을 사용하기 위해서는
expo eject 를 해야하기 때문에, 보통 react-native-cli 환경에서 시작하는게 정신건강에 이로웠다.

이 부분에서 변경점이 하나 생겼는데, 엑스포 SDK41 부터는 expo prebuild 라는 기능을 제공해준다.
써드파티 네이티브 모듈의 경우, expo 에서 가이드 해주는대로 플러그인 스펙을 지정해놓으면 엑스포에서 클라우드 환경에서 사전에 해당 모듈을 포함시켜서 빌드를 해준다는것
따라서 이제는 네이티브 모듈 설치가 필요해도 eject 가 필수는 아니라는것.

간략한 설명은 이 포스팅에서 확인 가능하다.

기본적으로 플러그인은 app.json 혹은 app.config.js 에 아래와 같은 형태로 적는다.

{
  "name": "my app",
  "plugins": ["3rd-party-native-module"]
}

별도로 주어야 하는 권한이 있는 경우에는, 아래처럼 명시해줄 수 있다.

{
  "name": "my app",
  "plugins":[
    [
      "3rd-party-native-module",
      {
        "locationWhenInUsePermission": "Allow $(PRODUCT_NAME) to access your location"
      }
    ]
  ]
}

라이브러리에서 간편하게 플러그인을 지원해주고자 하는 경우에는
모듈 루트에 app.plugin.js 파일을 만들어서 커스텀 플러그인을 제공해줄수도 있다.
기본적으로 config 를 받아서 가공한 뒤 리턴하는 형태로 작성하면 된다.

// node_modules/camera-native-module/app.plugin.js

import { withInfoPlist } from "@expo/config-plugins";

const withCameraModule = (config, props) => {
  return withInfoPlist(config, (config) => {
    const { cameraPermission, microphonePermission } = props || {};

    config.modResults.NSCameraUsageDescription =
      cameraPermission ||
      config.modResults.NSCameraUsageDescription ||
      CAMERA_USAGE;

    config.modResults.NSMicrophoneUsageDescription =
      microphonePermission ||
      config.modResults.NSMicrophoneUsageDescription ||
      MICROPHONE_USAGE;

    return config;
  });
};

export default withCameraModule;

{
  "name": "my app",
  "plugins":[
    [
      "camera-native-module",
      {
        "cameraPermission": "Allow $(PRODUCT_NAME) camera",
        "microphonePermission": "Allow $(PRODUCT_NAME) microphone",
      }
    ]
  ]
}

자세한 내용은 아래의 링크를 참고.
https://docs.expo.dev/config-plugins/introduction
https://github.com/expo/config-plugins