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