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

Question

I created a simple tab navigation for a React Native app using react-navigation. It works fine, but I can't seem to adjust the height of it. It'll only go to a max of about 80, I need it to be about 150% of the current height, maybe double.

Does anyone know how to increase the height of the tab nav (preferably without creating about 6 more js files? ) I only have a limited period to fix it as I'd like.

Below is the nav code as-is

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './screens/HomeScreen';
import AboutScreen from './screens/AboutScreen';
import SettingsScreen from './screens/SettingsScreen';


export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  initialRouteName: "Home"
});

const AppContainer = createAppContainer(AppNavigator);

Thanks

Krasnoff

I went onto the docs and tried editing a few expo 'snacks' (I'm not using expo though) .. still no joy! – Krasnoff

Answer 1

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

Damick

In react-navigation v5+ the screenOptions.tabBarStyle does not work but only tabBarOptions.style does. – Ofris

@ArvindK. I haven't used react-native for a while and don't have an environment to test the new react-navigation features so i can't give an answer for other react-native versions – Damick

Despite @ArvindK. 's comment, tabBarOptions appears to have been removed entirely in 6.x , whereas screenOptions.tabBarStyle does work. – Dorsoventral

Answer 2

Be careful with the 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,
            ...
          },
          ...
        }}>
        ...

Ise

In react-navigation v5+ the screenOptions.tabBarStyle does not work but only tabBarOptions.style does. This answer can be updated for the actual answer for v5+ – Ofris

Answer 3

With react navigation 6 you can just use:

    tabBarStyle : {
         height: 150,
         ...
    }

Vivienne

Answer 4

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

try that may be working.

Desmonddesmoulins

height values our choice – Desmonddesmoulins

Answer 5

screenOptions={
  {
    headerShown:false,
    tabBarActiveTintColor:Colors.primary,
    tabBarInactiveTintColor:Colors.primary2,
    tabBarStyle:  { height: 60 }
  } 
}

Pungy

Answer 6

     <Tab.Navigator
       tabBarStyle: {
                      height: 20, 
                     //this increases the height of the 
                       tabNavigation 
                     }
      tabBarLabelStyle: {
                     height:40,
                    //increases height of the label or name 
                      that is below the icon
                         }
      >

Fluted

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Erudite