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

Environment

package	version
react-native-tab-view	^3.1.1
react-native-pager-view	^5.4.15
react-native	^0.67.3
expo	^44.0.6
node	v16.13.0
yarn	1.22.11

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.67.3, latest: 0.67.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[aprilmintacpineda]

This comment pointed out that using a lower version of react-native-tab-view fixes the problem, so I opened it here.

[ElicaInc]

same problem

[mAdutskevich]

Same problem

[GeunwonChoi]

Same problem

[ElicaInc]

Downgrade to react-native-tab-view@2.16.0 works fine in my settings.

[GeunwonChoi]

solve article
#1322

[ElicaInc]

solve article
#1322

GeunwonChoi Thank you!!!
"react-native-tab-view": "^3.1.1" with "react-native-pager-view": "^5.4.15"
works fine!!!
But I prefer 2.16.0 because of its quick re-render feature.