How to create Tabbar with icon&Text

[hapo-nghialuu]

I search in doc, i don't know how to create tabbar with icon&Text use react-native-router-flux. Please help me!!!! Thank you very much!!!!

Version

Tell us which versions you are using:

• react-native-router-flux v4.?.? (v3 is not supported)
• react-native v0.4.8

[ghoshabhi]

I also want to look at a clean example of just tabbed navigation.

[mcabs3]

this can be done using icon and tabBarLabel component on an individual Tabbed Scene.

<Tabs>
  <Scene
  tabBarLabel={'Something'}
  icon={IconComponent}
  />
</Tabs>

[hapo-nghialuu]

thank you very much!

[dwilt]

Just a heads up. This seems really weird, and might be a bug, but you can't pass a rendered component to the icon prop:

<Scene
    hideNavBar
    key={MY_ACCOUNT_KEY}
    tabBarLabel={`My Account`}
    component={MyAccount}
    icon={<Icon
            size={iconSize}
            color={iconColor}
            name={`home3`}
        />}
/>

You get this error:

The way around it is to wrap the component in a function:

<Scene
    hideNavBar
    key={MY_ACCOUNT_KEY}
    tabBarLabel={`My Account`}
    component={MyAccount}
    icon={() => (
        <Icon
            size={iconSize}
            color={iconColor}
            name={`home3`}
        />
    )}
/>

[dwilt]

It seems the icon prop uses the v3 callback as explained here. Except now, the selected prop is now focused. Here's how I got it working:

<Tabs
    showLabel={false}
    lazy={true}
    tabStyle={styles.tab}
    tabBarStyle={styles.tabs}
    labelStyle={styles.label}
    swipeEnabled={false}
>
    <Scene
        hideNavBar
        key={MY_WATER_KEY}
        component={MyWater}
        icon={({ focused }) => (
            <Icon
                size={iconSize}
                color={focused ? activeIconColor : iconColor}
                name={`drop2`}
                text={`My Water`}
                textStyle={focused ? [styles.label, styles.activeLabel] : styles.label}
            />
        )}
    />
    <Scene
        hideNavBar
        key={INBOX_KEY}
        component={Inbox}
        icon={({ focused }) => (
            <Icon
                size={iconSize}
                color={focused ? activeIconColor : iconColor}
                textStyle={focused ? [styles.label, styles.activeLabel] : styles.label}
                name={`envelope`}
                text={`Messages`}
            />
        )}
    />
    <Scene
        hideNavBar
        key={MY_ACCOUNT_KEY}
        component={MyAccount}
        icon={({ focused }) => (
            <Icon
                size={iconSize}
                color={focused ? activeIconColor : iconColor}
                textStyle={focused ? [styles.label, styles.activeLabel] : styles.label}
                name={`home3`}
                text={`My Account`}
            />
        )}
    />
</Tabs>

By the way, I wanted more control over the labels so I passed the text into my Icon component and render it there and use the showLabel={false} on the Tabs component.

[ghoshabhi]

@dwilt Thanks for the example. Just had a small question. How do I change the scene being rendered based on the tab click ? Just usual Action.sceneKey() ?

Thanks.

Sorry forgot we had access to the component prop! 🤕 Thanks again!

[dwilt]

@ghoshabhi yep

[wincod75]

Does this still work? My text label is not showing...

icon={({ focused }) => ( <Icon size={iconSize} color={focused ? activeIconColor : iconColor} textStyle={focused ? [styles.label, styles.activeLabel] : styles.label} name={home3} text={My Account} /> )}

[uncvrd]

@wincod75 any luck after a day? I'm just running into this issue as well and cannot get anything to display

[wincod75]

@uncvrd No luck, can't get anything to display either.

[uncvrd]

@wincod75 ugh well keep me posted if you do. I'll keep searching

[webjyh]

@uncvrd @wincod75

const TabIcon = (props) => {
    console.log({...props});
    return (
        <View>
            <Text>{JSON.stringify(props.focused)}</Text>
        </View>
    )
};

<Scene icon={TabIcon} ... />