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