Hide TabNavigators and Header on Scroll

Question

I want to hide the Header and the TabNavigator tabs onScroll. How do I do that? I want to hide them onScroll and show them on ScrollUp. My code:

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

class ScrollTest extends Component {

    render(){
    const { params } = this.props.navigation.state;

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

               <ScrollView>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
               </ScrollView>

            </View>
        )
    }
}
const styles = StyleSheet.create({
  container:{
    flex:1, padding:5 
  },
  newView:{
     height: 200, backgroundColor:'green', margin:10
  }
})
export default ScrollTest;

I checked this link for Animated API but not able to figureout how to implement it in onScoll?

So the header HomeScreen and the tabs Tab1 and Tab2 should hide on scroll and show when scrolled up. How do I do that?

Please help getting started on this.

Many thanks.

Answer 1

I was also stuck with the same animation thing, I tried this code for maximizing and minimizing the header using the Animated API of react-native. You can also do the same for showing and hiding it.

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

const HEADER_MAX_HEIGHT = 200;// set the initial height
const HEADER_MIN_HEIGHT = 60;// set the height on scroll
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

export default class App extends Component {
  constructor(props) {
  super(props);

  this.state = {
    scrollY: new Animated.Value(0),
  };
}
  render() {
  const headerHeight = this.state.scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
    extrapolate: 'clamp',
  });
    return(
    <View style={{flex: 1}}>
    <ScrollView
    scrollEventThrottle={1}
    onScroll={Animated.event(
       [{nativeEvent: 
       {contentOffset: {y: this.state.scrollY}}}]
      )}>
      <View style={styles.container}>
        <Text style={styles.paragraph}>hello</Text>
        <Image source={{uri: "https://static.pexels.com/photos/67843/splashing-splash-aqua-water-67843.jpeg"}} style={styles.imageStyle}/>
        <Image source={{uri: "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg" }} 
        style={styles.imageStyle}/>
      </View>
    </ScrollView>
    <Animated.View style={[styles.footer, {height: headerHeight}]}>
      <View style={styles.bar}>
        <Text>text here</Text>
      </View>
    </Animated.View>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 24,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
  imageStyle: {
    height: 360,
    width: '100%',
  },
  footer: {
    position:'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
  },
  bar: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Hope this helps someone.