23.01.11 expo Image Picker

Image Picker

설치

npm i expo-image-picker
yarn add expo-image-picker

app.json 설정

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ]
    ]
  }
}

사용 예제(커스텀훅)

// /hooks/usePickImage
import { useState } from "react";
import * as ImagePicker from "expo-image-picker";

const usePickImage = (initialState) => {
  const [pickedImg, setPickedImg] = useState(initialState);
  // 권한부여
  const [status, requestPermission] = ImagePicker.useMediaLibraryPermissions();

  const pickImage = async () => {
    if (!status?.granted) {
      const permissions = await requestPermission();
      if (!permissions.granted) {
        return null;
      }
    }
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: false,
      aspect: [4, 3],
      quality: 1,
    });
    if (!!result) {
      const [{ uri }] = result.assets;
      setPickedImg(uri);
    }
  };

  return [pickedImg, setPickedImg, pickImage];
};

export default usePickImage;