TabNavigator: Customize onPress functionality for custom tabs?

[joncursi]

Right now the TabNavigator has full control of the onPress functionality of what happens when you tap on a tab. All you can really do is specify a screen, and the TabNavigator takes care of the rest.

const Tabs = TabNavigator({
  ...
  SomeScreen: { screen: SomeScreen },
  ...
});

What if I want to render a tab, but with custom onPress functionality rather than pushing or jumping to a new screen? Consider yelp's "Add" tab:

Tapping the "+" doesn't push a new screen or jump to a new tab. It simply renders an overlay over the existing screen.

Is it possible to reacreate the Yelp example with the existing TabNavigator API? I've been scratching my head over this. Thanks!

[joncursi]

Reddit is another example:

[guoliang1206]

hi man, did you find some way to handle the custom events of tabs on TabNavigator?

[joncursi]

Not yet, I'm also waiting to hear from the authors on possible ways we can achieve this

[manan]

Me too!

[augustoabreu]

I'm trying to do a similar behaviour #1227

[ofairfoul]

@joncursi you can create your own tab bar component quite easily. start by copying the source from TabBarBottom.js. Then you can insert your own custom center button into the view hierarchy. You have access to the navigation prop for navigating or connect it to redux.

Here is a super-stripped-down version I created for my project, doesn't support animation, swipe or tab labels.

import React from 'react';
import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';

const styles = StyleSheet.create({
  tabbar: {
    height: 49,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: colors.border,
    backgroundColor: colors.bgLightGrey
  },
  tab: {
    alignSelf: 'stretch',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

const TabBar = React.createClass({
  render() {

    const {
      navigation,
      renderIcon,
      activeTintColor,
      inactiveTintColor,
      jumpToIndex
    } = this.props;

    const {
      routes
    } = navigation.state;

    return (
      <View style={styles.tabbar}>

        {routes && routes.map((route, index) => {
          const focused = index === navigation.state.index;
          const tintColor = focused ? activeTintColor : inactiveTintColor;
          return (
            <TouchableWithoutFeedback
              key={route.key}
              style={styles.tab}
              onPress={() => jumpToIndex(index)}
            >
              <View style={styles.tab}>
                {renderIcon({
                  route,
                  index,
                  focused,
                  tintColor
                })}
              </View>
            </TouchableWithoutFeedback>
          );
        })}

      </View>
    );
  }
});

export default TabBar;

and in your TabNavigator definition set the tabBarComponent

const TabsNavigator = TabNavigator(
  {
      ...routeConfig
  },
  {
    tabBarComponent: TabBar,
    tabBarPosition: 'bottom'
  }
);

[valeriaabo]

So what @ofairfoul posted should work? Im looking exactly for this 😮

[valeriaabo]

@joncursi Did you get to recreate the yelp Example? Please IM Stucked!

I used @ofairfoul code but my middle button that opens more options is not overlaying.

[joncursi]

No, I haven't gotten it yet either :/

[ericlewis]

have you checked where that overlay is in your view hierarchy? if its anything like other overlays, you need to actually do this elsewhere than the tab bar itself or utilize zIndex.

[javidjamae]

+1 (so I can search for this later)...

[spencercarli]

This use case should be solved by #1335 (will be merging soon)

[fqueiruga]

+1

[kelset]

Pinging OP @joncursi since this issue is quite old and related to an old version of the lib (we merged #1335 so beta.13 has this feature). If no answer I'll close in 7 days.

[kelset]

Hi there @joncursi ,

In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.

If you are still having the issue (especially if it's a bug report) please open a new issue that uses the new Issue Template to provide some more details to help us solve it.

[anuragfexle]

No, I haven't gotten it yet either :/

Hey @joncursi did you get the solution for this? Please help if you resolve the issue I am tucked here. I want to show exactly the same UI on middle button click.