[@react-navigation/material-top-tabs][bare-react-app] Pressing on active tab causes the other tabs touch events to freeze

[aprilmintacpineda]

Current behavior

When I press on currently active tab, the other tabs' touch events will no longer work

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {Text, View} from 'react-native';

const TabNavigator = createMaterialTopTabNavigator<{
  Tab1: undefined;
  Tab2: undefined;
  Tab3: undefined;
  Tab4: undefined;
}>();

const Container: React.FunctionComponent = ({children}) => (
  <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    {children}
  </View>
);

const Tab1 = () => (
  <Container>
    <Text>Tab 1</Text>
  </Container>
);

const Tab2 = () => (
  <Container>
    <Text>Tab 2</Text>
  </Container>
);

const Tab3 = () => (
  <Container>
    <Text>Tab 3</Text>
  </Container>
);

const Tab4 = () => (
  <Container>
    <Text>Tab 3</Text>
  </Container>
);

const App: React.FunctionComponent = () => {
  return (
    <NavigationContainer>
      <TabNavigator.Navigator
        tabBarPosition="bottom"
        screenOptions={{
          tabBarActiveTintColor: 'blue',
          tabBarInactiveTintColor: 'gray',
          swipeEnabled: true,
          tabBarStyle: {
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 0,
            },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 4,
            backgroundColor: '#fff',
            borderTopWidth: 0,
          },
          tabBarLabelStyle: {
            textTransform: 'capitalize',
          },
          tabBarIndicatorStyle: {
            top: 0,
          },
        }}>
        <TabNavigator.Screen
          name="Tab1"
          component={Tab1}
          options={{
            tabBarLabel: 'Tab 1',
          }}
        />
        <TabNavigator.Screen
          name="Tab2"
          component={Tab2}
          options={{
            tabBarLabel: 'Tab 2',
          }}
        />
        <TabNavigator.Screen
          name="Tab3"
          component={Tab3}
          options={{
            tabBarLabel: 'Tab 3',
          }}
        />
        <TabNavigator.Screen
          name="Tab4"
          component={Tab4}
          options={{
            tabBarLabel: 'Tab 4',
          }}
        />
      </TabNavigator.Navigator>
    </NavigationContainer>
  );
};

export default App;

Screen.Recording.2022-03-12.at.11.23.32.AM.mov

Expected behavior

When I press on the currently active tab, the other tabs' touch events SHOULD STILL work.

Reproduction

https://github.com/aprilmintacpineda/react-navigation-repro-tab-freezes

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	^6.0.8
@react-navigation/material-top-tabs	^6.1.1
react-native-safe-area-context	^4.1.2
react-native-screens	^3.13.1
react-native-tab-view	^3.1.1
react-native-pager-view	^5.4.11
react-native	0.67.3
node	16.13.0
yarn	1.22.11

[ngxhuyhoang]

Same

[agusvazquez]

I am experiencing the same issue but with react navigation drawer

[reidgarner]

Same.

[joelbrewer]

Same. Any update on this?

[raajnadar]

Can confirm the code is perfect with this version.

"@react-navigation/native": "^6.0.6",
"@react-navigation/material-top-tabs": "^6.0.6",
"react-native-screens": "~3.10.1",
"react-native-tab-view": "^3.1.1",
"react-native-pager-view": "5.4.9",

Can someone create a runnable snack repro?? Would be easier to debug the issue.

[tuanphamanh91]

Use "react-native-tab-view": "^2.16.0" will solve the problem

[ElicaInc]

Use "react-native-tab-view": "^2.16.0" will solve the problem

Thanks. This works for me.

[nadavdrewe]

Thanks this helped

[robertherber]

Use "react-native-tab-view": "^2.16.0" will solve the problem

Yeah, it solves this issue 👍 However it's a bit glitchy in other ways (when resizing windows etc) - so would be great if compatibility with the later version was fixed 😃

[okwasniewski]

Hey @aprilmintacpineda,

Can you check if this issue still persists with the latest tab-view and pager-view versions?

[johnnywang]

@okwasniewski not the issuer opener, but can confirm that this is still happening with tab-view 3.3.2 and pager-view 6.1.2 (so not latest, but close)

For additional context, we're running into the same issue in our app, but the problem is even more severe: if we nav to a nested tab view (so we have a bottom tab nav, with a tab that has a nested top tab nav within that), the entire tab nav and tab content will sometimes entirely lock up if the wrong tab has loaded. To be a bit more clear (since I don't have a vanilla repro for this):

• App has bottom tabs Home, Browse
• Browse has a top tab nav with tabs All, Auctions
• Opening screen (Home) has a button that will nav to Auctions
• If you tap that button quickly enough on a cold start, instead of taking you to Auctions, the view gets stuck on All and touch events are frozen for the entirety of Browse content (the bottom tabs still work though)

Update: can confirm this is happening on the latest as well

[vargajacint]

The issue is still exist using:

• react-native-tab-view: 3.5.1,
• react-native-pager-view: 6.2.0,
• @react-navigation/material-top-tabs: 6.6.2,
• @react-navigation/native-stack: 6.9.12
• react-navigation/native: 6.1.6,

[phatmovista]

The issue is still exist using:

• react-native-tab-view: 3.5.1,
• react-native-pager-view: 6.2.0,
• @react-navigation/material-top-tabs: 6.6.2,
• @react-navigation/native-stack: 6.9.12
• react-navigation/native: 6.1.6,

I can confirm the same as well

[johnnywang]

@okwasniewski Bump on this, since it doesn't seem like this has been assigned out to anyone yet. We're in the process of upgrading Expo (and hence React and React Native), which seems like it might require a bump to the pager-view package? And based on the comments above, it looks like this is still an issue

Also wondering if this fix in the pager-view project was possibly related to this: callstack/react-native-pager-view#654

[okwasniewski]

Hey @johnnywang,

I will look into this early next week and try to reproduce this issue. Are you also seeing this on React Native app without expo?

[johnnywang]

@okwasniewski This required a pretty specific setup in our app to trigger, so I don't have an easy way to test or repro this outside of our Expo (bare) app. Maybe @vargajacint or @phatmovista can confirm?

[vargajacint]

Yes, I can confirm. This issue is still exist without Expo

[oguzydz]

This issue still exist, with React Native App without expo not bare app.

[Jun-FH]

I concur, the issue still exist.
Using the following, libraries and version:

@react-navigation/material-top-tabs: 6.6.3
react-native-pager-view: 6.2.1

react-native-tab-view
: 3.5.2


On our end a need to wait sometime(3-7 mins at least) by switching the tabs in real device(tested iPhone).
At some point the screen transitioning will freeze, yet in my end I can still tap on the tabs.

[johnnywang]

@okwasniewski I saw that there was a PR referencing this, that looks like it contained a fix: is this issue still open becuase it was an iOS-only fix?

[Jun-FH]

@johnnywang
Looks like I made a mistake on the PR reference. Perhaps can remove the PR reference in the comment.
We refrain top tabs for now. We go with bottom tabs for now.
We loss the transition animation but it looks good for our need at the moment. We may switch back to it later if needed.

[ayelenguini]

any updates on this? the issue it still happening on latest version.