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>) => {
  return (
    <View
      style={{
        flexDirection: 'row',
        borderBottomWidth: 0.5,
        borderStyle: 'solid',
        borderBottomColor: 'rgba(255, 255, 255, 0.24)',
      }}>
      {props.navigationState.routes.map((route, i) => (
        <TabBarItem key={i} onPress={props.onIndexChange} index={i}>
          {route.title}
        </TabBarItem>
      ))}
    </View>
  );
};