refactor: rename direction to gestureDirection

packages/stack/src/TransitionConfigs/TransitionPresets.tsx

@@ -19,7 +19,7 @@ const ANDROID_VERSION_PIE = 28;
 
 // Standard iOS navigation transition
 export const SlideFromRightIOS: TransitionPreset = {
-  direction: 'horizontal',
+  gestureDirection: 'horizontal',
   transitionSpec: {
     open: TransitionIOSSpec,
     close: TransitionIOSSpec,
@@ -30,7 +30,7 @@ export const SlideFromRightIOS: TransitionPreset = {
 
 // Standard iOS navigation transition for modals
 export const ModalSlideFromBottomIOS: TransitionPreset = {
-  direction: 'vertical',
+  gestureDirection: 'vertical',
   transitionSpec: {
     open: TransitionIOSSpec,
     close: TransitionIOSSpec,
@@ -41,7 +41,7 @@ export const ModalSlideFromBottomIOS: TransitionPreset = {
 
 // Standard iOS modal presentation style (introduced in iOS 13)
 export const ModalPresentationIOS: TransitionPreset = {
-  direction: 'vertical',
+  gestureDirection: 'vertical',
   transitionSpec: {
     open: TransitionIOSSpec,
     close: TransitionIOSSpec,
@@ -52,7 +52,7 @@ export const ModalPresentationIOS: TransitionPreset = {
 
 // Standard Android navigation transition when opening or closing an Activity on Android < 9
 export const FadeFromBottomAndroid: TransitionPreset = {
-  direction: 'vertical',
+  gestureDirection: 'vertical',
   transitionSpec: {
     open: FadeInFromBottomAndroidSpec,
     close: FadeOutToBottomAndroidSpec,
@@ -63,7 +63,7 @@ export const FadeFromBottomAndroid: TransitionPreset = {
 
 // Standard Android navigation transition when opening or closing an Activity on Android >= 9
 export const RevealFromBottomAndroid: TransitionPreset = {
-  direction: 'vertical',
+  gestureDirection: 'vertical',
   transitionSpec: {
     open: RevealFromBottomAndroidSpec,
     close: RevealFromBottomAndroidSpec,

packages/stack/src/types.tsx

@@ -212,7 +212,7 @@ export type HeaderStyleInterpolator = (
 ) => HeaderInterpolatedStyle;
 
 export type TransitionPreset = {
-  direction: GestureDirection;
+  gestureDirection: GestureDirection;
   transitionSpec: {
     open: TransitionSpec;
     close: TransitionSpec;

packages/stack/src/views/Stack/Card.tsx

@@ -26,7 +26,7 @@ type Props = ViewProps & {
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
   layout: Layout;
-  direction: 'horizontal' | 'vertical';
+  gestureDirection: 'horizontal' | 'vertical';
   onOpen: (isFinished: boolean) => void;
   onClose: (isFinished: boolean) => void;
   onTransitionStart?: (props: { closing: boolean }) => void;
@@ -102,7 +102,7 @@ export default class Card extends React.Component<Props> {
   };
 
   componentDidUpdate(prevProps: Props) {
-    const { layout, direction, closing } = this.props;
+    const { layout, gestureDirection, closing } = this.props;
     const { width, height } = layout;
 
     if (width !== prevProps.layout.width) {
@@ -113,9 +113,11 @@ export default class Card extends React.Component<Props> {
       this.layout.height.setValue(height);
     }
 
-    if (direction !== prevProps.direction) {
+    if (gestureDirection !== prevProps.gestureDirection) {
       this.direction.setValue(
-        direction === 'vertical' ? DIRECTION_VERTICAL : DIRECTION_HORIZONTAL
+        gestureDirection === 'vertical'
+          ? DIRECTION_VERTICAL
+          : DIRECTION_HORIZONTAL
       );
     }
 
@@ -133,7 +135,7 @@ export default class Card extends React.Component<Props> {
   private clock = new Clock();
 
   private direction = new Value(
-    this.props.direction === 'vertical'
+    this.props.gestureDirection === 'vertical'
       ? DIRECTION_VERTICAL
       : DIRECTION_HORIZONTAL
   );
@@ -424,17 +426,17 @@ export default class Card extends React.Component<Props> {
   );
 
   private gestureActivationCriteria() {
-    const { layout, direction, gestureResponseDistance } = this.props;
+    const { layout, gestureDirection, gestureResponseDistance } = this.props;
 
     // Doesn't make sense for a response distance of 0, so this works fine
     const distance =
-      direction === 'vertical'
+      gestureDirection === 'vertical'
         ? (gestureResponseDistance && gestureResponseDistance.vertical) ||
           GESTURE_RESPONSE_DISTANCE_VERTICAL
         : (gestureResponseDistance && gestureResponseDistance.horizontal) ||
           GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
 
-    if (direction === 'vertical') {
+    if (gestureDirection === 'vertical') {
       return {
         maxDeltaX: 15,
         minOffsetY: 5,
@@ -469,10 +471,10 @@ export default class Card extends React.Component<Props> {
       layout,
       current,
       next,
-      direction,
       overlayEnabled,
       shadowEnabled,
       gesturesEnabled,
+      gestureDirection,
       children,
       styleInterpolator,
       containerStyle: customContainerStyle,
@@ -494,7 +496,7 @@ export default class Card extends React.Component<Props> {
     );
 
     const handleGestureEvent =
-      direction === 'vertical'
+      gestureDirection === 'vertical'
         ? this.handleGestureEventVertical
         : this.handleGestureEventHorizontal;
 
@@ -524,7 +526,7 @@ export default class Card extends React.Component<Props> {
                   <Animated.View
                     style={[
                       styles.shadow,
-                      direction === 'horizontal'
+                      gestureDirection === 'horizontal'
                         ? styles.shadowHorizontal
                         : styles.shadowVertical,
                       shadowStyle,

packages/stack/src/views/Stack/Stack.tsx

@@ -344,7 +344,7 @@ export default class Stack extends React.Component<Props, State> {
               cardOverlayEnabled,
               cardStyle,
               gestureResponseDistance,
-              direction = defaultTransitionPreset.direction,
+              gestureDirection = defaultTransitionPreset.gestureDirection,
               transitionSpec = defaultTransitionPreset.transitionSpec,
               cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
               headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
@@ -389,7 +389,7 @@ export default class Stack extends React.Component<Props, State> {
                   onTransitionStart={this.handleTransitionStart}
                   onTransitionEnd={this.handleTransitionEnd}
                   onGoBack={onGoBack}
-                  direction={direction}
+                  gestureDirection={gestureDirection}
                   transitionSpec={transitionSpec}
                   cardStyleInterpolator={cardStyleInterpolator}
                   headerStyleInterpolator={headerStyleInterpolator}

packages/stack/src/views/Stack/StackItem.tsx

@@ -107,7 +107,7 @@ export default class StackItem extends React.PureComponent<Props> {
       headerTransparent,
       renderHeader,
       renderScene,
-      direction,
+      gestureDirection,
       transitionSpec,
       cardStyleInterpolator,
       headerStyleInterpolator,
@@ -118,7 +118,7 @@ export default class StackItem extends React.PureComponent<Props> {
         index={index}
         active={active}
         transparent={cardTransparent}
-        direction={direction}
+        gestureDirection={gestureDirection}
         layout={layout}
         current={current}
         next={scene.progress.next}