CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-drawerreact-navigation-v6
Alix Humbert
Alix Humbert

Reputation: 123

IOS Swipe Back gesture does not perfom navigation.goBack()

I have a drawer navigator with many child navigators. On Android, both Header back arrow and navigation bar back button work and go back to previous screens. E.g., if I navigate to a bScreen1 through the drawer, both buttons get me back to the Home Screen of the App i.e. aScreen1

On IOS, Header back arrow work fine, HOWEVER, swipe back gets me back to my login screen inside the AuthNavigator instead of aScreen1, which has 0 sens to me because it is outside the drawerNavigator, and at the same level inside the RootNavigator. The swipe back does not perform a navigation.goBack().

I have already tried overriding the swipe behavior by adding a listener on 'beforeRemove' event and then calling navigation.goBack(), but the wrong screen still shows up for a instant before moving to the right one (previous one)

...
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack';

const DrawerNavigator = createDrawerNavigator();
const rootStack = createStackNavigator();

...
drawerNavigator() {
 return (
  <DrawerNavigator.Navigator>
    <DrawerNavigator.Screen component={aNavigator} />
    <DrawerNavigator.Screen component={bNavigator} />
    ...
    <DrawerNavigator.Screen component={zNavigator} />
  </DrawerNavigator.Navigator>
)}

aNavigator() {
return (
  <ANavigator.Navigator>
    <ANavigator.Screen component={aScreen1} />
    ...
    <ANavigator.Screen component={aScreen10} />
  </ANavigator.Navigator>
)}

bNavigator() {
return (
  <ANavigator.Navigator>
    <ANavigator.Screen component={bScreen1} />
    ...
    <ANavigator.Screen component={bScreen10} />
  </ANavigator.Navigator>
)}


 <rootStack.Navigator initialRouteName="AuthNavigator" screenOptions={{ headerShown: false }}>
       <rootStack.Screen name="AuthNavigator" component={createAuthNavigator} />
       <rootStack.Screen name="DrawerNavigator" component={drawerNavigator} />
</rootStack.Navigator>

Ps: I am using all the latest versions of navigation packages

Upvotes: 1

Views: 2059

Answers (2)

Nizam Ozcan
Nizam Ozcan

Reputation: 1

The problem for me was that the go back animation was not working on iOS. Updating the react-native-gesture-handler package from 1.6.1 to 1.8.0 fixed the issue

Upvotes: 0

man517
man517

Reputation: 539

I had the same issue when I set animationEnabled: false, if you set it to true you should be able to swipe to switch screens.

Upvotes: 0

Related Questions