React-navigation: Increase height of the bottom tab navigation?

tabBarOptions: { style: { height: '50%', } }

try that may be working.


With react navigation 6 you can just use:

    tabBarStyle : {
         height: 150,
         ...
    }

As said in the docs, you just need to add screenOptions={tabBarStyle:{height:100}}

For example:

bottomNavigatorConfigs = {
    initialRouteName: "HomeScreen",
    screenOptions: {
        tabBarStyle: { height: 300 },
    },
};

This is an example of the bottomNavigatorConfigs (tested) and working.

Where bottomNavigatorConfigs is used like this:

createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs);

Source: https://reactnavigation.org/docs/bottom-tab-navigator/#options


Be careful with an iPhone's home indicator as you need to take account of the extra space at the bottom of the iPhone when setting absolute height.

import { useSafeAreaInsets } from 'react-native-safe-area-context';
...

export const Navigation = () => {
  const insets = useSafeAreaInsets();
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          style: {
            height: 60 + insets.bottom,
            ...
          },
          tabStyle: {
            height: 60,
            ...
          },
          ...
        }}>
        ...