CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-native-gesture-handler
Abanoub Istfanous
Abanoub Istfanous

Reputation: 966

react-navigation enable swipe to back on android

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

Upvotes: 1

Views: 6136

Answers (2)

ShevO27
ShevO27

Reputation: 906

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.

Upvotes: 6

Ross Fine
Ross Fine

Reputation: 181

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

Upvotes: 4

Related Questions