【React Native】【Android】MediaLibraryで画像データを取得する際の注意点

こんにちは！アルダグラムでエンジニアをしている渡邊です！

弊社の KANNA アプリは React Native で作られており、端末内の画像データを取得するために Expo の MediaLibrary というライブラリを使用しています。

この MediaLibrary には getAssetsAsync という関数があり、この関数で端末内の画像データが取得できます。

この関数を使っていて問題があったため、その点を共有したいと思います。

まとめ

最初にまとめを記載しておきます。

• MediaLibrary.getAssetsAsync() で並び順に creationTime を指定した場合、Android では Exif の作成日時のデータが参照される
• 画像の Exif がない場合、 creationTime による並び順が正常に動作しない
• Exif がない場合を考慮するなら MediaLibrary.getAssetsAsync() の並び順には creationTime ではなく modificationTime を指定した方がよい

問題点

KANNA では端末内の画像をアップロードする機能があるため、先ほどの MediaLibrary.getAssetsAsync() 関数を使って画像データを取得し、ユーザーがどの画像をアップロードするかを選択できるようになっています。

この時画像の表示順は最新のものから順番に表示されるようにしていますが、Android で LINE で撮影した画像がトップに表示されないという報告がありました。
ちなみにカメラアプリなど、LINE 以外で撮影した画像の並び順は問題ありませんでした。

原因

MediaLibrary.getAssetsAsync() 関数では引数でオプションを設定することができ、ここで並び順の指定ができます。 元々の並び順には creationTime を指定しているため、写真の作成日時の降順で並んでいます。

Expo のコードを見てみると、詳細は省きますが画像データの取得には ContentResolver というものが使われており、creationTime の並び順の場合には MediaStore.Images.Media.DATE_TAKEN というパラメータが使われていました。

https://github.com/expo/expo/blob/main/packages/expo-media-library/android/src/main/java/expo/modules/medialibrary/MediaLibraryEnums.kt#L22

この MediaStore.Images.Media.DATE_TAKEN はドキュメントを見ると Exif の撮影日時のデータを参照しているとのことでした。

そしてどうやら LINE アプリは何らかの理由で画像の Exif を保存していないようです。 そのため、Android の場合は LINE で撮影した画像がトップに出てこないということでした。

ちなみに iOS の場合は creationTime を指定した場合は PHAsset の creationDate が参照されているようで、これは Exif データではなくファイルの作成日時のようです。

解決方法

MediaLibrary.getAssetsAsync() 関数の並び順に creationTime ではなく modificationTime を指定するようにしました。

modificationTime の場合だと Android のネイティブ側では MediaStore.Images.Media.DATE_MODIFIED が使われ、これを使うことで画像ファイルの変更日時が参照されるようになります。