【React Native】チェックボックス付きのリストを実装できる「rn-checkbox-list」ライブラリ

今後使えそうなライブラリを見つけたので、メモ代わりにまとめ。
チェックボックス付きのリストを実装できるライブラリ rn-checkbox-list です。

GitHub のページはこちらから。

GitHub – rinku-k/rn-checkbox-list: Customizable checkbox list with multi-select/deselect options
https://github.com/rinku-k/rn-checkbox-list

上記ページには、実際にライブラリを実装した時のアニメーション GIF もあるので、どんな動きをするのかが分かりやすいと思います。

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

npm install @react-native-community/checkbox rn-checkbox-list --save

rn-checkbox-list だけでなく、チェックボックスを使うために @react-native-community/checkbox も必要とのことです。

上記が完了したら、プロジェクトに実装していきます。
サンプルコードは下記のとおりです。

import CheckboxList from 'rn-checkbox-list';

<CheckboxList
  headerName="全選択"
  listItems={data}
/>

なお、表示するデータは下記のようなオブジェクト配列データの形式で渡します。

[
  { id: 1, name: 'list item 1' },
  { id: 2, name: 'list item 2' }
]

上記では最低限の props しか設定していませんが、他にも選択時のチェックボックスの色を指定できたり、リストのチェックボックスが選択/解除された時に実行する処理を指定できたり、リスト読み込み中に表示するコンポーネントを指定できたりします。
他にも、リストアイテムやヘッダーのスタイルも指定できるので、このあたりは任意の props を適宜指定してください。
個人的に、チェックボックスの色を簡単に変えられるのはとても嬉しいですね！

以上、React Native でチェックボックス付きのリストを実装できるライブラリ「rn-checkbox-list」のご紹介でした。
ご参考になれば幸いです。