【React Native】下にスクロールすると非表示になるヘッダーを実装できる「react-native-swipe-hidden-header」ライブラリ

まだ実際にアプリに実装したわけではないのですが、今後使ってみたいライブラリ「react-native-swipe-hidden-header」のご紹介です。
よくある、リストビューを下にスクロールすると非表示になるヘッダーを実装することができます。

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

fengliu222/react-native-swipe-hidden-header: A react native component that can hide navigator bar when user swipe list.
https://github.com/fengliu222/react-native-swipe-hidden-header

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

npm install --save react-native-swipe-hidden-header

サンプルコードは下記のとおりです。
こちらは GitHub のページに掲載されていたものをほぼそのまま転載しています。

render() {
  const data = [{key: 'a'},{key: '2'},{key: '2a'},{key: '3a'},{key: 'a4'},{key: 'a1'}, {key: 'b'}, {key: 'b2'}, {key: 'b3'}, {key: 'b1'}];
  return (
    <SwipeHiddenHeader
      header={()=> <View style={styles.header}><Text style={styles.headerText}>Custom</Text></View>}
      renderScrollComponent={() => (
        <FlatList
          data={data}
          renderItem={(item) => (
            <TouchableOpacity
              onPress={()=> props.changeType('normal')}
              style={styles.block}>
              <Text>Tap here to Custom list view</Text>
            </TouchableOpacity>)
          } />)
      } />
  );
}

コードを見る感じそこまで複雑な書き方ではないようなので、実装は簡単そうですね。
renderScrollComponent に <FlatList /> を指定できるので、現在のコードからの変更も簡単そうです。
ただ、個人的に1つ気になる点があって、最終更新日が 2017年 5月なんですよね…。
ちょっと古いので、場合によっては上手く動かないかもしれないのではと心配しています。
このあたりについては、実際に導入してみて様子を見たいと思います。

以上、React Native でスクロールすると自動的に非表示になるヘッダーを実装できるライブラリ「react-native-swipe-hidden-header」のご紹介でした。
実際に実装したら、また記事に纏めたいと思います！