Set backgroundColor and Badge for Tabnavigator in React-Navigation

Question

In React-Native with React-Navigation I have a Tabnavigator like so:

const testScreenNavigator = TabNavigator({
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
    Tab3: { screen: Tab3Screen },
});
testScreenNavigator.navigationOptions = {
    title: 'MY TITLE',
    header: {
        titleStyle:{
        },
        style:{
// how to set the options?
        },
    }  
}

Now I want to do 2 things:

Set the backgroundColor: 'red' of the Tabs in Android (not iOS bottom tabs)
Have a badge next to Tab1: e.g.

Tab1 (2) | Tab2 | Tab3

Regards

Thx @Kishan: I will open a new question for the badge. – user3819370 Mar 02 '17 at 11:50 — user3819370, Mar 02 '17 at 11:50

score 22 · Accepted Answer · answered Mar 02 '17 at 05:46

Set the backgroundColor for Header and Tab

To set background color for Header use navigationOptions and to set background color for Tab use tabBarOptions. See below code

const testScreenNavigator = TabNavigator ({
  Tab1: { screen: RecentChatsScreen },
  Tab2: { screen: AllContactsScreen },
  Tab3: { screen: AllContactsScreen}
}, {
  tabBarOptions : {
    style: {
      backgroundColor: '#42a5f5',
    }
  }
});

testScreenNavigator.navigationOptions = {
  title: 'MY TITLE',
  header: {
    style: {
      backgroundColor: '#42a5f5',
    }
  },
};

below is output

Set backgroundColor and Badge for Tabnavigator in React-Navigation

Tab1 (2) | Tab2 | Tab3

1 Answers1