TopTabBarDates.tsx

import React from 'react';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { Dimensions } from 'react-native';
import {
  SafeAreaView,
  NavigationNavigator,
  AnimatedValue,
} from 'react-navigation';
import Animated, { diffClamp } from 'react-native-reanimated';
import { getActiveRouteState } from 'utils';
import Colours from 'constants/Colours';
import { MyDates } from 'screens/Dates';

const { width } = Dimensions.get('screen');

const { interpolate, Extrapolate } = Animated;

const TopTabBar = createMaterialTopTabNavigator(
  {
    MyDateProfile: {
      screen: (props: any) => <MyDates {...props} label="Active" />,
      navigationOptions: { tabBarLabel: 'Active' },
    },
    Previous: {
      screen: (props: any) => <MyDates {...props} label="Previous" />,
    },
  },
  {
    tabBarPosition: 'top',
    tabBarOptions: {
      tabStyle: { alignContent: 'center', width: width / 2 },
      scrollEnabled: true,
      activeTintColor: Colours.default,
      inactiveTintColor: '#626262',
      labelStyle: {
        fontWeight: 'bold',
      },
      indicatorStyle: {
        backgroundColor: Colours.default,
        width: '35%',
        alignSelf: 'center',
        marginLeft: '5%',
      },
      style: {
        backgroundColor: 'white',
      },
    },
  }
);

const TopTabBarDates: NavigationNavigator<any, any> = props => {
  const activeRoute = getActiveRouteState<{
    params: { scrollY: AnimatedValue };
    routeName: string;
    key: string;
  }>(props.navigation?.state);

  if (!activeRoute.params)
    return (
      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        <TopTabBar navigation={props.navigation} />
      </SafeAreaView>
    );

  const diffY = diffClamp(activeRoute.params.scrollY, 0, 100);

  const height = interpolate(diffY, {
    inputRange: [0, 100],
    outputRange: [100, 0],
    extrapolate: Extrapolate.CLAMP,
  });

  return (
    <>
      <Animated.Code key={activeRoute.routeName}>
        {() =>
          Animated.block([diffY, Animated.set(activeRoute.params!.scrollY, 0)])
        }
      </Animated.Code>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        <Animated.View
          style={{
            marginTop: -100,
            height,
          }}
        />

        <TopTabBar navigation={props.navigation} />
      </SafeAreaView>
    </>
  );
};

TopTabBarDates.router = TopTabBar.router;

export default TopTabBarDates;