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

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