【React Native】アプリにActionSheetを実装できるライブラリ「react-native-action-sheet」

タイトル通り、React Native のアプリに ActionSheet を実装したのでその手順についてまとめ。
React Native にも、ActionSheet を実装できる API はあるのですが、こちらは iOS のみでしか動作しないようなため、ライブラリを導入して実装することにしました。

GitHub のページはこちら。

GitHub – expo/react-native-action-sheet: A cross-platform ActionSheet for React Native
https://github.com/expo/react-native-action-sheet

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

npm install @expo/react-native-action-sheet --save

上記の実行が完了したら、アプリに実装していきます。

まず、アプリ全体を <ActionSheetProvider /> で囲みます。
サンプルコードは下記のとおりです。

import { ActionSheetProvider } from '@expo/react-native-action-sheet'

class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
        <NavigationContainer>
          ...
        </NavigationContainer>
      </ActionSheetProvider>
    );
  }
}

こちらが完了したら、次に ActionSheet を表示したいコンポーネントに showActionSheetWithOptions を接続します。

import { connectActionSheet } from '@expo/react-native-action-sheet'

class ExamplePage extends React.Component {
  /* ... */
}

const ConnectedApp = connectActionSheet(ExamplePage)

export default ConnectedApp

接続する処理は、7行目で行っているのがそうです。
あとは、その接続した ConnectedApp をエクスポートします。

最後に、ActionSheet の項目や、各選択肢をタップされた時の処理を実装すれば完了です！

onOpenActionSheet() {
  const options = ['Delete', 'Save', 'Cancel'];
  const destructiveButtonIndex = 0;
  const cancelButtonIndex = 2;

  this.props.showActionSheetWithOptions(
    {
      options,
      cancelButtonIndex,
      destructiveButtonIndex,
    },
    buttonIndex => {
      // タップされた選択肢の index が返ります。
    },
  );
};

2行目の options で選択肢のラベルを設定しています。
3行目の destructiveButtonIndex には、削除などの赤く表示されてほしい項目のインデックスを指定します。
4行目の cancelButtonIndex には、キャンセルボタンのインデックスを指定します。
必要な項目は以上です。
そして、ActionSheet を表示する際には、Button の onPress 等に onOpenActionSheet() を実行すればOKです。

まだ、iOS でしか動作確認はしておりませんが、期待通りの表示になりました！
最初にアプリ全体を <ActionSheetProvider /> で囲ったりしなければいけないため、人によっては手間に感じてしまう人もいるかもしれませんが、とにかくシンプルで分かりやすいのでお勧めです。

以上、React Native でアプリに ActionSheet を追加できるライブラリ「react-native-action-sheet」のご紹介でした。
ご参考になれば幸いです。