TabBar.tsx

import React from 'react';
import {TabViewProps, Route} from 'react-native-tab-view';
import {View} from 'react-native';
import {TabBarItem} from './TabBarItem';

type Props<T extends Route> = Parameters<
  NonNullable<TabViewProps<T>['renderTabBar']>
>[0] & {
  onIndexChange: (index: number) => void;
};

export const TabBar = <T extends Route>(props: Props<T>) => {
  const inputRange = props.navigationState.routes.map((_, i) => i);

  return (
    <View
      style={{
        flexDirection: 'row',
        borderBottomWidth: 0.5,
        borderStyle: 'solid',
        borderBottomColor: 'rgba(255, 255, 255, 0.24)',
      }}>
      {props.navigationState.routes.map((route, i) => {
        const opacity = props.position.interpolate({
          inputRange,
          outputRange: inputRange.map(inputRangeIndex =>
            inputRangeIndex === i ? 1 : 0.5,
          ),
        });

        return (
          <TabBarItem
            key={i}
            onPress={props.onIndexChange}
            index={i}
            opacity={opacity}> // Pass opacity animation
            {route.title}
          </TabBarItem>
        );
      })}
    </View>
  );
};