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

I went onto the docs and tried editing a few expo 'snacks' (I'm not using expo though) .. still no joy! — Rachel Gallen, Jul 25 '19 at 12:09

score 59 · Accepted Answer · edited Dec 17 '21 at 13:56

59

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

edited Dec 17 '21 at 13:56

F1nn-T

67
8

answered Jul 25 '19 at 12:18

Auticcat

4,359
2
13
28

1

In react-navigation v5+ the `screenOptions.tabBarStyle` does not work but only `tabBarOptions.style` does. – Arvind K. Mar 05 '22 at 05:02
@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 – Auticcat Apr 05 '22 at 07:29
Despite @ArvindK. 's comment, `tabBarOptions` appears to have been removed entirely in 6.x , whereas `screenOptions.tabBarStyle` does work. – defraggled Jun 19 '22 at 05:46

score 23 · Answer 2 · edited Apr 04 '21 at 07:16

23

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,
            ...
          },
          ...
        }}>
        ...

edited Apr 04 '21 at 07:16

EricSchaefer

25,272
21
67
103

answered Apr 04 '21 at 05:02

Shunya Watanabe

340
3
9

2

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+ – Arvind K. Mar 05 '22 at 05:03

score 2 · Answer 3 · answered Jul 25 '19 at 12:20

2

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

try that may be working.

answered Jul 25 '19 at 12:20

Ajith

66
1
6

height values our choice – Ajith Jul 25 '19 at 12:21

score 2 · Answer 4 · answered Oct 26 '21 at 18:08

2

With react navigation 6 you can just use:

    tabBarStyle : {
         height: 150,
         ...
    }

answered Oct 26 '21 at 18:08

Lonare

3,581
1
41
45

score 1 · Answer 5 · edited May 20 '22 at 07:44

1

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

edited May 20 '22 at 07:44

Nivethan

2,339
19
22

answered Feb 05 '22 at 09:36

Ali Raza Khan

181
1
4

score 1 · Answer 6 · answered Mar 04 '23 at 16:43

1

     <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
                         }
      >

answered Mar 04 '23 at 16:43

Chaitanya

11
2

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](/help/how-to-answer). – Community Mar 10 '23 at 13:25

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

6 Answers6

Linked