【React Native】「react-native-accordion」ライブラリでアニメーション付きアコーディオンを実装する

React Native アプリでアコーディオンリストを実装する際、React Native Paper の List.Accordion を使用していたのですが、アコーディオンを開く/閉じる際にアニメーションが欲しくなったので、別のライブラリを使うことにしました。
で、導入したのが「react-native-accordion」というライブラリです。

GitHub のページはこちら。

GitHub – Gapur/react-native-accordion: Animated accordion component for React Native
https://github.com/Gapur/react-native-accordion

導入手順ですが、まず下記コマンドでインストールします。

npm install --save @gapur/react-native-accordion

あとは、アコーディオンを実装したいページで、ライブラリをインポートすれば準備は完了です。

import Accordion from "@gapur/react-native-accordion";

アコーディオンを追加したい場所で下記を追加してください。

<Accordion
  showButton
  headerTitle="タイトル">
  <View>
    <Text>アコーディオンをタップして表示したい内容</Text>
  </View>
</Accordion>

なお、アコーディオン展開前の見た目については、プロパティの renderHeader を使えば任意のコンポーネントを表示させることができます。
サンプルコードは下記の通りです。

<Accordion
  showButton
  renderHeader={() => <View><Text>カスタムヘッダー</Text></View>}>
  <View>
    <Text>アコーディオンをタップして表示したい内容</Text>
  </View>
</Accordion>

また、showButton プロパティを追加すると、アコーディオン下部に開く/閉じるボタンが表示されます。
もしボタンの位置などのスタイルを変更したい場合は buttonStyle プロパティで設定すればOKです。
私はアコーディオンの右端にくるように変更しました。
なお、showButton プロパティを追加しない場合は、アコーディオン全体がタップ可能になります。

基本的な使い方は以上です。
「react native accordion」で調べると、他にもライブラリが出てきましたが、これが一番シンプルで使い回しができそうだったのでこちらをチョイスしました。
予想通り、とても使いやすくてお勧めです！
特に、アコーディオンの見た目をカスタマイズをしたい場合は、こちらを導入するといいと思います。

以上、React Native でアニメーション付きのアコーディオンを実装できるライブラリ「react-native-accordion」のご紹介でした。
ご参考になれば幸いです。