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" ponent={Home}/>
          <Tabs.Screen name="Search" ponent={Search}/>
          <Tabs.Screen name="Library" ponent={Library}/>
        </Tabs.Navigator>
        <PlayerBar track_name="Heart Attack" artist="Dave"/>
      </SafeAreaView>
    </NavigationContainer>
  );
}

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" ponent={Home}/>
          <Tabs.Screen name="Search" ponent={Search}/>
          <Tabs.Screen name="Library" ponent={Library}/>
        </Tabs.Navigator>
        <PlayerBar track_name="Heart Attack" artist="Dave"/>
      </SafeAreaView>
    </NavigationContainer>
  );
}

• javascript
• reactjs
• react-native
• react-navigation
• react-navigation-bottom-tab

Share Improve this question Follow asked Aug 31, 2021 at 12:06 themm1themm1 15722 silver badges1212 bronze badges 2

• See this discussion on stack to achive your goal BottomTabNavigator Height – 64Bit1990 Commented Aug 31, 2021 at 12:11
• @64Bit1990 OP has always said this link didn't work for him in starting of question – Jitendra Singh Commented Aug 31, 2021 at 12:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Can try this

const Tab = createBottomTabNavigator();

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