9.3.2.3 react-native-image-picker 사용하기

사용자가 원하는 작업을 모달 또는 액션 시트에서 골랐을 때 react-native-image-picker로 사진을 촬영하거나 갤러리에서 이미지를 선택할 수 있게 구현해줍시다.

CameraButton을 다음과 같이 수정하세요.

components/CameraButton.js

(...)
import {launchImageLibrary, launchCamera} from 'react-native-image-picker';

const TABBAR_HEIGHT = 49;

const imagePickerOption = {
  mediaType: 'photo',
  maxWidth: 768,
  maxHeight: 768,
  includeBase64: Platform.OS === 'android',
};

function CameraButton() {
  (...)

  const onPickImage = (res) => {
    if (res.didCancel || !res) {
      return;
    }
    console.log(res);
  };

  const onLaunchCamera = () => {
    launchCamera(imagePickerOption, onPickImage);
  };

  const onLaunchImageLibrary = () => {
    launchImageLibrary(imagePickerOption, onPickImage);
  };

  const onPress = () => {
    if (Platform.OS === 'android') {
      setModalVisible(true);
      return;
    }

    ActionSheetIOS.showActionSheetWithOptions(
      {
        title: '사진 업로드',
        options: ['카메라로 촬영하기', '사진 선택하기', '취소'],
        cancelButtonIndex: 2,
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          onLaunchCamera();
        } else if (buttonIndex === 1) {
          onLaunchImageLibrary();
        }
      },
    );
  };

  return (
    <>
      (...)
      <UploadModeModal
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
        onLaunchCamera={onLaunchCamera}
        onLaunchImageLibrary={onLaunchImageLibrary}
      />
    </>
  );
}

(...)