react-navigation enable swipe to back on android - react-native

Question

I have a stack navigation and I want to enable swipe to go back on both android and IOS
there is my code
import {
createStackNavigator,
StackViewTransitionConfigs,
} from "react-navigation-stack";
import HomeScreen from "../../screens/Home/Home";
import CategoryScreen from "../../screens/Category/Category";
import SubCategoryScreen from "../../screens/SubCategory/SubCategory";
import ProductScreen from "../../screens/Product/Product";
const ShopStack = createStackNavigator(
{
Shop: {
screen: HomeScreen,
navigationOptions: {
gesturesEnabled: true,
},
},
Category: {
screen: CategoryScreen,
navigationOptions: {
gesturesEnabled: true,
},
},
SubCategory: {
screen: SubCategoryScreen,
},
Product: {
screen: ProductScreen,
navigationOptions: {
gesturesEnabled: true,
},
},
},
{
headerMode: "none",
transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
defaultNavigationOptions: {
gesturesEnabled: true,
},
},
);
export default ShopStack;
the expected behavior is when swipe go back on android like ios
react-navigation version 4

Answer 1

As for v5, v6 there is an easier solution, just put those values to screenOptions in your Stack.Navigator
gestureDirection: 'horizontal',
gestureEnabled: true,
...
<Stack.Navigator
screenOptions={{
gestureDirection: 'horizontal',
gestureEnabled: true,
}}>
Those options will enable gestures on android, as well as direction will be 'horizontal' now, which is 'vertical' by default on android.

Answer 2

This is how I made it work, hope it works for you as well.
Couldn't have managed to get the same result on react-navigation 5
const AppStack = createStackNavigator({
FolderListScreen: {
screen: FolderListScreen,
navigationOptions: ({ navigation }) => ({
// title: 'This is title'
header: null
})
},
Edit: {
screen: EditScreen,
navigationOptions: ({ navigation }) => ({
header: null
})
},
FoldersListModal: {
screen: FoldersListModal
},
WebViewScreen: {
screen: WebViewScreen
},
},
// DOCUMENTATION
// https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig
{
headerMode: 'none',
mode: 'card',
defaultNavigationOptions: {
gesturesEnabled: true,
// if you want to change the back swipe width
//just put the number, e.g. 100 would be fine to get the iOS effect
gestureResponseDistance: {
horizontal: Dimensions.get('window').width
}
},
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
// const height = layout.initHeight;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [width, 0, 0],
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return { opacity, transform: [{ translateX }] };
},
})
});
Edit:
I made it work on v5 as well 💪
https://snack.expo.io/#ukiand1/react-navigation-5---android-swipe-back-bug