【Expo】ImagePickerで画像を複数枚選択する方法

はじめに

個人開発中にImagePickerを「Expo ImagePicker 複数枚選択」とググっても「ImagePickerでは複数枚選択できない」とか「MediaLibraryでできる」という記事しかでてこないので記事を書くことにしました。

記事の最後にExpoで個人開発したアプリを紹介しているのでもしよければダウンロードお願いいたします!!🙏

前提

• SDK45以上
• expo-image-pickerインストール済み

結論

下記のようにするだけでした。

import * as ImagePicker from "expo-image-picker";
~~
~~
const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsMultipleSelection: true, // これをtrueに設定する
  quality: 1,
});

これだけでした。そしてしっかり公式ドキュメントに書いてました。。
やっぱり記事をググる前にドキュメント読まないといけないなと痛感しました👶

ちなみにallowsMultipleSelectionと画像をトリミングするallowsEditingは共存できません。
例えば以下のような使い方はNG、、というよりできないです。

await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsMultipleSelection: true, //どちらかを..
  allowsEditing: true, //falseにしてｸﾚ....
  quality: 1,
});

選択枚数の制限をかける

選択できる画像の最大数を設定することもできます。なのですが、現状はIOS14以上でしか対応されていません。。

IOS

await ImagePicker.launchImageLibraryAsync({
  ~~
  selectionLimit: 3, //3枚まで選択可能
});

Andoroidで選択最大数を再現したい場合は、選択された枚数を取得してアラートや独自モーダルで警告するのがいいと思います。

Android

const result = await ImagePicker.launchImageLibraryAsync({
  ~~
});
if (!result.canceled && result.assets.length > 3) {
  Alert.alert("3枚以下にしてください。")
}

最後に

最後まで読んでくださりありがとうございます。少しでもお役に立てていれば幸いです。

もし役に立った、助かったと思って頂けたならこの記事の内容を盛り込んで作成した思い出管理アプリで遊んでいただけると嬉しいです！！