'react-navigation swipe to go back doesn't trigger

I am using stack navigation and I want to use swipe to go back. However, even when I swipe the screen all the way to the right the app doesn't navigate to the previous screen and the screen slides back.

import { View } from 'react-native';
import Main from './components/Main'
import Options from './components/Options'
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <View>
        <Stack.Navigator initialRouteName="Main" screenOptions={{ gestureResponseDistance: {horizontal: 20}}}>
          <Stack.Screen name="MainScreen" component={Main} options={{ headerShown: false }}/>
          <Stack.Screen name="OptionsScreen" component={Options} options={{ headerShown: false }}/>
        </Stack.Navigator>
      </View>
    </NavigationContainer>
  );
}

To be clear I am able to swipe the screen but once I let go of my finger the screen slides back to its initial position and I am not able trigger swipe to go back no matter how fast I swipe.



Solution 1:[1]

After experiencing the same problem, I found out that the problem was a useEffect that was being triggered over and over.

UseEffect(() => { *code here* })

changed to:

UseEffect(() => { *code here* }, [])

Solution 2:[2]

try gestureEnabled: true in option of stack because this props enable back swipe

export default function App() {

  return (
    <NavigationContainer>
      <View>
        <Stack.Navigator initialRouteName="Main" screenOptions={{ gestureResponseDistance: {horizontal: 20}}}>
          <Stack.Screen name="MainScreen" component={Main} options={{ headerShown: false,gestureEnabled: true }}/>
          <Stack.Screen name="OptionsScreen" component={Options} options={{ headerShown: false,gestureEnabled: true }}/>
        </Stack.Navigator>
      </View>
    </NavigationContainer>
  );
}

Solution 3:[3]

Try detachPreviousScreen: false in options of Stack Screen with gestureEnabled: true for ios if screen freezes on swipe back.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hamabs
Solution 2 Mahesh Dangar
Solution 3 Raghav Bansal