React Native - 이미지 선택 (react-native-image-crop-picker)

저번 글에 이어서 react-native-image-crop-picker 사용법을 알아본다.

 

1. 설치

npm install react-native-image-crop-picker
#or
yarn add react-native-image-crop-picker

 

 

2. 설정

android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        ...
    }
}

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url "$rootDir/../node_modules/react-native/android" }

      // ADD THIS
      maven { url 'https://maven.google.com' }

      // ADD THIS
      maven { url "https://www.jitpack.io" }
    }
}

 

android/app/build.gradle

android {
    ...

    defaultConfig {
        ...
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}

 

 

3. 권한

android/app/src/main/AndroidManifest.xml\

• SDK version >= 33
  • <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
• 카메라 사용 원할 경우
  • <uses-permission android:name="android.permission.CAMERA"/>
• 전면 카메라 사용 원할 경우
  • <uses-feature android:name="android.hardware.camera" android:required="false" />
  • <uses-feature android:name="android.hardware.camera.front" android:required="false" />

 

 

4. 옵션

• cropping : 이미지 크롭 가능 여부 (default : false)
• width : crop 너비
• height : crop 높이
• multiple : 여러 이미지 선택 가능 여부
• includeBase64 : 이미지를 base64 형태로 제공
• freeStyleCropEnabled : 커스텀 사각형으로 crop 허용
• cropperToolbarTitle : 이미지를 crop할 때 상단 타이틀
• useFrontCamera : 전면 카메라 허용 여부
• compressImageQuality : 이미지 품질 (0∽1)

 

 

5. 코드

간단한 예시 코드는 다음과 같다.

// test2.tsx

import CustomText from '@/components/text';
import {Test2Props} from '@/types/stack';
import {Button, Image, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import ImagePicker from 'react-native-image-crop-picker';
import {useState} from 'react';

const Test2Screen = ({navigation}: Test2Props) => {
  const [uri, setUri] = useState<string>('');

  const onChoosePhoto = async () => {
    const result = await ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: true,
      mediaType: 'photo',
      compressImageQuality: 0.9,
      cropperToolbarTitle: '이미지 자르기',
    });

    if (result) setUri(result.path);
  };

  const onTakePhoto = async () => {
    const result = await ImagePicker.openCamera({
      width: 300,
      height: 300,
      cropping: true,
      mediaType: 'photo',
      compressImageQuality: 0.9,
      cropperToolbarTitle: '이미지 자르기',
      useFrontCamera: true,
    });

    if (result) setUri(result.path);
  };

  return (
    <SafeAreaView className="flex-1">
      <View className="w-full h-full flex justify-center items-center bg-white">
        <CustomText className="text-success text-xl" children="테스트 화면" />
        <Button title="갤러리" onPress={onChoosePhoto} />
        <Button title="촬영" onPress={onTakePhoto} />
        <Image source={{uri: uri}} width={300} height={300} />
      </View>
    </SafeAreaView>
  );
};

export default Test2Screen;

 

 

6. 실행

실행한 결과는 response로 object 형태를 가지게 된다.

• path : 선택된 이미지 경로.  해당 path를 통해 로컬스토리지에 저장, 공유, 외부 스토리지 저장 등을 활용하면 된다.
• filename : 파일명
• width : 너비
• height : 높이
• mime : MIME type (image/jpeg, image/png)
• size : 파일 사이즈