React-native-tab-view: [Help] [Android only] Tab Switching freezes after a new screen is pushed from the tabbed view

[ghoshabhi]

#### UPDATE: Github repo replicating the problem: https://github.com/ghoshabhi/rn-tabview-problem. Also added relevant gif showing the problem.

Current behaviour

I have a screen with the TabViewAnimated component in it. There are two tabs and each tab renders a <FlatList /> component on it. Each row item in the FlatList component - pushes a new screen to the navigation stack (using react-native-navigation).

The problem arises when I come back from the list view and try to switch tab again. The swipe completely freezes and also I cannot jump tabs anymore.

I am not entirely sure why this is happening.

FYI: This works perfectly fine on iOS. The issue persists only on Android

Expected behaviour

Tab switching should happen smoothly after returning back to the view containing TabViewAnimated.

Code sample

I am trying to put together a sample repo which is shareable and replicates the problem. But for now here's the code that I have:

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

import List from './List';

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

export default class TabViewExample extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'tab1', title: 'Tab 1' },
      { key: 'tab2', title: 'Tab 2' },
    ],
  };

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

  renderHeader = props => <TabBar {...props} />;

  renderScene = ({ route }) => {
    switch (route.key) {
      case 'tab1':
        return <List navigator={this.props.navigator} />;
      case 'tab2':
        return <View style={{ backgroundColor: '#673ab7', flex: 1 }} />;
      default:
        null;
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TabViewAnimated
          style={{ flex: 1 }}
          navigationState={this.state}
          renderScene={this.renderScene}
          renderHeader={this.renderHeader}
          onIndexChange={this.handleIndexChange}
          initialLayout={initialLayout}
        />
      </View>
    );
  }
}

The sub views opened from the tabbed view - don't have the tabbed view and hence I feel they shouldn't bother any configurations for the tab view. I am not sure what is wrong here.

Screenshots (if applicable)

As you can see here until the child screen is opened the tab view works as expected. Just after that, it stops working.

What have you tried

I hold all the tab configuration inside my reducer and dispatch actions to switch tab state. I have tried storing the configuration in component's local state. But the problem still persists.

I have noticed that this problem persists with react-native-navigation but not with react-navigation(https://snack.expo.io/Sy3Eh_9_G). I am not sure if it matters though.

Your Environment

| software | version
| --------------------- | -------
| ios or android | android
| react-native | 0.49.3
| react-native-tab-view | 0.0.74
| node | 8.2.1
| npm or yarn | 1.3.2

---

UPDATE: Used the latest react-native-tab-view: 0.0.74

[ghiteze]

I got the same problem on android

[ghoshabhi]

@ghiteze : Did you checkout this repo : https://github.com/ghoshabhi/rn-tabview-problem - do you have a similar setup ?

[ghiteze]

@ghoshabhi Yes, I also use react-native-navigation. Your sample code on expo have no issue with react-navigation, maybe react-native-navigation issue.

[satya164]

This is a bug in React Native's ViewPager: https://github.com/facebook/react-native/issues/13463

You could try switching to a different pager such as TabViewPagerExperimental which should fix the issue.

[ghoshabhi]

@satya164 : I am trying to use it with react-native-navigation. The gesture library that you're recommending is still not working on Android :(

03-05 08:42:30.000 12426-12426/com.tabview_example E/unknown:ReactNative: Unable to display loading message because react activity isn't available
03-05 08:42:31.277 12426-12456/com.tabview_example E/ReactNativeJS: undefined is not an object (evaluating 'RNGestureHandlerModule.State')
03-05 08:42:31.282 12426-12426/com.tabview_example E/unknown:ReactNative: Unable to launch redbox because react activity is not available, here is the error that redbox would've displayed: undefined is not an object (evaluating 'RNGestureHandlerModule.State')
03-05 08:42:32.459 2120-2254/system_process E/TaskPersister: File error accessing recents directory (directory doesn't exist?).

I am going to creating an issue for react-native-gesture-handler library too. But until then @satya164 do you recommend any alternative except using TabViewPagerExperimental ?

Here's what I changed: https://github.com/ghoshabhi/rn-tabview-problem/commit/9d5b1eed6c8ab2adf716094e76a868fa44b016b0#diff-8ed68ebd955b94f5bfa602b43aabf93bR42

Is this the correct usage ?

Thanks!

[ghoshabhi]

Hey, the issue with ViewPager on Android seems to be fixed over here: https://github.com/facebook/react-native/pull/14867. Is this what is wrong with the problem I have mentioned ?

UPDATE: I tried to apply the changes locally. But, it still doesn't help.

[ghiteze]

Did you try this? https://github.com/wix/react-native-navigation/issues/1909. Seems not smooth, I need another solution

[ghoshabhi]

@ghiteze : Do you have a complete example of using the solution mentioned there ?

[ghiteze]

Please check https://github.com/ghoshabhi/rn-tabview-problem/pull/1/commits/3da9fe42dc506f79e3822d7b8fa2d15fea1b4959

[ghoshabhi]

@ghiteze This is awesome! I think it works great! 👍 It is better than the problem I have right now!

So you said that it is not smooth. I don't see much difference though. Do you have a gif that you can share to show that ?

Thanks a ton!

[ghoshabhi]

@satya164 : Do you see any drawbacks of using TabViewPagerAndroid instead of the pager you mentioned ?

[satya164]

TabViewPagerPan is JS based, so it won't be as smooth. TabViewPagerScroll doesn't support a different initial route except index: , TabViewPagerExperiemental is experimental. You should try them and see if you are fine with how they work.

[zarvedan]

I was able to solve this issue by displaying a modal instead of pushing a view.

[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.