[RN] react-native-cli에서 expo-cli 모듈 사용하기

해당 글에서는 react-native-cli 환경에서 expo-cli에서 제공하는 모듈을 사용하는 방법에 대해서 공유합니다.

 

1) 사용 취지

---

💡 expo-cli 환경에서 개발을 하다가 react-native-cli 환경으로 바꾸게 되는 경우가 발생하였고 expo 모듈을 react-native-cli 환경에서 사용을 하게 되는 경우가 발생하였습니다.
이에 따라서 react-native-cli 환경에서 expo-cli 모듈을 사용하는 방법을 공유합니다. 해당 환경에서는 expo 모듈인 expo-camera를 호출해오는 것을 목표로 합니다.

[참고] react-native-cli / expo-cli 개발 환경의 차이에 대해 이전에 작성한 글을 공유드립니다.

[RN] React Native 이해하기 및 개발 방법 선택

 

2) install-expo-modules / react-native-unimodules 이해하기

---

💡 해당 모듈을 사용하기 위해서는 install-expo-modules / react-native-unimodules에 대해서 이해를 해야 합니다.

💡 해당 라이브러리는 expo에서 제공하는 라이브러리입니다. 라이브러리에는 Expo 모듈을 사용하기 위해서 앱에 필요한 최소한의 패키지 세트와 Expo SDK 패키지가 빌드가 되는 모듈 및 자동 연결 인프라가 포함이 됩니다. 패키지가 설치 및 구성이 되면 Expo 모듈을 사용할 수 있습니다.

그리고 install-expo-modules / react-native-unimodules의 차이점은 설치된 Expo SDK 버전에 따라 나뉩니다.
Expo SDK 43 버전부터는 react-native-unimodules가 deprecated 되었습니다.

[결론]
Expo SDK < 43 → react-native-unimodules 사용할 것.
Expo SDK >= 43 → install-expo-modules 사용할 것

[출처] install-expo-modules 공식 사이트

Installing Expo modules - Expo Documentation

[출처] install-expo-modules 공식 사이트

Installing react-native-unimodules - Expo Documentation

3) install-expo-modules를 이용한 환경 구성

---

💡 해당 환경 구성은 초기 프로젝트 환경 생성부터 연결까지 과정을 설명합니다.

 

1. 프로젝트 생성 및 필수 라이브러리

---

# 1. 프로젝트 생성
$ npx react-native init rn_expo_modules --template react-native-template-typescript

 

2. expo-cli 설치

---

# 패키지 매니져 기반으로 expo-cli 설치 
$ npm install -g expo-cli

# or

$ yarn global add expo-cli

# expo-cli install Check
$ expo-cli --version

 

3. install-expo-modules 설치

---

💡 expo 모듈을 사용하기 위해서 install-expo-modules를 사용하여서 모듈을 불러옵니다.
💡 라이브러리에는 Expo 모듈을 사용하기 위해서 앱에 필요한 최소한의 패키지 세트를 install-expo-modules 를 사용하여서 불러옵니다.

# expo 모듈을 설치하기 위한 라이브러리 
yarn add install-expo-modules

# expo 모듈을 사용하기 위한 설치
npx install-expo-modules

 

4. expo-camera 라이브러리 구성

---

💡 expo-camera를 이용하기 위해서 기본적으로 불러와야 할 라이브러리를 설치합니다.

# expo 카메라를 조회 해오기 위한 설치 
$ expo install expo-camera
$ expo install expo-gl
$ expo install expo-gl-cpp

# IOS install 
$ npx pod-install 

 

5. 카메라 관련 환경 설정

---

💡 expo-camera를 이용하기 위해서 필요한 환경설정을 합니다.

build.gradle

allprojects {
    repositories {
        maven {
            // expo-camera bundles a custom com.google.android:cameraview
            url "$rootDir/../node_modules/expo-camera/android/maven"
        }
		}
}

 

Info.plist

<dict>
	<!-- Camera Permission -->
	<key>NSCameraUsageDescription</key>
	<string>Allow $(PRODUCT_NAME) to use the camera</string>
</dict>

 

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rn_tfjs_face_mesh">
       <!-- Added expo-camera permissions -->
    <uses-permission android:name="android.permission.CAMERA" />

    <!-- Added expo-file-system -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</manifest>

 

6. 소스 구성

---

💡 해당 소스에서는 최초 카메라 권한을 허용을 확인한뒤에 카메라 권한이 허용되었을 경우
expo-camera를 화면을 띄어줍니다.

import React, { useEffect, useState } from 'react';
import { Linking, SafeAreaView, ScrollView, StatusBar, StyleSheet, View } from 'react-native';
import { Header } from 'react-native/Libraries/NewAppScreen';
import { Camera, CameraType } from "expo-camera";

const App = () => {

  const [cameraStatus, setCameraStatus] = useState<"granted" | "denied" | "undetermined" | null>(null);

  useEffect(() => {
    (async () => {
      reqeustCameraPermissions();
    })();
  }, []);

  /**
    * [함수] 카메라 권한 요청 함수
    */
  const reqeustCameraPermissions = async (): Promise<void> => {
    const { status } = (await Camera.requestCameraPermissionsAsync());
    if (status !== 'granted') {
      Linking.openSettings();
      throw Error('카메라의 권한 요청이 승인 되지 않았습니다.');
    }
    setCameraStatus(status);
  };

  const styles = StyleSheet.create({
    camera: {
      position: "absolute",
      width: 300,
      height: 400,
      borderStyle: "solid",
      borderWidth: 10,
      borderColor: "rgba(0, 0, 0, 0.5)",
    },
  });

  return (
    <SafeAreaView>
      <Header />
      <View>
        {
          cameraStatus === "granted" && (
            <Camera style={styles.camera} type={CameraType.front} />
          )
        }
      </View>
    </SafeAreaView >
  );
};

export default App;

 

7. 결과 출력 화면

---

 

4) 오늘의 결론

---

expo 모듈을 react-native-cli 환경에서 불러오는 작업을 진행하였습니다.
최대한 react-native-cli 환경 라이브러리로 해결하는 것이 좋지만, 해결할 방법이 없다면 모듈을 불러와서 사용하는 방법을 사용하면 될 것 같습니다.

오늘도 감사합니다😀