【React Native】画像URIをBlobに変換できるライブラリ「react-native-image-to-blob」

ライブラリ名そのままですが、React Native で画像 URI を Blob に変換できるライブラリ「react-native-image-to-blob」のご紹介です。
正にやりたいと思っていたことがこのライブラリをインストールすると、簡単に実現できました！

GitHub のページはこちら。

GitHub – zusinShinpei/react-native-image-to-blob: image to blob library for react-native
https://github.com/zusinShinpei/react-native-image-to-blob

ライブラリのインストールは下記のコマンドで行います。

npm install --save react-native-image-to-blob react-native-image-resizer
npx pod-install  /* iOS の場合 */

なお、iOS の場合は pod install を行う必要があるので、2行目のコマンドも実行してください。

上記が完了したら、早速プロジェクトに組み込んでいきます。
なお、画像選択には react-native-image-picker ライブラリを使用しています。

サンプルコードは下記のとおりです。

import ImagePicker from 'react-native-image-picker';
import imageToBlob from 'react-native-image-to-blob/lib/imageToBlob';

async changePhoto() {
  try {
    const options = {
      title: '写真を変更する',
      takePhotoButtonTitle: 'カメラで写真を撮影する',
      chooseFromLibraryButtonTitle: 'アルバムから写真を選択する',
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        this.uploadPhoto(response);
      }
    });
  } catch(error) {
    console.log(error);
  }
}
async convertPhoto(file) {
  try {
    const imageFile = await imageToBlob(file);
    /* 画像変換後の処理 */
  } catch(error) {
    console.log(error);
  }
}

changePhoto 関数を実行すると写真をカメラで撮影するか、アルバムから取得するかの確認ダイアログが表示され、写真の撮影、もしくは選択に成功すると、convertPhoto 関数が実行され、画像が URI から Blob に変換します。
処理としては以上です！

あとは、変換後の画像をアップロードするなどの任意の処理を実行してください。

以上、React Native で画像 URI を Blob に変換できるライブラリ「react-native-image-to-blob」のご紹介でした。
ご参考になれば幸いです。