이어서 Xcode 상단의 프로젝트명 우측에 있는 영역을 눌러서 iPhone 12 또는 다른 원하는 디바이스를 선택하고 좌측의 재생 버튼을 눌러서 다시 시도해보세요. 추후 yarn ios를 다시 실행해야 하는 상황이 오면 재생 버튼을 다시 누르세요.

▲ 그림 8-21 Xcode에서 앱 실행

여기에 있는 uri 값을 Image 컴포넌트의 source Props에서 사용하면 됩니다. 선택한 이미지의 uri를 useState를 통해 상태로 관리해봅시다.

components/SetupProfile.js

import React, {useState} from 'react';
import {Image, Pressable, StyleSheet, View, Platform} from 'react-native';
(...)

function SetupProfile() {
  const [displayName, setDisplayName] = useState('');
  const navigation = useNavigation();
  const {setUser} = useUserContext();
  const [response, setResponse] = useState(null);

  (...)

  const onSelectImage = () => {
    launchImageLibrary(
      {
        mediaType: 'photo',
        maxWidth: 512,
        maxHeight: 512,
        includeBase64: Platform.OS === 'android',
      },
      (res) => {
        if (res.didCancel) {
          // 취소했을 경우
          return;
        }
        setResponse(res);
      },
    );
  };

  return (
    <View style={styles.block}>
      <Pressable onPress={onSelectImage}>
        <Image 
          style={styles.circle} 
          source={{uri: response?.assets[0]?.uri}} />
      </Pressable>
  (...)