React-native-tab-view: Android tab click doesnt switch tabs

[Chatharaju]

Current behaviour

Android tab click doesn't switch tabs, iOS works fine.

Expected behaviour

Clicking tabs should switch to the selected tab

react-native: 0.50.4
react-native-tab-view: 0.74

Any solution. Please and thanks.

[noambonnie]

I found that this happens to me only when I use absolute position in styling. if I remove position: "absolute" from the style, tapping the tab works again. I hope this helps troubleshooting.

[Chatharaju]

@noambonnie, Thanks for the response. I havent used any position: "absolute" styles on my tabview.

[noambonnie]

Yes. I now see that it's not as simple as that. I'm trying to narrow it down. I'm using this library through react-navigation so not directly. I'll report back if I come up with something. But it's good to know that I'm not the only one experiencing this.

[noambonnie]

So, here's what happens in my case (Sort of)... I noticed that positioning the tab bar vertically anywhere that's not the default may cause this issue. Consider the example provided on the project's main page. In _renderHeader I added a style to the TabBar with top: 40. In that case, pressing the tab will not switch tabs. Adding zIndex: 1 solves this. Not sure why this happens, but probably has to do with order of rendering and one thing being rendered on top of the other.

I don't know whether this is a feature or a bug (sounds like a bug to me...).

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

const FirstRoute = () => <View style={[ styles.container, { backgroundColor: '#ff4081' } ]} />;
const SecondRoute = () => <View style={[ styles.container, { backgroundColor: '#673ab7' } ]} />;

export default class App extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'First' },
      { key: 'second', title: 'Second' },
    ],
  };

  _handleIndexChange = index => this.setState({ index });

  _renderHeader = props => <TabBar {...props} style={{
    //   zIndex: 1,         <---- Uncomment and presses are working again...
      top: 40,
      left: 0,
      right: 0,
}} />;

  _renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  render() {
    return (
      <TabViewAnimated
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

[Louies89]

The thing is that, inside _handleIndexChange, we have to set the index of the route using setState. Otherwise this does not work.

If you do not want to whole state to the navigationState, like mine, I am keeping a large set of data in state, so I do not want all those unnecessary data to be passed to <TabViewAnimated/>, So use below code:

<TabViewAnimated
  navigationState={{index: this.state.index,   <------This is important
            routes: [
              { key: 'first', title: 'First' },
              { key: 'second', title: 'Second' },
            ],
          }}
  renderScene={this._renderScene}
  renderHeader={this._renderHeader}
  onIndexChange={this._handleIndexChange}
  initialLayout={initialLayout}
 />

set the state index in _handleIndexChange, and the tab press shall work.

Hope it will help...

[thyagoweber]

I'm having this very same issue, but, in my case, the tab click is working randomly. I tried to separate the states as pointed by @Louies89, and setting the z-index, but it didn't work. Any help would be awesome...

[Louies89]

@thyagoweber,
Hi, I answered that a long time ago and that was working the old version of library, But currently I am using TabView instead of TabViewAnimated & same logic works.

And I have not tried with z-Index. And why you need z-Index style among the Tabs ? Do you want a tab above another? If that then the back ground tab shall not be clicked, so in that case, swiping the tab, tabs can be changed.

Anyway as a react native developer, you can go through the library code and check what is causing the problem. Also you can add some console.log() or alert() in library code temporarily, to check, your doubts.

[thyagoweber]

And I have not tried with z-Index. And why you need z-Index style among the Tabs ? Do you want a tab above another?

@Louies89 Not really, I was just testing @noambonnie workaround, but it didn't work. The tab click works randomly and sometimes it throws the error below.

BTW, I'm using version 1.3.1 with RN v. 0.56.0

[thyagoweber]

@Chatharaju Have you manage to make this work?

[thyagoweber]

Note that the swipe works as intended, but the same cannot be said about the tab clicking.

[danielwalker]

react-native 0.57.5
react-native-tab-view 1.3.1

Adding delayLongPress={2000} to TouchableNativeFeedback made tabs work correctly for me. At one point I thought long press events were interfering, but TouchableNativeFeedback.onLongPress doesn't seem to be called at all on android. TouchableNativeFeedback seems to be the issue though. Here's the relevant part of TouchableItem.js, if you want to get past this now:

    if (Platform.OS === 'android' && Platform.Version >= LOLLIPOP) {
      return (
        <TouchableNativeFeedback
          {...rest}
          delayLongPress={2000}
          background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
        >
          <View style={style}>{React.Children.only(this.props.children)}</View>
        </TouchableNativeFeedback>
      );
    } else {
      return (
        <TouchableOpacity {...rest} style={style} activeOpacity={pressOpacity}>
          {this.props.children}
        </TouchableOpacity>
      );
    }

[edgarbonillag]

Hi everyone,

The library 'react-native-tab-view' uses React Native's ViewPagerAndroid as default pager for Android and this component is not working well.

I've found an EASY SOLUTION that made my app run without any problem. I just had to tell the 'react-native-tab-view' to use the PagerScroll (which is the default for iOS and its based on RN's ScrollView) and that's it. To do that, you just import {PagerScroll} from 'react-native-tab-view' pass the following prop to the main TabView component:

<TabView
   ...
   renderPager={(props) => <PagerScroll {...props}/>}
   ...
/>

[chamileb]

Perfect solution, you save my day bro..all the best

[MandipGiri]

The thing is that, inside _handleIndexChange, we have to set the index of the route using setState. Otherwise this does not work.

If you do not want to whole state to the navigationState, like mine, I am keeping a large set of data in state, so I do not want all those unnecessary data to be passed to <TabViewAnimated/>, So use below code:

<TabViewAnimated
  navigationState={{index: this.state.index,   <------This is important
            routes: [
              { key: 'first', title: 'First' },
              { key: 'second', title: 'Second' },
            ],
          }}
  renderScene={this._renderScene}
  renderHeader={this._renderHeader}
  onIndexChange={this._handleIndexChange}
  initialLayout={initialLayout}
 />

set the state index in _handleIndexChange, and the tab press shall work.

Hope it will help...

The index part was helpful for me i wasn't using the components this.state.index
Worked like a charm.
Thanks

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.

[gluix20]

This works for me.
Had to add onTabLongPress handler within TabBar and jump to wanted route from there.
In my case, it was happening that even a slightly tap of any TabBar item was calling onTabLongPress instead of simple onTabPress. Since I don't need to handle long press for anything else right now, this code helped me:

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

[harishlalwani]

@Louies89 thanks you saved my day.

[krozett]

https://github.com/react-native-community/react-native-tab-view/issues/525#issuecomment-453782020 is the right answer! Although if you are using version < 1.0 of this module, replace PagerScroll with TabViewPagerScroll.

[hakkikonu]

try to update react-native-screens to latest version

[sharmaraj12]

Hi everyone,

The library 'react-native-tab-view' uses React Native's ViewPagerAndroid as default pager for Android and this component is not working well.

I've found an EASY SOLUTION that made my app run without any problem. I just had to tell the 'react-native-tab-view' to use the PagerScroll (which is the default for iOS and its based on RN's ScrollView) and that's it. To do that, you just import {PagerScroll} from 'react-native-tab-view' pass the following prop to the main TabView component:

<TabView
   ...
   renderPager={(props) => <PagerScroll {...props}/>}
   ...
/>

Prefect Solution

[sriteja777]

Using zIndex worked for me

[filozofer]

I still have the same issue on android : the onTabPress is not working, only the onTabLongPress is called. In my case, I want to be able to use both of the events. Is there a solution ? I try everything say here already.

[ibogdan94]

@filozofer you can try this hack

const renderTabBar = (props) => {
    if (Platform.OS === 'android') {
      props.jumpTo(routes[props.navigationState.index].key);
    }

    return (<TabBar {...props} />)
}

return (<TabView renderTabBar={renderTabBar} ... />)

[filozofer]

@ibogdan94 I don't understand what you are proposing here. If I read correctly, it will only redirect the user to another route while trying to render the TabView on android, that's not what I need.
Anyway I use this solution (using renderTabBarItem with TouchableHighlight) :

    <TabBar
      {...tabBarProps}
      renderTabBarItem={(tabItemProps) => {
        return (
          <TouchableHighlight 

[HadiKhalifeh]

@thyagoweber you can help same error