react-nativereact-native-tabnavigator

Where do I place "tabBarOptions" inside StackNavigator?


I am using create-react-native-app and am using a StackNavigator with a createBottomTabNavigator function. The icons are being styled through a seperate component but I am having trouble styling the rest of the navigator.

I have created these options I want to use:

  tabBarOptions: {
    showLabel: false,
    style: {
      backgroundColor: Colors.greyGreen
    }
  }

Hopefully this is very obvious to someone and would appreciate the help! I have tried placing the options in various places within the code below (Both places do not work):

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
  // TRIED PLACING THE OPTIONS HERE
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
  },
  config
);
HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};
HomeStack.path = '';

const LinksStack = createStackNavigator(
  {
    Links: LinksScreen,
  },
  config
);
LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
  ),
};
LinksStack.path = '';

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },
  config
);
SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
  ),
};
SettingsStack.path = '';

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
  // TRIED PLACING THE OPTIONS HERE
});
tabNavigator.path = '';

export default tabNavigator;

In case you want to see the icon component:

export default function TabBarIcon(props) {
  return (
    <Ionicons
      name={props.name}
      size={26}
      style={{ marginBottom: -3 }}
      color={props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
    />
  );
}

Solution

  • You should place it here ,

    const tabNavigator = createBottomTabNavigator({
      HomeStack,
      LinksStack,
      SettingsStack,
    },{
    
    tabBarOptions: {
        showLabel: false,
        style: {
          backgroundColor: Colors.greyGreen
        }
      }
    });
    

    Hope it helps. feel free for doubts