search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.33k stars 4.98k forks source link

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

Open aprilmintacpineda opened 2 years ago

aprilmintacpineda commented 2 years ago

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;

https://user-images.githubusercontent.com/21032419/158002185-e4ee1949-5cc0-41ec-b536-9d01fa4fbde2.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

Packages

Environment

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 commented 2 years ago

Same

agusvazquez commented 2 years ago

I am experiencing the same issue but with react navigation drawer

reidgarner commented 2 years ago

Same.

joelbrewer commented 2 years ago

Same. Any update on this?

raajnadar commented 2 years ago

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 commented 2 years ago

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

ElicaInc commented 2 years ago

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

Thanks. This works for me.

nadavdrewe commented 2 years ago

Thanks this helped

robertherber commented 2 years ago

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 commented 1 year ago

Hey @aprilmintacpineda,

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

johnnywang commented 1 year ago

@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):

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

vargajacint commented 12 months ago

The issue is still exist using:

phatmovista commented 11 months ago

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 commented 9 months ago

@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: https://github.com/callstack/react-native-pager-view/pull/654

okwasniewski commented 9 months ago

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 commented 9 months ago

@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 commented 9 months ago

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

oguzydz commented 8 months ago

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

Jun-FH commented 8 months ago

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 commented 8 months ago

@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 commented 8 months ago

@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 commented 2 weeks ago

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