/**
 * Learn more about createBottomTabNavigator:
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */ import { Feather } 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 Prices from '../screens/Prices' ; import Home from '../screens/Home' ; const BottomTab = createBottomTabNavigator < BottomTabParamList > ( ) ; export default function BottomTabNavigator ( ) { const colorScheme = useColorScheme ( ) ; return ( < BottomTab . Navigator initialRouteName = "Home" tabBarOptions = { { activeTintColor : Colors [ colorScheme ] . tint } } > < BottomTab . Screen name = "Prices" component = { PricesStackNavigator } options = { { tabBarIcon : ( { color } ) => ( < TabBarIcon name = "bar-chart" color = { color } / > ) , } } /> < BottomTab . Screen name = "Home" component = { HomeStackNavigator } options = { { tabBarIcon : ( { color } ) => < TabBarIcon name = "home" color = { color } / > , } } /> < /BottomTab.Navigator>); } function TabBarIcon ( props ) { return < Feather size = { 25 } style = { { marginBottom : - 3 } } { ... props } />; } const PricesStack = createStackNavigator < PriceStackParamList > ( ) ; function PricesStackNavigator ( ) { return ( < PricesStack . Navigator > < PricesStack . Screen name = "PriceScreen" component = { Prices } options = { { headerTitle : 'Prices' } } /> < /PricesStack.Navigator>); } const HomeStack = createStackNavigator < HomeStackParamList > ( ) ; function HomeStackNavigator ( ) { return ( < HomeStack . Navigator screenOptions = { { cardStyle : { backgroundColor : '#fff' } } } > < HomeStack . Screen name = "HomeScreen" component = { Home } options = { { headerTitle : '' } } /> < /HomeStack.Navigator>); }