【React Native】アルバムやカメラから画像を取得できるライブラリ「react-native-image-picker」

アプリから端末のアルバムにアクセスしたり、カメラで撮影した写真を取得したりする機能を実装するために、「react-native-image-picker」というライブラリを導入しました。
これが本当にシンプルで実装も簡単だったのでおすすめ！

GitHub のページはこちらから。

GitHub – react-native-image-picker/react-native-image-picker: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.
https://github.com/react-native-image-picker/react-native-image-picker

インストールは下記のコマンドを実行します。

npm install react-native-image-picker --save

iOS の場合は、ライブラリのインストールが完了した後に npx pod-install も実行してください。
また、AndroidManifest.xml や Info.plist に必要な項目を追加してください。
追加項目については、こちらを参考にしました。

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

import ImagePicker from 'react-native-image-picker';

const options = {
  title: '写真を取得する',
  takePhotoButtonTitle: 'カメラで写真を撮影する',
  chooseFromLibraryButtonTitle: 'アルバムから写真を選択する',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', 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 {
    const source = { uri: response.uri };
    this.setState({
      image: source,
    });
  }
});

変数 source にアルバムから取得した写真もしくはカメラで撮影した写真のデータが格納されます。
今回は、こちらを state の image に保存しました。
なお、画像を表示する際には下記のようにすればOKです。

<Image source={this.state.icon} />

必要なコードは以上です。
個人的に、表示されるダイアログの各ボタンのテキストを指定できるのが良かったです。
あとは、実装が本当に簡単でした！
これはおすすめのライブラリですね！

以上、React Native でアルバムからの画像取得やカメラ撮影機能を実装できるライブラリ「react-native-image-picker」のご紹介でした。
ご参考になれば幸いです。

【2021年2月23日　追記】
こちらのライブラリですが、バージョンが 2 から 3 にアップグレードしたタイミングで、ImagePicker API が削除されたようでした！
詳しくは こちらの記事 でも紹介していますが、実装の際は必ず GitHub の記事の内容を確認するようにしてください！