React native tab view, Press to switch tab doesn't works

Question

I'm using the package "react-native-tab-view" in my app. To switch tab the swipe event is working really fine, but when I press the tab I want to go, it doesn't work, I don't know why... This is my component :

export default function TabsMenu() {


const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'env', title: 'Env.'},
    {key: 'imp', title: 'Imp.'},
    {key: 'suppl', title: 'Suppl.'},
    {key: 'menus', title: 'Menus.'},
  ]);

  const renderScene = SceneMap({
    env: Environnement,
    imp: Impression,
    suppl: Supplements,
    menus: Menus,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      style={{flex: 1}}
      renderTabBar={props => (
        <TabBar
          {...props}
          renderLabel={this._renderLabel}
          getLabelText={({route: {title}}) => title}
          indicatorStyle={styles.indicator}
          tabStyle={styles.tabStyle}
          style={styles.tab}
        />
      )}
    />
  );
}

The views used for the routes are just : - Form with some inputs - And the "Menus" one, is a "DraggableFlastList", I tried to remove it, and the tab "Press" event still doesn't work...

By the way, my DraggableFlastList prevents me to swipe left/right on my tabs, (because of TouchableOpacity element I guess), so I am really stuck when I am on the tab "Menus"...

If you guys got a solution... :)

Answer 1

This one worked for me

 <TabBar
  {...props}
  scrollEnabled
  renderLabel={this.renderLabel}
  onTabLongPress={(scene) => {
    const { route } = scene
    props.jumpTo(route.key)
  }}
/>

Answer 2

You can use onTabPress props like this :

<TabBar
  onTabPress={({ route, preventDefault }) => {
    if (route.key === 'home') {
      preventDefault();

      // Do something else
    }
  }}
  ...
/>

and also check TabView other props is here: https://github.com/react-native-community/react-native-tab-view

Answer 3

Make sure you are not in a debug mode, on tap functionality doesn't work when debug mode is on. I faced the same issue, stop debugging solve my problem.

In my case, swipe functionality was working fine but not tap! Found this thread on github Tab bar does not respond to taps and solved my issue finally. Hope this will help others who are facing the same problem.

If you face the same problem, I suggest to check in real device.