react-native SNSシェア機能の実装方法

はじめに

react-native製のアプリで、なんてことはない外部サービスへのシェア機能を実装しようという話。調べた感じ方法は大きく２通りあるようです。

react-nativeでSNSシェア機能を実装する方法

• 標準APIを用いる
• react-native-sns-shareを使う

前者の標準APIを用いてサクッとやることにしました。
後者のreact-native-sns-shareはnodeのパッケージとして見つけたのですが、ドキュメントがなく、人気もあまりないように感じたので除外しました。

標準APIを用いてSNSシェア機能を作る

ボタンイベント等でシェア機能を発火させるためのイベントを作る

onPress={() => this.onShare(index)}

onShareメソッドの内部でShareを読み込む

標準APIの「Share」をファイル上部でimportして、先ほど作ったonShareメソッドの中で呼び出すようにします。

  onShare(index){
    Share.share({
      title: 'タイトル',
      message: '概要'
    }, {}).then((result, activityType) => {
      console.log(result)
    })
  }

この時、Androidではresultに{“action”: “sharedAction”}
Shareを中断した場合は{“action”: “dismissedAction”}が入る

メソッドを呼ぶとこんな感じでダイアログが出現するように。

補足

Share.shareの第一引数にはtitleとmessage、またはtitleとurlの指定ができます。

export type ShareContent =
    | {
          title?: string;
          message: string;
      }
    | {
          title?: string;
          url: string;
      };

Share.shareの第二引数にはオプションの指定ができます

export type ShareOptions = {
    dialogTitle?: string;
    excludedActivityTypes?: Array<string>;
    tintColor?: string;
    subject?: string;
};