[ReactNative] スクロールで上に隠れたりするHeaderの実装

完成系

上スクロールでヘッダーを隠し、下スクロールでヘッダーを出現させます。
スクロール量に応じて、ヘッダーの出現量が変わります。

使用ライブラリ

react-native-header-arupaka-r

非ネイティブモジュールのライブラリーなので、Expo GOで実行可能です。

https://github.com/SR-123456789/react-native-header-arupaka-r

インストール

yarn add react-native-header-arupaka-r

もしくは

npm install react-native-header-arupaka-r

使用方法

冒頭の動画のソース
画面全体をArupakaHeaderViewで囲って使用する。

import { Text } from 'react-native';
import { ArupakaHeaderView } from 'react-native-header-arupaka-r';
const App = () => {
  return (
    <ArupakaHeaderView
      showBackButton
      headerTitleColor="white"
      backBottomColor="white"
      headerTitle={'header'}
      headerColor="green"
      isGradientAnimated={true}
    >
      <Text>ここに中身を書く</Text>
    </ArupakaHeaderView>
  );
};

代表的なPropsの説明

デフォルトHeaderのカスタマイズ方法

Props名	効果	型
headerTitle	ヘッダーの中央の文字	String
headerTitleColor	ヘッダーの文字色	String
headerColor	ヘッダーの色	String
showBackButton	戻るボタンの有無	Boolean
onClickBackButton	戻るボタンを押した時のcallBack	():void=>{}