Touches freeze when i navigate between tabs in my custom bottom tabs component

[abdallaemadeldin]

Current Behavior
i have create my custom bottom tabs component and i follow the guides in docs but when i navigate from tab to another the first tab stop responding to touches
Expected Behavior
when i navigate from tab to another and go back the tab must work fine and detect my touches

Your Environment

software	version
iOS or Android	both
@react-navigation/native	^5.9.0
@react-navigation/bottom-tabs	^5.11.4
react-native-screens	^2.16.1
react-native	0.63.4
node	v12.18.1
npm or yarn	yarn

[github-actions]

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

• @react-navigation/native (found: 5.9.0, latest: 5.9.2)
• @react-navigation/bottom-tabs (found: 5.11.4, latest: 5.11.5)

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

[abdallaemadeldin]

yes it still exist after upgrading the packages

[abdallaemadeldin]

the issue exists on your own snack example
https://snack.expo.io/?platform=android&name=createBottomTabNavigator%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2C%40react-navigation%2Fbottom-tabs%40%5E5.8.0%2C%40react-navigation%2Fdrawer%40%5E5.9.0%2C%40react-navigation%2Fmaterial-bottom-tabs%40%5E5.2.16%2C%40react-navigation%2Fmaterial-top-tabs%40%5E5.2.16%2C%40react-navigation%2Fnative%40%5E5.7.3%2C%40react-navigation%2Fstack%40%5E5.9.0%2Creact-native-paper%40%5E4.0.1%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-gesture-handler%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E2.15.1&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F5.x%2Fcustom-tab-bar.js
if you set a flatlist in any tab and switch between tabs you can't scroll the flatlist anymore

[Maxime-Fleurant]

Exactly the same probleme drive me mad since this morning

[Maxime-Fleurant]

@abdallaemadeldin did you find any solution ?

[Maxime-Fleurant]

The issue exist on your example too it seems : https://snack.expo.io/?platform=android&name=createBottomTabNavigator%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2C%40react-navigation%2Fbottom-tabs%40%5E5.8.0%2C%40react-navigation%2Fdrawer%40%5E5.9.0%2C%40react-navigation%2Fmaterial-bottom-tabs%40%5E5.2.16%2C%40react-navigation%2Fmaterial-top-tabs%40%5E5.2.16%2C%40react-navigation%2Fnative%40%5E5.7.3%2C%40react-navigation%2Fstack%40%5E5.9.0%2Creact-native-paper%40%5E4.0.1%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-gesture-handler%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E2.15.1&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F5.x%2Ftab-based-navigation-switching.js

when you navigate back to the first screen the button on the screen to go to setting doesn't work anymore

[app-rc]

I think it's the same issue #9241

[Maxime-Fleurant]

yes

[abdallaemadeldin]

@app-rc yes it's the same any solutions?

[Maxime-Fleurant]

not yet

[Maxime-Fleurant]

@react-navigation/bottom-tabs downgraded to 5.11.3 worked for me

[abdallaemadeldin]

@Maxime-Fleurant thanks it worked!

[charitha95]

I am also having the same issue with the drawer. Is it related to this?
60fe0db

[chakflying]

Is there something specific I need to do after upgrading to the fix? This is my package-lock and I'm still having the problem of unable to click after navigating.

  "@react-navigation/core": {
    "version": "5.15.1",
  },
  "@react-navigation/drawer": {
    "version": "5.12.2",
  },

Downgrading drawer to 5.11.5 and the problem is gone. Weird.

[aprilmintacpineda]

This is still happening for me on @react-navigation/material-top-tabs, when I press the active tab, the onPress on other tabs won't work anymore, though I can still swipe

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

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

const Tab1 = () => (
  <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}
  >
    <Text>Tab 1</Text>
  </View>
);

const Tab2 = () => (
  <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}
  >
    <Text>Tab 2</Text>
  </View>
);

const Tab3 = () => (
  <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}
  >
    <Text>Tab 3</Text>
  </View>
);

const Tab4 = () => (
  <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}
  >
    <Text>Tab 4</Text>
  </View>
);

const App: React.FunctionComponent = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        >
          <TabNavigator.Navigator
            tabBarPosition="bottom"
            screenOptions={{
              tabBarActiveTintColor: '#3700B3',
              tabBarInactiveTintColor: '#D0D1D5',
              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>
        </KeyboardAvoidingView>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
};

export default App;

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.