React Native(Expo)でカメラロールを使うには expo-image-picker
を使います。
npx expo install expo-image-picker
カメラロールを開くための前提知識
カメラロールを開くステップは
STEP1 : 許可を取得
STEP2 : カメラロールを開く
です。
expo-image-picker
の中でも今回はカメラロールから写真の情報を取得する最低限のものを使っていきます。
使うものは
useMediaLibraryPermissions
launchImageLibraryAsync
です。
useMediaLibraryPermissions
はカメラロールの許可に関するフックです。mediaPermission
は許可状態を表し、requestMediaPermission
は許可を申請するために使います。
const [ mediaPermission, requestMediaPermission ] = useMediaLibraryPermissions();
ちなみに、mediaPermission
にどのような値が入るかは下のドキュメントを見てみてください

ImagePicker - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
次に launchImageLibraryAsync
ですが、これはカメラロールを開き、選択された画像か動画の情報を返してくれる関数です。
let data = await launchImageLibraryAsync()
// data には選択した画像か動画の情報が格納される
返ってくる情報に関してはこちらを見てください

ImagePicker - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
カメラロールで画像を選択するコードまとめ
カメラロールを開いて、選択した画像を表示する最低限?のコードを書いてみました
import { useState } from 'react';
import { Button, StyleSheet, Image, View } from 'react-native';
import { launchImageLibraryAsync, useMediaLibraryPermissions } from 'expo-image-picker';
export default function App() {
const [mediaPermission, requestMediaPermission] = useMediaLibraryPermissions();
const [imageData, setImageData] = useState(null)
return (
<View style={styles.container}>
{
imageData===null ?
<Button
title='カメラロールを開く'
onPress={async ()=>{
if(mediaPermission.granted){
setImageData(await launchImageLibraryAsync())
}
else if(mediaPermission.canAskAgain){
requestMediaPermission()
}
}}
/> :
<Image
source={{
uri: imageData.uri
}}
resizeMode='contain'
style={{
width: '100%',
height: '100%'
}}
/>
}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

コメント