Animated header like Whatsapp's home screen

I'm trying to make a screen with a header, scrollable tab view with top-tab-bar and 3 tabs within.The way it works is once user scrolls any of the lists inside the tabs it triggers an animated value inside parent components state and the header component will translateY based on that.I used @react-navigation/material-top-tabs to build my tab navigator.

The problem is that the tabbar can't be translated like the header and it stays in middle of screen.My idea is to put tabbar inside the header component and link it to the navigator somehow.I want to know how to do this?

These are the necessary parts of my code:

import React from 'react';import {SafeAreaView, StatusBar, Text, Animated} from 'react-native';import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';const Tab = createMaterialTopTabNavigator();const MyContext = React.createContext();const HEADER_MAX_HEIGHT = 250;const HEADER_MIN_HEIGHT = 60;const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;export default class App extends React.Component {  constructor(props) {    super(props);    this.state = {      scrollY: new Animated.Value(0),    };  }  renderHeader = () => {    const translate = this.state.scrollY.interpolate({      inputRange: [0, HEADER_SCROLL_DISTANCE],      outputRange: [0, -HEADER_MIN_HEIGHT],      extrapolate: 'clamp',    });    return (<Animated.View        style={{          position: 'absolute',          top: 0,          left: 0,          right: 0,          justifyContent: 'space-between',          backgroundColor: '#03A9F4',          overflow: 'hidden',          transform: [{translateY: translate}],          height: HEADER_MAX_HEIGHT,        }}><Animated.Image          style={[            {              backgroundColor: 'white',              width: 150,              height: 150,              resizeMode: 'contain',            },          ]}          source={require('./images/logo.png')}        /><Animated.View          style={{            height: 32,            alignItems: 'center',            justifyContent: 'center',          }}><Text            style={{              backgroundColor: 'transparent',              color: 'white',              fontSize: 18,            }}>            Title</Text></Animated.View></Animated.View>    );  };  render() {    return (<SafeAreaView style={{flex: 1}}><StatusBar barStyle={'dark-content'} backgroundColor="transparent" /><MyContext.Provider value={this}><Tab.Navigator><Tab.Screen name="description" component={DescBox} /><Tab.Screen name="attachments" component={AttachmentList} /><Tab.Screen name="history" component={HistoryList} /></Tab.Navigator>          {this.renderHeader()}</MyContext.Provider></SafeAreaView>    );  }}

Inside the tabs scrollY changes like:

<FlatList   ...   onScroll={Animated.event([          {nativeEvent: {contentOffset: {y: this.context.state.scrollY}}},        ])}   .../>