@oguzturker8/header

A header library for react-native. Uses power of reanimated2.

Installation

npm install @oguzturker8/header

Usage

Basic Header Usage

Navigation.tsx

importHeaderfrom'@oguzturker8/header';// ...<NavigationContainer>
// ....
<Stack.Navigator>
// ...
<Stack.Screenname="Screen1"component={Screen1}options={{header: (props)=><Header{...props}title="title1337"/>,}}/>
// ...
</Stack.Navigator></NavigationContainer>;// ...

Header Scroll Animation

Navigation.tsx

importHeaderfrom'@oguzturker8/header';// ...<NavigationContainer>
// ....
<Stack.Navigator>
// ...
<Stack.Screenname="Screen4"component={Screen4}// Declare it in Screen Component// options={{// header: (props) => (// <Header {...props} title="Screen 04" type={{ right: 'close' }} />// ),// }}/>
// ...
</Stack.Navigator></NavigationContainer>;// ...

Screen4.tsx

import{AnimatedScrollView,Header,useHeaderAnimation,}from'@oguzturker8/header';functionScreen4({ navigation }: screenNavigation){const{ scrollOffset, scrollHandler }=useHeaderAnimation();React.useLayoutEffect(()=>{navigation.setOptions({header: (props)=>(<Header{...props}title="Screen 04"type={{right: 'close'}}animation={{animatedValue: scrollOffset,background: {colorRange: ['blue','red'],slidingRange: [0,100],},}}/>),});},[navigation]);return(<AnimatedScrollViewonScroll={scrollHandler}><Viewstyle={styles.container}><Text>Screen4</Text><Buttontitle="Reset stack"onPress={()=>navigation.popToTop()}/><Text>Screen4</Text>{Array.from({length: 100},(_,i)=>(<Textkey={i}>{`${i+1}. Text`}</Text>))}</View></AnimatedScrollView>);}

Properties

Header

Prop	Description	Type
style	Header container style prop. Includes 5 parts leftStyle rightStyle centerStyle wrapperStyle titleStyle	leftStyle?: ViewStyle rightStyle?: ViewStyle centerStyle?: ViewStyle wrapperStyle?: ViewStyle titleStyle?: TextStyle
title	Header title text	string
type	Decides left and right parts' types	LeftType = 'back' - 'close' RightType = 'back' - 'close'
callback	Parts' onPress callbacks	onLeft?: () => any onRight?: () => any onCenter?: () => any
size	Parts' text sizes	left?: number right?: number center?: number
animation	Header animations	Described below section

Animation

Animations	Description	Type
background	Header backgroundColor interpolation animation based on ScrollView's scrollOffset.	colorRange: string[] slidingRange: string[]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT