A high-performance, cross-platform, dynamic, extensible, animated header component for React Native applications.
Required react-native-reanimated and react-native-safe-area-context.
How to use it:
1. Install & import.
# Yarn $ yarn add @codeherence/react-native-header # NPM $ npm i @codeherence/react-native-header
import { Header, LargeHeader, ScalingView, ScrollViewWithHeaders, } from '@codeherence/react-native-header'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
2. Create the header component.
// small header const HeaderComponent = ({ showNavBar }) => ( <Header showNavBar={showNavBar} headerCenter={<Text style={{ fontSize: 16, fontWeight: 'bold' }}>react-native-header</Text>} /> ); // large header const LargeHeaderComponent = ({ scrollY }) => ( <LargeHeader> <ScalingView scrollY={scrollY}> <Text style={{ fontSize: 14 }}>Welcome!</Text> <Text style={{ fontSize: 32, fontWeight: 'bold' }}>react-native-header</Text> <Text style={{ fontSize: 12, fontWeight: 'normal', color: '#8E8E93' }}> This project displays some header examples using the package. </Text> </ScalingView> </LargeHeader> );
3. use them in a ScrollViewWithHeaders
component.
const Example = () => { const { bottom } = useSafeAreaInsets(); return ( <ScrollViewWithHeaders HeaderComponent={HeaderComponent} LargeHeaderComponent={LargeHeaderComponent} contentContainerStyle={{ paddingBottom: bottom }} > <View style={{ padding: 16 }}> <Text>Some body text...</Text> <Text>Some body text...</Text> </View> </ScrollViewWithHeaders> ); };
Preview:
Download Details:
Author: codeherence
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/codeherence/react-native-header
License: MIT