Skip to content

Styling the tab bar

dror biran edited this page Aug 31, 2016 · 1 revision

You can style the tab bar appearance by passing a tabsStyle object when the app is originally created (on startTabBasedApp).

Navigation.startTabBasedApp({
  tabs: [ ... ],
  tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
    tabBarButtonColor: '#ff0000'
  }
});

Style object format

{
  tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
  tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
  tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
}

All supported styles are defined here. There's also an example project there showcasing all the different styles.