RN-navbar-hide-interpolate-onscroll-down-yOffset-interpolation.js

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

export default class Test extends Component {
  state = {
    scrollTop: new Animated.Value(0),
    yOffset: 0,

    changedScrollDirection: false,
    scrollingDown: true,

    contentInitialHeight: 0
  };

  render() {
    const {yOffset, scrollingDown, scrollTop, contentInitialHeight} = this.state;

    return (
      <View style={styles.container}>
        {/* navbar */}
        <Animated.View
          style={
            [
            styles.navbarContainer,
            {
              transform: [{
                translateY: scrollTop.interpolate({
                  inputRange: [0, 10, 100],
                  outputRange: [0, -55, -64],
                  extrapolate: 'clamp'
                })
              }]
            }
            ]
          }>
          <Text style={{marginTop: 30, alignSelf: 'center', color: '#F1F1F1'}}>
            Navbar - yOffset: {yOffset} - scrollingDown {scrollingDown ? 'yes' : 'no'}
          </Text>
        </Animated.View>
        {/* content */}
        <Animated.View
          onLayout={this.onContentLayout}
          style={
            [
            {flex: 1},
            {
              height: scrollTop.interpolate({
                inputRange: [0, 10, 64],
                outputRange: [contentInitialHeight,  contentInitialHeight + 40, contentInitialHeight + 64],
                extrapolate: 'clamp'
              })
            },
            {
              transform: [
              {
                translateY: scrollTop.interpolate({
                  inputRange: [0, 10, 64],
                  outputRange: [0, -40, -64],
                  extrapolate: 'clamp'
                })
              }
              ]
            }
            ]
          }>
          <ScrollView
            style={styles.contentContainer}
            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>
        </Animated.View>
      </View>
    );
  }

  onScroll = ({ nativeEvent }) => {
    const { yOffset } = this.state;

    const nextYOffset = nativeEvent.contentOffset.y;
    const isScrollingDown = yOffset < nextYOffset ? true : false;

    this.setState({
      yOffset: nextYOffset,
      scrollingDown: isScrollingDown
    });

    this.state.scrollTop.setValue(nextYOffset);
  }

  onContentLayout = ({nativeEvent: { layout: {x, y, width, height}}}) => {
    // just get initial layout (on componentMount), 0 is dummy height before component is mounted
    if (this.state.contentInitialHeight === 0) {
      this.setState({contentInitialHeight: height});
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  navbarContainer: {
    height: 64,
    backgroundColor: '#4A4A4A'
  },
  contentContainer: {
    flex: 1
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    marginTop: 40,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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