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-ios

Installation

Using npm:

$ npm install --save react-native-swipe-hidden-header

Using yarn:

$ yarn add react-native-swipe-hidden-header

USAGE

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