import React from 'react';import { Text, TouchableOpacity, View } from 'react-native';import { BottomTabNavigationProp, createBottomTabNavigator,} from '@react-navigation/bottom-tabs';import { TabNavigationState } from '@react-navigation/native';export type RootParamList = { Feed: undefined; Search: undefined;};export enum Screens { FEED = 'Feed', SEARCH = 'Search',}const Tabs = createBottomTabNavigator<RootParamList>();export interface TabbarProps { navigation: BottomTabNavigationProp<RootParamList, Screens>; state: TabNavigationState<RootParamList>;}const TabBar = (props: TabbarProps) => { const handleTabPress = ({ name, isCurrentTab, }: { name: keyof RootParamList; isCurrentTab: boolean; }) => { if (!isCurrentTab) { props.navigation.navigate(name); } }; return (<View> {props.state.routes.map((route, index) => { const buttonText = route.name; const isCurrentTab = props.state.index === index; return (<TouchableOpacity key={index} onPress={() => handleTabPress({ name: route.name, isCurrentTab })}><Text>{buttonText}</Text></TouchableOpacity> ); })}</View> );};const Nav = () => (<Tabs.Navigator tabBar={({ navigation, state }) => (<TabBar navigation={navigation} state={state} /> )}><Tabs.Screen name={Screens.FEED} component={View} /><Tabs.Screen name={Screens.SEARCH} component={View} /></Tabs.Navigator>);export default Nav;The is an issue with <Tab.Navigator /> and the tabbar prop. I can't seem to type it correctly for my specific navigation and state props.
