'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 |