Final Version
The header hides when scrolling up and appears when scrolling down.
The visibility of the header changes according to the scroll amount.
Installation
Using Yarn:
CODE
yarn add react-native-header-arupaka-r
or using npm:
CODE
npm install react-native-header-arupaka-r
Usage
Source for the introductory video:
Wrap the entire screen with ArupakaHeaderView to use it.
CODE
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 |
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR