How to change height of Bottom Tab Navigator in React Native

Question

I am trying to change height of my bottom tab navigator bar in React Native. I've tried some answers from this Stack Overflow question but nothing seems to work. Please help.

My code:

export default function AppTabs({ logged }) {
  const Tabs = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Tabs.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              const current_color = focused ? COLORS.white : COLORS.lightGrey;

              if (route.name === "Home") {
                return <Foundation name="home" size={28} color={current_color}/>
              } else if (route.name === "Search") {
                return <Ionicons name="search" size={28} color={current_color} />
              } else if (route.name === "Library") {
                return <MaterialCommunityIcons name="bookshelf" size={28} color={current_color} />
              }
            },
            header: () => null,
            tabBarActiveBackgroundColor: COLORS.darkGgrey,
            tabBarInactiveBackgroundColor: COLORS.darkGgrey,
            tabBarActiveTintColor: COLORS.white,
            tabBarInactiveTintColor: COLORS.lightGrey
          })}
        >
          <Tabs.Screen name="Home" component={Home}/>
          <Tabs.Screen name="Search" component={Search}/>
          <Tabs.Screen name="Library" component={Library}/>
        </Tabs.Navigator>
        <PlayerBar track_name="Heart Attack" artist="Dave"/>
      </SafeAreaView>
    </NavigationContainer>
  );
}

Answer 1

Can try this

const Tab = createBottomTabNavigator();

export const TabNavigation = () => {
  return (
    <Tab.Navigator
      screenOptions={{
      tabBarStyle: {height: 60},
    }}>
    ...
    </Tab.Navigator>
  );
};