When using gestures to return, the previous page will cover the current page

4
closed
1280103995
1280103995
Posted 1 month ago

When using gestures to return, the previous page will cover the current page #10052

Current behavior

https://user-images.githubusercontent.com/17424486/137289661-39c07149-54c7-4900-8f94-d9a510a44c6f.mp4

This is the sample code:

import React from 'react';
import {Button, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Group
        screenOptions={{
          // headerShown: false,
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          headerShown: false,
          presentation: 'modal',
          cardStyle: {backgroundColor: 'transparent'},
          cardOverlayEnabled: true,
        }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

const HomeScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is HomeScreen</Text>
      <Button
        title={'Next Screen'}
        onPress={() => navigation.navigate('Profile')}
      />
      {/*<Button*/}
      {/*  title={'Open Modal'}*/}
      {/*  onPress={() => navigation.navigate('Modal')}*/}
      {/*/>*/}
    </View>
  );
};

const ProfileScreen = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is ProfileScreen</Text>
    </View>
  );
};

const ModalScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text
        style={{
          width: '86%',
          height: 200,
          textAlign: 'center',
          backgroundColor: 'blue',
        }}>
        This is ModalScreen
      </Text>
      <Button title={'close'} onPress={navigation.goBack} />
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;

Expected behavior

The previous page should be slowly pulled out behind the current page

Reproduction

The sample code is above

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0"
  }
github-actions[bot]
github-actions[bot]
Created 1 month ago

Couldn't find version numbers for the following packages in the issue:

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

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

github-actions[bot]
github-actions[bot]
Created 1 month ago

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

1280103995
1280103995
Created 3 weeks ago

Using react-native-screens: 3.9.0 works fine.

github-actions[bot]
github-actions[bot]
Created 3 weeks ago

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.