【React Native】リストアイテムをスワイプしてボタンを表示するライブラリ「react-native-swipe-list-view」

以前にも紹介しましたが、先日実際にアプリに実装してみたので感想などをまとめ。
iOS でよく見る、一覧のリストアイテムを右や左にスワイプすることで、削除ボタンなどを表示する機能を実装できるライブラリ「react-native-swipe-list-view」です。
GitHub のページはこちらから。

jemise111/react-native-swipe-list-view: A React Native ListView component with rows that swipe open and closed
https://github.com/jemise111/react-native-swipe-list-view

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

npm install --save react-native-swipe-list-view

GitHub に載っていたサンプルコードは下記のとおりです。

import { SwipeListView } from 'react-native-swipe-list-view';

<SwipeListView
  data={this.state.listViewData}
  renderItem={ (data, rowMap) => (
    <View style={styles.rowFront}>
      <Text>I am {data.item.text} in a SwipeListView</Text>
    </View>
  )}
  renderHiddenItem={ (data, rowMap) => (
    <View style={styles.rowBack}>
      <Text>Left</Text>
      <Text>Right</Text>
    </View>
  )}
  leftOpenValue={75}
  rightOpenValue={-75}
/>

React Native の FlatList とほぼ同じ感じで使用することができます。
FlatList と異なる点は、renderHiddenItem と leftOpenValue、rightOpenValue くらいでした。
renderHiddenItem は renderItem で指定した要素の背面に、全く同じサイズの要素を作成する Props です。
leftOpenValue や rightOpenValue で指定した幅分の要素を右端か左端に用意すれば綺麗に表示されました。

なお、上記の記述方法では、「右または左にスワイプした時にボタン要素が表示されるのでそれをタップする」、という動作になりましたが、Actions を使うと、「右または左のスワイプ量が設定値に達したら、指定した関数を実行する」ということもできるようでした。
Actions についてのドキュメントはこちらです。
https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/actions.md
例えば leftActionValue に -75、onLeftAction に任意の処理を指定していれば、左に 75 以上スワイプしたら、onLeftAction で指定した処理が実行されます。
iOS の Gmail で見られる動きですね。
ただ、個人的にはこの操作を間違ってやってしまって「あー！」となることが多々あるので、確認のダイアログはあった方が良いと思います。
あと、特に Android の場合、こういった挙動ってあまり見ない気がするので、人によってはわかりにくいのではないかとも思いました。
結局、デザイン的にもちょっと合わなかったので、アプリに実装するのは諦めました…。

ですが、実装は簡単だし、操作した感じもスムーズでとても良かったので、機会があれば是非他のアプリか別のページで実装したいと思います！

以上、React Native でリストアイテムを左右にスワイプでしてボタンを表示できるライブラリ「react-native-swipe-list-view」のご紹介でした。
ご参考になれば幸いです。