CODEWITHSUNDEEP
reactjsreact-nativereact-navigationexpo
merry-go-round
merry-go-round

Reputation: 4615

How to style TabNavigator's Tabs?

I have such an ugly looking default Tabs for TabNavigator. How can I add styles on it like Instagram?

enter image description here

I want to set the Tabs Navigator's background as white (not grey) and set the border's top with line. Plus, I want to set the active icon color as black. (JUST LIKE THE INSTAGRAM..!)

I'm not sure where I can put these styles on my TabNavigator.

export default TabNavigator(
  {
    Feed: {
      screen: FeedStackNavigator,
    },
    ...
  },
  {
    navigationOptions: ({ navigation }) => ({
       header: null,
       tabBarIcon: ({ focused }) => {
           const { routeName } = navigation.state;
           let iconName;
           switch (routeName) {
               case 'Feed':
                   iconName = Platform.OS === 'ios'
                   ? `ios-information-circle${focused ? '' : '-outline'}`
              : 'md-list-box';
            break;
  }

Thanks! :)

Upvotes: 0

Views: 255

Answers (1)

bennygenel
bennygenel

Reputation: 24660

react-navigation has lots of different properties for styling TabNavigator. You can use them to style your icons and TabBar itself.

Example

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

Upvotes: 1

Related Questions