React Native Swipe Hidden Header
A react native component that can hide navigator bar when user swipe list.
Example
The demo app from the GIF can be found at ./example.
To build and run the example app:
git clone https://github.com/fengliu222/react-native-swipe-hidden-header.git cd react-native-swipe-hidden-header/examples npm install react-native run-iosInstallation
Using npm:
$ npm install --save react-native-swipe-hidden-headerUsing yarn:
$ yarn add react-native-swipe-hidden-headerUSAGE
Use internal scrollView:
render() { return ( <SwipeHiddenHeader header={()=> <View style={styles.header}><Text style={styles.headerText}>Header</Text></View>} > <View style={styles.block}> <Text>This is content</Text> </View> </SwipeHiddenHeader> ); }Use custom scrollView:
render() { return ( <SwipeHiddenHeader header={()=> <View style={styles.header}><Text style={styles.headerText}>Custom</Text></View>} renderScrollComponent={()=> <FlatList data={[{key: 'a'},{key: '2'},{key: '2a'},{key: '3a'},{key: 'a4'},{key: 'a1'}, {key: 'b'}, {key: 'b2'}, {key: 'b3'}, {key: 'b1'}]} renderItem={(item)=> <TouchableOpacity onPress={()=> props.changeType('normal')} style={styles.block}><Text>Tap here to Custom list view</Text></TouchableOpacity>} />} /> ); }Props
| Prop | Type | Description |
|---|---|---|
children | ReactElement<any> | React Element(s) to render. |
header | () => ReactElement<any> | Callback that renders a header component |
renderScrollComponent | ?() => ReactElement<any> | Callback that renders a ScrollComponent. |
startHiddenHeaderOffset | ?number | When offsetY reach this value, header will start hide. |
headerWrapStyle | ?Object | The styles of the header wrap element. |
Platform Support
iOS / Android
