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 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 (
    
      
        }>
        {Array.from({ length: 20 }, (_, i) => i).map((uri) => (
          
        ))}
      
      
        Header
      
    
  );
}

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