3

I'm using react-native TabNavigator to navigate between tabs in my application.

    const TabNav = TabNavigator({
    Home: {
        screen: HomeScene,
        navigationOptions:{
            tabBar: {
                label: 'Home',
                icon: ({ focused }) => {
                  let imgSource = focused
                  ? require('../common/img/selected-home-75.png')
                  : require('../common/img/unselected-home-75.png');
                  return <Image
                    source={imgSource}
                    style={tabBarStyles.icon}
                  />
                }
            }
        }
    },
    ...
}, {
    swipeEnabled: false,
    tabBarOptions: {
        showIcon: true,
        upperCaseLabel: false,
        labelStyle: tabBarStyles.labelStyle,
        style: tabBarStyles.style
    }
});

Each tab contains an icon and a label. I would like to style the TabBar slightly differently depending on whether the application is running on iOS or Android.

The documentation for "tabNavigationConfig describes two sections of "tabBarOptions" for "TabBarBottom" and "TabBarTop" which makes me think it IS possible to provide a configuration for the top TabBar and another for the bottom TabBar.

Is it possible to provide "tabBarOptions" for iOS and different options for Android (ie top and bottom)?

Nick
  • 19,198
  • 51
  • 185
  • 312

1 Answers1

4

It's possible to apply options based on the platform with usage of:

import {Platform} from 'react-native';

So you can assign a separate options for each platform based on the Platform.OS value : 

const iosTabBarOptions = {
    showIcon: false,
    upperCaseLabel: false,
    labelStyle: tabBarStyles.labelStyle,
    style: tabBarStyles.style
};

const androidTabBarOptions = {
    showIcon: true,
    upperCaseLabel: true,
    labelStyle: tabBarStyles.labelStyle,
    style: tabBarStyles.style
};

tabBarOptions: Platform.OS === 'ios'
    ? iosTabBarOptions
    : androidTabBarOptions
Artur Klajnerok
  • 41
  • 5