【React Native】画像のトリミングを行えるライブラリ「react-native-image-crop-picker」

画像をカメラもしくはアルバムから選択した際、任意の場所でトリミングを行いたいということがあると思います。
現在開発中のアプリでもそういったご要望があったため、画像トリミング機能を「react-native-image-crop-picker」というライブラリで実装しています。

GitHub のページはこちら。

GitHub – ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping
https://github.com/ivpusic/react-native-image-crop-picker

実装方法ですが、まずライブラリを下記のコマンドでインストールします。

npm install --save react-native-image-crop-picker
npx pod-install

なお、iOS の場合は、2行目のコマンドも実行してください。

上記が完了したら、実際にコードを機能を追加していきます。
まず、下記のインポート文を追加し、ライブラリをインポートします。

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

あとは、任意のタイミングで下記を実行すればOKです！

// 画像アルバムから写真を選択し、トリミングを行う
ImagePicker.openPicker({
  width: 1000,
  height: 1000,
  cropping: true
}).then(image => {
  // 画像トリミング後に行いたい処理を記述
  console.log(image);
});

// カメラで写真を撮影し、トリミングを行う
ImagePicker.openCamera({
  width: 1000,
  height: 1000,
  cropping: true
}).then(image => {
  // 画像トリミング後に行いたい処理を記述
  console.log(image);
});

なお、実際のトリミングの画面はこんな感じ。
ちなみに iOS です。

width, height に、それぞれ 1000 を指定しているため、正方形にトリミング出来るようになっています。

トリミング後を行った後のレスポンス image には、image.path にトリミング後の画像パスが含まれているため、こちらを <Image /> に渡してあげれば処理後の画像を表示することができます。
レスポンスの内容については、GitHub にまとめられてるので、そちらをご参考ください。

以上、React Native で画像のトリミング機能を実装できるライブラリ「react-native-image-crop-picker」のご紹介でした。
ご参考になれば幸いです。