ReactNativeでFacebookSDKを使って画像や動画をシェアする方法

背景

ReactNativeとはFacebookが作っている、JavaScriptという言語でスマートフォンアプリを作れるフレームワークです。

スマートフォンアプリからFacebookに画像や動画をシェアしたい場合は、FaceookSDKを利用する必要があるようです。
（SDK無しでシェアする方法はあるのかもしれませんが、この記事ではSDKを使う前提で話を進めます。）
そのSDKをReactNativeで使うために、react-native-fbsdkというライブラリが提供されています。

しかし、react-native-fbsdkには、画像や動画をシェアするための型は用意されているものの、どう書けば良いかが詳しく書かれていませんでした。
試行錯誤の末、react-native-fbskdで画像と動画をシェアすることに成功したので、その方法を共有します。

使ったもの

react-native-fbsdkをインストールしたReactNativeアプリ
fbsdkのreadmeに書いてある手順で、アプリにsdkをインストールてください。

この記事で試した各プログラムのバージョンはこちらです。
react-native: 0.55.4
react-native-fbsdk: 0.7.0

画像をシェアする方法

contentTypeをphotoとして、SharePhotoContentとSharePhotoを定義し、それをShareDialog.showに渡すと画像をシェアできます。

const FBSDK = require('react-native-fbsdk')
const {
  ShareApi,
} = FBSDK

const photoUri = 'file://' + '/path/of/photo.png'
const sharePhotoContent = {
  contentType = 'photo',
  photos: [{ imageUrl: photoUri }],
}

// ...

ShareDialog.show(tmp.state.sharePhotoContent)

動画をシェアする方法

contentTypeをvideoとして、ShareVideoContentとShareVideoを定義し、それをShareDialog.showに渡すと動画をシェアできます。

const FBSDK = require('react-native-fbsdk')
const {
  ShareApi,
} = FBSDK

const videoUri = 'file://' + '/path/of/video.mp4'
const shareVideoContent = {
  contentType = 'video',
  video: { localUrl: videoUri },
}

// ...

ShareDialog.show(tmp.state.shareVideoContent)

まとめ

react-native-fbsdkを利用して、画像と動画をFacebookにシェアできました。
一度Android版でシェアを実現し、雰囲気を感じ取りながらJSで記述してみたとこと、期待通りにシェアできたので、記事として内容を共有しました。

この記事に関する内容のプルリクエストを送っています。
それが受理されれば、readmeを読めばすんなりと画像や動画をシェアできる人が増えると思います。

何かの参考になれば嬉しいです。

参考

react-nativeのsdkの概要説明
文章をシェアする方法が説明されています。
Facebook Sharing for React Native

Android版のsdkの概要説明
こちらには画像のシェア方法が説明されています。
Androidでのシェア

Android版sdkの資料
ShareVideo
SharePhoto

react-native-sdkの実装
パラメータをどのように記述したら良いか、実装を見ると分かりました。
SharePhoto
SharePhotoContent
ShareVideo
ShareVideoContent