react-native-swipe-hidden-header

0.1.1 • Public • Published

React Native Swipe Hidden Header

npm version

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

Package Sidebar

Install

npm i react-native-swipe-hidden-header

Weekly Downloads

23

Version

0.1.1

License

MIT

Last publish

Collaborators

  • moejser