RN-navbar-showHide-on-scrollview-scroll-yOffset-value-reach.js

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


const NAVBAR_HEIGHT = 64;

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} ] }
            ]
          }>
          <Text style={{marginTop: 30, alignSelf: 'center', color: '#F1F1F1'}}>
            scrollTop: {scrollTop._value}
          </Text>
        </Animated.View>

        {/* content */}
        {/* <View
          style={{
          flex: 1,
          backgroundColor: 'red'
        }}> */}
        <ScrollView
          style={[
            {
              flex: 1,
              marginTop: -NAVBAR_HEIGHT,
              paddingTop: NAVBAR_HEIGHT
            }
          ]}
          onScroll={this.onScroll}
          scrollEventThrottle={100}
          showsVerticalScrollIndicator={false}>
          <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>
        </ScrollView>
      </View>
      // </View>
    );
  }

  onScroll = ({ nativeEvent }) => {
    const nextYOffset = nativeEvent.contentOffset.y;
    this.setState({yOffset: nextYOffset});
    this.showHideNavbarWithAnimation();
  }

  showHideNavbarWithAnimation = () => {
    const { yOffset } = this.state;
    const Y_OFFSET_LIMIT = NAVBAR_HEIGHT;

    let navBarTargetValue = 0;
    if (yOffset <= Y_OFFSET_LIMIT && yOffset > 0) {
      navBarTargetValue = 0;
    } else if (yOffset >= Y_OFFSET_LIMIT) {
      navBarTargetValue = -Y_OFFSET_LIMIT;
    }

    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);