Cannot swipe to other screen on first and last index with react-navigation material-top-tabs

[ilyadynin]

Environment

Expo SDK 48, React Navigation & PagerView (latests versions)

Description

So I have a PagerView with multiple images that you can swipe through like a gallery post, and I also use Material Top Tabs from React Navigation so people can swipe between screens. The expected behavior (that I want and also get on Android) is, that when you are on the first index and swipe left, React Navigation takes over and you can change the screen, and when you are on the last index and swipe right you change the screen. It works on Android but not on iOS.

Reproducible Demo

Install React Native PagerView, React Native Navigation with Material Top Tabs, set up 2-3 Views with Images and try swiping through on iOS, to change to the next Material Top Tab

[intergalacticspacehighway]

Hi @ilyadynin. Are you on 6.2.0 version? did you face the issue in previous versions?

[ilyadynin]

@intergalacticspacehighway I am on version 6.1.2, and I am not quite sure, if I had this in pervious versions. I cannot really remember since I have stopped development some time and when getting back to it I first focused on some other stuff and just noticed this behavior, but I think that it previously worked...

[ilyadynin]

Also what I notice is, when I switch the screen, and then swipe back on the viewpager real quick, I can swipe back so it works for a little time (half a second or something), and then probably PagerView takes over and blocks me from swiping with Material Top Navigation.

[intergalacticspacehighway]

okay, @ilyadynin it would be great if you can share a minimal repro example repo. Happy to look into it!

[ilyadynin]

Sure thing!

const AuthenticatedStack: React.FC = React.memo(() => {

  const MaterialTopTabNavigator = () => {
    const Tab = createMaterialTopTabNavigator();
    const insets = useSafeAreaInsets();

    return (

      <Tab.Navigator
        tabBarPosition={"bottom"}
        initialRouteName={"Feed"}
        screenOptions={{
          tabBarStyle: {
            backgroundColor: "transparent",
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
            marginBottom: insets.bottom
          },
          tabBarIndicatorStyle: {
            backgroundColor: "transparent",
          },
          tabBarLabelStyle: {
            display: "none",
          },
        }}
      >
        <Tab.Screen
          name="Screen1"
          component={Screen1}
          options={{
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="screen-outline" size={28} color={color} />
            ),
          }}
        />
        <Tab.Screen
          name="Screen2"
          component={Screen2}
          options={{
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="screen-outline" size={28} color={color} />
            ),
          }}
        />

      </Tab.Navigator>
    );
  };

  const navigation = useNavigation();

  return (
    <Stack.Navigator initialRouteName="Tabs">
      <Stack.Screen name="Tabs"
        options={{
          headerShown: false,
          gestureEnabled: true,
          fullScreenGestureEnabled: true
        }}

        component={MaterialTopTabNavigator} />

Then in Screen1 I have my PagerView

    const Images = ({ item, handleImagePress, switchToMatch, isImage2Active, showMatchPost }) => {

        return (
            <>

                <View>

                    <View>
                        <PagerView
                            ref={pagerViewRef}

                            initialPage={0}
                            style={{
                                flex: 1,
                                height: 450,
                                width: '100%',
                            }}
                        >
                            <View style={{
                                justifyContent: 'center',
                                alignItems: 'center',

                            }} key="1">
//content
</View>
</PagerView>
  </>
        )
    }

And images goes into a FlatList component or better said into renderItem, and what I have now noticed because of you is, that if I put the PagerView into the return of the Screen instead of the FlatList, the swiping works as it should, but as part of the FlatList it does not.

[ilyadynin]

@intergalacticspacehighway so apparently it is because i use the pagerview in flatlist, I tried to use a portal and render it outside flatlist, and it works fine, but then I cannot scroll vertically on the page... so the flatlist is impacting the pagerview

[adriaanbalt]

@ilyadynin I'm unable to get pod react-native-pager-view at 6.1.2 to install properly with npx expo install react-native-pager-view. I'm also using Expo SDK 48 but as a managed workflow. Am I missing something to get this component to work? Thanks

[bpeck81]

Did anyone figure this out?