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

SR-123456789 — Tue, 26 Nov 2024 14:11:01 +0000

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

Property	Type	Default	Description
headerTitle	string	""	Text displayed in the center of the header
showBackButton	boolean	false	Whether to display the back button
onClickBackButton	function	null	Function called when the back button is pressed
headerColor	string	white	Color of the header
headerHeight	number	60	Height of the header
content	React.ReactNode	null	React component displayed inside the header
contentColor	string	white	Background color of the scroll view
footInsetColor	string	white	Color of the footer inset area