[React Native]Expo ImagePicker를 활용하여 기기 사진 접근 및 firebase Storage에 저장

회원가입하는 과정에서 사용자가 프로필 사진을 입력하는 기능을 만들려고 한다. 아래 카메라 버튼을 누르면 사진을 가지고 올 수 있도록 디자인을 하였다.

expo에서 제공하는 imagepicker을 사용하여 기기의 사진에 접근하는 기능을 구현하려고 한다.
https://docs.expo.dev/versions/latest/sdk/imagepicker/?redirected

설치

$ expo install expo-image-picker

코드 추가

import React, { useEffect } from 'react';
import { Alert, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
(...)
 // 사진 접근 권한을 요청하는 코드
    useEffect(() => {
        (async () => {
            if (Platform.OS !== 'web') {
                const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
                if (status !== 'granted') {
                    Alert.alert('Photo Permission', 'Please turn on the camera permission.');
                }
            }
        })();
    }, []);

//카메라 버튼 클릭시 사진 가져와서 수정하는 함수
    const _handlePhotoBtnPress = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
        });
        //canceled가 false일때 onChangePhoto의 사진의 uri를 전달
        if (!result.canceled) {
            onChangePhoto(result?.assets[0]?.uri);
        }
    };
    
        return (
        <Container>
            <ProfileImage source={{ uri: url }} />
            {showButton && <PhotoButton onPress={_handlePhotoBtnPress} />}
        </Container>
    );

launchImageLibraryAsync의 설정값

• launchImageLibraryAsync : 기기의 사진을 조회하고 선택된 사진의 정보를 반환.
• mediaTypes: 설정 가능한 값 중 미디어 타입은 가져올 파일의 유형을 결정.(사진만 가져오도록 설정)
• allowsEditing : 수정을 가능하게 할 것인지를 설정
• aspect는 수정시 사진을 자르는 비율을 결정. ios에서는 항상 정사각형이기 때문에 안드로이드에서만 적용되는 값이다.
• quality : 사진의 압축 품질을 설정하는 값으로 0부터 1사이의 값을 받는다.

그러면 아래와 같이 코드가 나온다.여기서 "canceled": false일 때 uri 주소를 사용한다.

{"assets": [{"assetId": null, "base64": null, "duration": null, 
             "exif": null, "fileName": null, "filesize": null, "height": 1080,
             "mimeType": "image/jpeg", "rotation": null, "type": "image", 
             "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/
             %2540anonymous%252Fmy-first-expo-ceb8a8a0-3913-4eb0-ad43-
             0e7fd454b12f/ImagePicker/a18fb903-a7d6-486f-81c4-3a0a025bc5d9.jpeg", 
             "width": 1080}], "canceled": false}

useState에 해당 사진의 uri를 넣어 화면에 나오도록 설정해주었다. 그랬더니 잘 나온다. 역시 모바일은 재밌는 것 같다.