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 Reac         


        

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.

Answer 2

I resolved for my case, hope this will be helpful

import React from 'react';
import {
  Animated,
  Text,
  View,
  StyleSheet,
  ScrollView,
  Dimensions,
  RefreshControl,
} from 'react-native';
import Constants from 'expo-constants';
import randomColor from 'randomcolor';

const HEADER_HEIGHT = 44 + Constants.statusBarHeight;
const BOX_SIZE = Dimensions.get('window').width / 2 - 12;

const wait = (timeout: number) => {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
};
function App() {
  const [refreshing, setRefreshing] = React.useState(false);

  const scrollAnim = new Animated.Value(0);
  const minScroll = 100;

  const clampedScrollY = scrollAnim.interpolate({
    inputRange: [minScroll, minScroll + 1],
    outputRange: [0, 1],
    extrapolateLeft: 'clamp',
  });

  const minusScrollY = Animated.multiply(clampedScrollY, -1);

  const translateY = Animated.diffClamp(minusScrollY, -HEADER_HEIGHT, 0);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => {
      setRefreshing(false);
    });
  }, []);

  return (
    <View style={styles.container}>
      <Animated.ScrollView
        contentContainerStyle={styles.gallery}
        scrollEventThrottle={1}
        bounces={true}
        showsVerticalScrollIndicator={false}
        style={{
          zIndex: 0,
          height: '100%',
          elevation: -1,
        }}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollAnim } } }],
          { useNativeDriver: true }
        )}
        overScrollMode="never"
        contentInset={{ top: HEADER_HEIGHT }}
        contentOffset={{ y: -HEADER_HEIGHT }}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }>
        {Array.from({ length: 20 }, (_, i) => i).map((uri) => (
          <View style={[styles.box, { backgroundColor: 'grey' }]} />
        ))}
      </Animated.ScrollView>
      <Animated.View style={[styles.header, { transform: [{ translateY }] }]}>
        <Text style={styles.title}>Header</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  gallery: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 4,
  },
  box: {
    height: BOX_SIZE,
    width: BOX_SIZE,
    margin: 4,
  },
  header: {
    flex: 1,
    height: HEADER_HEIGHT,
    paddingTop: Constants.statusBarHeight,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: randomColor(),
  },
  title: {
    fontSize: 16,
  },
});

export default App;

checkout on Expo https://snack.expo.io/@raksa/auto-hiding-header