카메라 촬영과 갤러리에서 이미지 선택, 둘 다 같은 옵션을 공유하기 때문에 옵션 객체를 컴포넌트 코드 상단에서 상수로 선언해줬습니다.

다음으로 UploadModeModal 컴포넌트에서 방금 전달한 onLaunchCamera와 onLaunchImageLibrary를 각 버튼의 onPress로 설정하세요.

components/UploadModeModal.js

import React from 'react';
import {StyleSheet, Modal, View, Pressable, Text} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

function UploadModeModal({
    visible,
    onClose,
    onLaunchCamera,
    onLaunchImageLibrary,
}) {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}>
      <Pressable style={styles.background} onPress={onClose}>
        <View style={styles.whiteBox}>
          <Pressable
            style={styles.actionButton}
            android_ripple={{color: '#eee'}}
            onPress={() => {
              onLaunchCamera();
              onClose();
            }}>
            <Icon
              name="camera-alt"
              color="#757575"
              size={24}
              style={styles.icon}
            />
            <Text style={styles.actionText}>카메라로 촬영하기</Text>
          </Pressable>
          <Pressable
            style={styles.actionButton}
            android_ripple={{color: '#eee'}}
            onPress={() => {
              onLaunchImageLibrary();
              onClose();
            }}>
            <Icon name="photo" color="#757575" size={24} style={styles.icon} />
            <Text style={styles.actionText}>사진 선택하기</Text>
          </Pressable>
        </View>
      </Pressable>
    </Modal>
  );
}

(...)

onPress에서 Props로 받아온 원하는 함수와 onClose를 함께 호출하도록 구현해줬습니다. 이러면 각 버튼이 눌릴 때 모달 또한 닫힙니다.

여기까지 구현하면 업로드할 이미지를 카메라로 촬영하거나, 갤러리에서 선택해 고를 수 있습니다.

참고로 안드로이드 시뮬레이터에서는 가상 카메라를 사용할 수 있지만, iOS 시뮬레이터에서는 가상 카메라를 사용할 수 없습니다. 카메라 기능이 제대로 작동하는지는 실제 기기에서 확인해야 하므로 이번 장에서 카메라 기능 테스트는 생략하겠습니다.