React-native-web-headroom NPM

React Native Web Headroom

Handling component that hide when scroll down, and showup when scroll up.

Headroom demo

Instalation

npm install react-native-web-headroom --save

Run Example

cd examples/headroom
npm install
npm run ios

Example

import React from 'react';
import { ScrollView, View } from 'react-native';

import {Head, ScrollableComponent, HeadroomProvider} from 'react-native-web-headroom';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <HeadroomProvider>
          <ScrollableComponent
            component={ScrollView}
            scrollEventThrottle={16}
          >
            {...}
          </ScrollableComponent>
          <HeadContainer>
            <Header backgroundColor="red" zIndex={10}/>
            <HeadComponent>
              <Header backgroundColor="green"/>
            </HeadComponent>
            <Header backgroundColor="yellow" />
          </HeadContainer>
        </HeadroomProvider>
      </View>
    );
  }
}