React-native-router-flux: Can't custom the tab bar icon with title?

[lin493369]

Version

Tell us which versions you are using:

• react-native-router-flux v3.37.0
• react-native v0.38.0

Expected behaviour

I want to custom the tab bar icon with title.And I custom the icon={TabIcon},the TabIcon component is like this:

return( <View style={styles.tabContainer}> <Ionicon name={this.props.tabIcon} size={24} color={this.props.selected ? '#444' :'#AAA'} /> <Text style={[{color: this.props.selected ? '#444' :'#AAA'}, styles.tabIcon]}>{this.props.title}</Text> </View> )

Actual behaviour

Can't navigator in to the tab pages,and show error:'Invalid data message - all must be length: 7'
And the console show the warning cycle：

``` Warning: setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount`.
`````

what wrong with my code?

I want it work like flow:

[royjkim]

I'm facing to same problems as yours.
To solve this, we'd like to look details on react-native-router-flux.

Anyway, I'm searching another libraries and basic features to solved this problems.

[royjkim]

@lin493369
I'm not sure it might be help.

1. You add a certain property in Scene
2. In the target of icon property of Scene component, you can differentiate each tabs.
3. So, input the image. I used Image component on the sample image.
4. I didn't use react-native-vector-icons, despite of that's convenient.
5. AFAIK combining many 3rd libraries make side effects.

[AndrewHenderson]

This worked for me to use text instead of an icon.

<Scene key="event"
             tabs
             tabBarStyle={styles.tabBarStyle}
             tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}>
        <Scene
          key="event_tab"
          icon={()=>(<Text>foo</Text>)}
          iconName="md-person"
        >
          <Scene key="event_initial" component={EventFull} title="Event Details" />
    </Scene>
</Scene>

[royjkim]

@AndrewHenderson
Thanks!, You really smart !!.

@lin493369
I tried this way(AndrewHenderson said.) with Ionicons of react-native-vector-icons.
It works.

[andreecosta]

I cant get this to work, I only get the text, not the icon...

And I tried with @AndrewHenderson solution.

[newah]

Not sure if still relevant... Could be something like this + styles

name={'newspaper-o'}
type={'font-awesome'}
size={26}
/>
some title

[AndrewHenderson]

@itswaze – @newah is correct. You have to return a View that has both your Icon and Text components within it.

[manideepcs024]

but still default key title comes with icon.how can we hide that.

[newah]

@manideepcs024 you provide your own view representation :) to skip title, instead of doing:

name={'newspaper-o'}
type={'font-awesome'}
size={26}
/>
some title

do:

name={'newspaper-o'}
type={'font-awesome'}
size={26}
/>