import { AntDesign } from '@expo/vector-icons' ; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ; import { createStackNavigator } from '@react-navigation/stack' ; import * as React from 'react' ; import Colors from '../constants/Colors' ; import useColorScheme from '../hooks/useColorScheme' ; import AddProductScreen from '../screens/AddProductScreen' ; import TabOneScreen from '../screens/TabOneScreen' ; import TabTwoScreen from '../screens/TabTwoScreen' ; import { BottomTabParamList , TabOneParamList , TabTwoParamList } from '../types' ; const BottomTab = createBottomTabNavigator < BottomTabParamList > ( ) ; export default function BottomTabNavigator ( ) { const colorScheme = useColorScheme ( ) ; return ( < BottomTab . Navigator initialRouteName = "TabOne" tabBarOptions = { { activeTintColor : Colors [ colorScheme ] . tint } } > < BottomTab . Screen name = "Products" component = { TabOneNavigator } options = { { tabBarIcon : ( { color } ) => < TabBarIcon name = "home" color = { color } / > } } /> < BottomTab . Screen name = "AddProduct" component = { AddProductScreen } options = { { tabBarIcon : ( { color } ) => ( < TabBarIcon name = "plussquareo" color = { color } / > ) } } /> < BottomTab . Screen name = "Profile" component = { TabTwoNavigator } options = { { tabBarIcon : ( { color } ) => ( < TabBarIcon name = "profile" color = { color } / > ) } } /> < /BottomTab.Navigator>); } function TabBarIcon ( props ) { return < AntDesign size = { 30 } style = { { marginBottom : - 3 } } { ... props } />; } const TabOneStack = createStackNavigator < TabOneParamList > ( ) ; function TabOneNavigator ( ) { return ( < TabOneStack . Navigator > < TabOneStack . Screen name = "TabOneScreen" component = { TabOneScreen } options = { { headerTitle : 'Products' } } /> < /TabOneStack.Navigator>); } const TabTwoStack = createStackNavigator < TabTwoParamList > ( ) ; function TabTwoNavigator ( ) { return ( < TabTwoStack . Navigator > < TabTwoStack . Screen name = "TabTwoScreen" component = { TabTwoScreen } options = { { headerTitle : 'Tab Two Title' } } /> < /TabTwoStack.Navigator>); }