Custom tab bar

[danielkcz]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.14
• react-native v0.46.4

Enhancement

I want to render completely custom tab bar, simply because the default implementation is missing an option to show label only for the active tab. Using tabBarComponent it doesn't seems there is a way to access props of the scene which would be lovely.

I would be willing to do a PR for this, but I feel a bit lost in code, so if you can point me in the right direction? It's probably going down to react-navigation since I am unable to find this.

<Scene key="player" tabs tabBarPosition="bottom" tabBarComponent={BottomTabBar}>
  <Scene key="playerMap" component={PlayerMapScreen} tabTitle="Map" tabIcon="map" navTransparent />
  <Scene key="playerEvents" component={PlayerEventListScreen} tabTitle="Events" tabIcon="events" navTransparent />
</Scene>

const BottomTabBar = ({ navigationState, jumpToIndex }: Props) => (
  <ButtonGroup
    onPress={jumpToIndex}
    selectedIndex={navigationState.index}
    buttons={makeButtons(navigationState)}
    containerStyle={styles.container}
  />
)

function makeButtons({ routes }) {
  return routes.map((route) => (
    <Text>{route.params.tabTitle}</Text>
  }
}

[luco]

You can get the current tabbar index at props.navigationState.index with the tabBarComponent.

[danielkcz]

@luco sorry, but how is that relevant to my problem ? :)

[aksonov]

Just check react-navigation TabBarBottom sources

[danielkcz]

@aksonov So I need this ... https://github.com/react-community/react-navigation/blob/master/src/views/TabView/TabView.js#L80

Unfortunately, last time I checked, there was no router in props of my BottomTabBar component.

[aksonov]

It should be there otherwise tabs would not work in Example project ;)

[aksonov]

First try to pass react-navigation TabBarBottom as tabBarComponent. If it works then you could successfully customise it.

[mybolide]

<Router> <Scene key="tabbar" gestureEnabled={false} showLabel={false} tabs={true} tabBarPosition={'bottom'} animationEnabled={false} tabBarComponent={TabIcon} activeTintColor={"#ff9900"} > <Scene key="Index" tabs={true} component={Index} title="" hideNavBar initial/> <Scene key="Company" component={Company} title="" hideNavBar/> <Scene key="Designer" component={Designer} title="" hideNavBar/> <Scene key="Offer" component={Offer} title="" hideNavBar/> <Scene key="User" component={User} title="" hideNavBar/> </Scene> </Router>
<Footer> <FooterTab> <Button vertical onPress={()=>{alert(0)}}> <Icon name="apps" /> <Text>Apps</Text> </Button> <Button vertical> <Icon name="camera" onPress={()=>{alert(1)}}/> <Text>Camera</Text> </Button> <Button vertical> <Icon active name="navigate" onPress={()=>{alert(2)}}/> <Text>Navigate</Text> </Button> <Button vertical> <Icon name="person" onPress={()=>{alert(3)}}/> <Text>Contact</Text> </Button> </FooterTab> </Footer>
When clicked, the Android machine sometimes has no response@aksonov

[aksonov]

@mybolide Please reproduce with pure react-navigation to make sure that it is not their bug. Give me link for forked and modified Example or other demo with the issue.

[kuriel-trivu]

How to re-use {tabBarComponent} = props ?

I mean, Scene has component={SomeComponent}, how we can to re-use that property to render that component in each Scene option.

(In a custom tab bar component)