RB-navbar-sho-hide-navbar-on-scollview-scroll-direction-change.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Animated
} from 'react-native';

// navbar height:
const NAVBAR_HEIGHT = 64;
// statusBar height:
const STATUS_BAR_HEIGHT = 20;
// when hiding navbar, translateY this value:
const HIDE_NAVBAR_TRANSLATE_VALUE = 0 - NAVBAR_HEIGHT + STATUS_BAR_HEIGHT;

export default class Test extends Component {
  state = {
    // scrollView y offset to watch on scrollView scroll:
    yOffset: 0,
    // navigationBar
    scrollTop: new Animated.Value(0)
  };

  render() {
    const {scrollTop} = this.state;

    return (
      <View style={styles.container}>

        {/* navbar */}
        <Animated.View
          style={
            [
            styles.navbarContainer,
            { transform: [ {translateY: scrollTop} ] }
            ]
          }>
          {/* need to hide navbar content since translationY is not enough */}
          <Animated.View
            style={{
              flex: 1,
              opacity: scrollTop.interpolate({
                inputRange: [HIDE_NAVBAR_TRANSLATE_VALUE, 0],
                outputRange: [0, 1],
                extrapolate: 'clamp'
              })
            }}>
            <Text
              style={{
                marginTop: 30,
                alignSelf: 'center',
                color: '#F1F1F1'
              }}>
              NAVBAR HERE
            </Text>
          </Animated.View>
        </Animated.View>

        {/* content */}
        <ScrollView
          style={[
            {
              flex: 1,
              marginTop: -NAVBAR_HEIGHT,  // important
              paddingTop: NAVBAR_HEIGHT   // important
            }
          ]}
          bounces={false} // ios only: remove bounce to prevent on bottom scroll show/hide navbar glitch
          onScroll={this.onScroll}
          scrollEventThrottle={100}
          showsVerticalScrollIndicator={true}>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </ScrollView>
      </View>
    );
  }

  onScroll = ({ nativeEvent }) => {
    const nextYOffset = nativeEvent.contentOffset.y;
    const showNavBar =  nextYOffset > 0 &&
                        this.state.yOffset > 0 &&
                        nextYOffset > this.state.yOffset ? false : true;

    this.setState({yOffset: nextYOffset});
    this.showHideNavbarWithAnimation(showNavBar);
  }

  showHideNavbarWithAnimation = (showNavBar = true) => {
    let navBarTargetValue = 0;
    if (showNavBar) {
      navBarTargetValue = 0;
    } else {
      navBarTargetValue =  HIDE_NAVBAR_TRANSLATE_VALUE;
    }
    Animated.spring(
      this.state.scrollTop,
      {
        toValue: navBarTargetValue,
        friction: 10
      }
    ).start();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  navbarContainer: {
    height: NAVBAR_HEIGHT,
    backgroundColor: '#4A4A4A',
    zIndex: 10 // important when show/hide navbar
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    marginTop: 40,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Test', () => Test);