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

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

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

Answer 2

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

Answer 3

tabBarOptions: {
style: {
height: '50%',
}
}
try that may be working.

Answer 4

With react navigation 6 you can just use:
tabBarStyle : {
height: 150,
...
}

Answer 5

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