horizontal gestureDirection does not work for modal stack

[abegehr]

Current Behavior

navigationOptions: {gestureDirection: 'horizontal'} does not work for stack navigators with mode: 'modal'. Using gestureDirection: 'horizontal-inverted', leeds to a vertical-inverted gestureDirection.

See my current stack navigator setup here:

const MainModalNavigator = createStackNavigator(
  {
    Main: {screen: MainDrawerNavigator},
    Notifications: {
      screen: NotificationsScreen,
      navigationOptions: {gestureDirection: 'horizontal'},
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
    initialRouteName: 'Main',
    defaultNavigationOptions: {
      cardStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0)',
      },
    },
  },
);

Expected Behaviorx

Stack navigators with mode: 'modal' should allow horizontal gestureDirection.

How to reproduce

Find a minimal GH repo to reproduce the issue here: https://github.com/abegehr/react-navigation-horizontal-modal-stack
The repo is based on expo and can be run easily through the expo-cli.

The repo was produced by:

• expo init with react-navigation 'tabs' template
• removed unnecessary files and code
• simple Home, Links and Settings screen with rudimentary navigation between them
• use same navigation setup as described in 'Current Behavior'

=> Please let me know if this is helpful and if I can do anything else to make the issue more clear

Your Environment

• iOS 13.3
• "react-navigation": "^4.1.0",
• "react-navigation-stack": "^2.0.16",
• "react-native-gesture-handler": "^1.5.4",
• "react-native-safe-area-context": "^0.6.4",
• "react-native-screens": "^2.0.0-alpha.32",
• "react-native": "^0.61.5",
• Now using node v12.14.1 (npm v6.13.4)
• yarn 1.19.2

[satya164]

You're talking about the animation, not gesture. You need to use a horizontal animation if you want to see your screen slide horizontally.

[abegehr]

@satya164, thank you for the quick response!
The documentation states: "gestureDirection - The direction of swipe gestures as well as animations" https://reactnavigation.org/docs/en/stack-navigator.html#animation-related-options
Therefore, I assumed setting the gestureDirection would apply animations as well. I can confirm that the gesture direction for closing works as expected 👍
I will try to apply a horizontal animation aswell.

[satya164]

The direction of swipe gestures as well as animations

This is just referring to the "inverted" part. I'll clarify it.

[abegehr]

Thanks for pointing me in the right direction, @satya164!
I achieved the horizontal modal by adjusting the cardStyleInterpolator forHorizontaliOS to this:

export function forHorizontalModal({
  current,
  next,
  inverted,
  layouts: { screen }
}: StackCardInterpolationProps): StackCardInterpolatedStyle {
  const translateFocused = multiply(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [screen.width, 0],
      extrapolate: "clamp"
    }),
    inverted
  );

  const overlayOpacity = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 0.07],
    extrapolate: "clamp"
  });

  const shadowOpacity = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 0.3],
    extrapolate: "clamp"
  });

  return {
    cardStyle: {
      transform: [
        // Translation for the animation of the current card
        { translateX: translateFocused },
        // Translation for the animation of the card in back
        { translateX: 0 }
      ]
    },
    overlayStyle: { opacity: overlayOpacity },
    shadowStyle: { shadowOpacity }
  };
}

And applying it in the navgiationOptions:

Links: {
  screen: LinksScreen,
  navigationOptions: {
    gestureDirection: "horizontal",
    cardStyleInterpolator: forHorizontalModal
  }
},

[Jogre900]

excuse me but i got an error with the multiply variable, is not defined.

[enGMzizo]

@Jogre900

import {Animated} from 'react-native';
// then use it as 
Animated.multiply()