Tab bar styling

[tomexa]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21
• react-native v0.45.1

Problem

I recently migrated from v3 and I have a hard time styling my main tab bar.
I have two goals:

1. Change the color of the top border of the tab bar:
   I've tried the tabBarStyle prop, but it doesn't seem to work anymore and I didn't find a specific prop for that in your documentation.

2. Change the icon color of my active tab:
   With v3 I used the 'icon' prop of the nested scenes and computed the icon based on the title and the selected boolean:

const TabIcon = ({ selected, title }) => {
  switch (title) {
    case 'dash':
      return (
        <Ionicons name={selected ? 'ios-speedometer' : 'ios-speedometer-outline'} size={30} color={selected ? Colors.themeColor : Colors.label} />
      )
    case 'mess':
      return (
        <Ionicons name={selected ? 'ios-mail' : 'ios-mail-outline'} size={30} color={selected ? Colors.themeColor : Colors.label} />
      )
    case 'params':
      return (
        <Ionicons name={selected ? 'ios-settings' : 'ios-settings-outline'} size={30} color={selected ? Colors.themeColor : Colors.label} />
      )
  }
}

But now, the selected boolean is always undefined...
I thought that it was the role of activeTintColor now, so I removed the color prop of my icons and set the activeTintColor prop to the desired value, without success...

Do you have any idea?
Thanks!

Scene:

<Tabs key='tabbar' tabs showLabel={false} activeTintColor={Colors.themeColor} inactiveTintColor={Colors.label} tabBarPosition='bottom' activeBackgroundColor='#111' inactiveBackgroundColor='#111'>
  <Scene key='dashtab' initial title='dash' icon={TabIcon}>

[mcabs3]

For #2, the attribute selected changed to focused

[mcabs3]

I looked into your first issue, you should be able to use tabBarStyle to do your top border, maybe try adjusting padding or margin?

I will update the docs for these props.

[aksonov]

Docs are updated, thanks to @mcabs3

[ArcadeRenegade]

@aksonov i couldn't find it in the docs. i was at a loss of why selected prop wasn't working until i found this thread