[React Native library] Implementing a Header that Hides or Appears on Scroll

Final Version

The header hides when scrolling up and appears when scrolling down.

The visibility of the header changes according to the scroll amount.

Library Used

react-native-header-arupaka-r

This is a non-native module library, so it can be executed with Expo GO.

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

Installation

Using Yarn:

yarn add react-native-header-arupaka-r

or using npm:

npm install react-native-header-arupaka-r

Usage

Source for the introductory video:

Wrap the entire screen with ArupakaHeaderView to use it.

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>Write your content here</Text>
    </ArupakaHeaderView>
  );
};

Explanation of Major Props

Customizing the Default Header