Router Flux - how to disable automatic text on the tab bar?

Question

This is the result. I'd like to render text and icons on my own. So I need to disable the automatic generated text for the tabs. Any suggestion ?

Also, the text color is not changing to red when it's active (TabIcon function).

import React from 'react'
import {Text} from 'react-native'
import {Router, Scene,Stack, Modal} from 'react-native-router-flux'

// Scenes
import BrowseUser from '../scenes/BrowseUser'
import Notifications from '../scenes/Notifications'
import Search from '../scenes/Search'
import Timeline from '../scenes/Timeline'

const TabIcon = ({selected,title}) => {
  return(<Text style={{color: selected ? 'red ' : 'black'}}>{title} 
</Text>)
}

export default props => (
<Router>
    <Stack key="root" hideNavBar>
        <Scene key='main' icon={TabIcon} tabs={true} initial tabBarStyle={{backgroundColor: '#00FF00'}}>
            <Scene key='timeline' component={Timeline} title='Timeline'/>
            <Scene key='browseUser' component={BrowseUser} title='BrowseUser'/>
            <Scene key='search' component={Search} title='Search'/>
            <Scene key='notifications' component={Notifications} title='Notifications'/>
        </Scene>
    </Stack>
</Router>
)

Answer 1

Regarding

So I need to disable the automatic generated text for the tabs. Any suggestion ?

The componenet supports the prop showLabel so you can set it to false showLabel={false} and that will not display the title of the tabbed scenes.

Regarding

Also, the text color is not changing to red when it's active (TabIcon function).

The prop passed on selection is focused not "selected". So it should be

const TabIcon = ({ focused,title }) => 
  (<Text style={{color: focused ? 'red ' : 'black'}}>{title}</Text>)