From ae56f9b673ce2bdc775afe3cee4bbdc2ea46ebdf Mon Sep 17 00:00:00 2001
From: WoLewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 5 Jan 2022 17:08:26 +0100
Subject: [PATCH 1/8] feat: add swipe direction on iOS

---
 TestsExample/App.js                        |  3 +-
 TestsExample/ios/Podfile.lock              |  4 +-
 TestsExample/src/Test1260.tsx              | 33 ++++++++++
 TestsExample/src/Test556.js                | 10 +--
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md        |  6 ++
 ios/RNSScreen.h                            |  6 ++
 ios/RNSScreen.m                            | 10 +++
 ios/RNSScreenStack.m                       | 76 +++++++++++++++++++---
 ios/RNSScreenStackAnimator.m               | 32 ++++++---
 native-stack/README.md                     |  6 ++
 src/native-stack/types.tsx                 |  8 +++
 src/native-stack/views/NativeStackView.tsx |  2 +
 src/types.tsx                              |  9 +++
 13 files changed, 180 insertions(+), 25 deletions(-)
 create mode 100644 TestsExample/src/Test1260.tsx

diff --git a/TestsExample/App.js b/TestsExample/App.js
index 01f7695342..1a8050ea54 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -73,13 +73,14 @@ import Test1209 from './src/Test1209';
 import Test1214 from './src/Test1214';
 import Test1227 from './src/Test1227';
 import Test1228 from './src/Test1228';
+import Test1260 from './src/Test1260';
 
 enableFreeze(true);
 
 export default function App() {
   return (
     <ReanimatedScreenProvider>
-      <Test42 />
+      <Test1260 />
     </ReanimatedScreenProvider>
   );
 }
diff --git a/TestsExample/ios/Podfile.lock b/TestsExample/ios/Podfile.lock
index b827ba79d2..f291f8dac9 100644
--- a/TestsExample/ios/Podfile.lock
+++ b/TestsExample/ios/Podfile.lock
@@ -376,7 +376,7 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.10.0):
+  - RNScreens (3.10.1):
     - React-Core
     - React-RCTImage
   - RNVectorIcons (7.1.0):
@@ -592,7 +592,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: b04ef2a4f0cb61b062bbcf033f84a9e470f4f60b
-  RNScreens: 03ba504f8c98607ad1f07808e71040e0afa335ec
+  RNScreens: 522705f2e5c9d27efb17f24aceb2bf8335bc7b8e
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
diff --git a/TestsExample/src/Test1260.tsx b/TestsExample/src/Test1260.tsx
new file mode 100644
index 0000000000..e130c84237
--- /dev/null
+++ b/TestsExample/src/Test1260.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {Button} from 'react-native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{fullScreenSwipeEnabled: true, swipeDirection: 'vertical', customAnimationOnSwipe: true, stackAnimation: 'slide_from_bottom'}}>
+        <Stack.Screen name="First" component={First} />
+        <Stack.Screen
+          name="Second"
+          component={Second}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+  return (
+    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+
+  );
+}
+
+function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+  return (
+    <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+  );
+}
diff --git a/TestsExample/src/Test556.js b/TestsExample/src/Test556.js
index 3987b5d3af..85c8350810 100644
--- a/TestsExample/src/Test556.js
+++ b/TestsExample/src/Test556.js
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator>
+      <Stack.Navigator screenOptions={{transitionDuration: 2.0, stackAnimation: 'simple_push'}}>
         <Stack.Screen name="First" component={First} />
         <Stack.Screen
           name="Second"
@@ -19,14 +19,14 @@ export default function App() {
   );
 }
 
-function First({navigation}) {
+function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
   return (
     <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
 
   );
 }
 
-function Second({navigation}) {
+function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
   return (
     <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
   );
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index 9d425a9123..68507a39f7 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -168,6 +168,12 @@ Defaults to `auto`.
 
 Sets the translucency of the status bar (similar to the `StatusBar` component). Defaults to `false`.
 
+#### `swipeDirection` (iOS only)
+
+Sets the direction in which you should swipe to dismiss the screen. The following values are supported:
+- `vertical` – dismiss screen vertically
+- `horizontal` – dismiss screen horizontally (default)
+
 #### `useTransitionProgress`
 
 Hook providing context value of transition progress of the current screen to be used with `react-native` `Animated`. It consists of 2 values:
diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
index 908fe6dfcb..9b5bfa2084 100644
--- a/ios/RNSScreen.h
+++ b/ios/RNSScreen.h
@@ -29,6 +29,11 @@ typedef NS_ENUM(NSInteger, RNSScreenReplaceAnimation) {
   RNSScreenReplaceAnimationPush,
 };
 
+typedef NS_ENUM(NSInteger, RNSScreenSwipeDirection) {
+  RNSScreenSwipeDirectionVertical,
+  RNSScreenSwipeDirectionHorizontal,
+};
+
 typedef NS_ENUM(NSInteger, RNSActivityState) {
   RNSActivityStateInactive = 0,
   RNSActivityStateTransitioningOrBelowTop = 1,
@@ -91,6 +96,7 @@ typedef NS_ENUM(NSInteger, RNSWindowTrait) {
 @property (nonatomic) RNSScreenStackAnimation stackAnimation;
 @property (nonatomic) RNSScreenStackPresentation stackPresentation;
 @property (nonatomic) RNSScreenReplaceAnimation replaceAnimation;
+@property (nonatomic) RNSScreenSwipeDirection swipeDirection;
 @property (nonatomic) BOOL preventNativeDismiss;
 @property (nonatomic) BOOL hasOrientationSet;
 @property (nonatomic) BOOL hasStatusBarStyleSet;
diff --git a/ios/RNSScreen.m b/ios/RNSScreen.m
index 0fbb86f88a..41a82d2c29 100644
--- a/ios/RNSScreen.m
+++ b/ios/RNSScreen.m
@@ -771,6 +771,7 @@ @implementation RNSScreenManager
 RCT_EXPORT_VIEW_PROPERTY(replaceAnimation, RNSScreenReplaceAnimation)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)
 RCT_EXPORT_VIEW_PROPERTY(stackAnimation, RNSScreenStackAnimation)
+RCT_EXPORT_VIEW_PROPERTY(swipeDirection, RNSScreenSwipeDirection)
 
 RCT_EXPORT_VIEW_PROPERTY(onAppear, RCTDirectEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(onDisappear, RCTDirectEventBlock);
@@ -835,6 +836,15 @@ @implementation RCTConvert (RNSScreen)
     RNSScreenReplaceAnimationPop,
     integerValue)
 
+RCT_ENUM_CONVERTER(
+    RNSScreenSwipeDirection,
+    (@{
+      @"vertical" : @(RNSScreenSwipeDirectionVertical),
+      @"horizontal" : @(RNSScreenSwipeDirectionHorizontal),
+    }),
+    RNSScreenSwipeDirectionHorizontal,
+    integerValue)
+
 #if !TARGET_OS_TV
 RCT_ENUM_CONVERTER(
     RNSStatusBarStyle,
diff --git a/ios/RNSScreenStack.m b/ios/RNSScreenStack.m
index ff138da80f..2a63bca02f 100644
--- a/ios/RNSScreenStack.m
+++ b/ios/RNSScreenStack.m
@@ -56,10 +56,16 @@ @interface RNSScreenEdgeGestureRecognizer : UIScreenEdgePanGestureRecognizer
 @implementation RNSScreenEdgeGestureRecognizer
 @end
 
-@interface RNSPanGestureRecognizer : UIPanGestureRecognizer
+@interface RNSPanGestureRecognizerVertical : UIPanGestureRecognizer
 @end
 
-@implementation RNSPanGestureRecognizer
+@interface RNSPanGestureRecognizerHorizontal : UIPanGestureRecognizer
+@end
+
+@implementation RNSPanGestureRecognizerVertical
+@end
+
+@implementation RNSPanGestureRecognizerHorizontal
 @end
 #endif
 
@@ -584,7 +590,10 @@ - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
   if (topScreen.fullScreenSwipeEnabled) {
     // we want only `RNSPanGestureRecognizer` to be able to recognize when
     // `fullScreenSwipeEnabled` is set
-    if ([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizer class]]) {
+    if (([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerHorizontal class]] &&
+         topScreen.swipeDirection == RNSScreenSwipeDirectionHorizontal) ||
+        ([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerVertical class]] &&
+         topScreen.swipeDirection == RNSScreenSwipeDirectionVertical)) {
       _isFullWidthSwiping = YES;
       [self cancelTouchesInParent];
       return YES;
@@ -610,7 +619,9 @@ - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
     if ([gestureRecognizer isKindOfClass:[RNSScreenEdgeGestureRecognizer class]]) {
       // it should only recognize with `customAnimationOnSwipe` set
       return NO;
-    } else if ([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizer class]]) {
+    } else if (
+        [gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerHorizontal class]] ||
+        [gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerVertical class]]) {
       // it should only recognize with `fullScreenSwipeEnabled` set
       return NO;
     }
@@ -636,11 +647,16 @@ - (void)setupGestureHandlers
   rightEdgeSwipeGestureRecognizer.delegate = self;
   [self addGestureRecognizer:rightEdgeSwipeGestureRecognizer];
 
-  // gesture recognizer for full width swipe gesture
-  RNSPanGestureRecognizer *panRecognizer = [[RNSPanGestureRecognizer alloc] initWithTarget:self
-                                                                                    action:@selector(handleSwipe:)];
-  panRecognizer.delegate = self;
-  [self addGestureRecognizer:panRecognizer];
+  // gesture recognizers for full width swipe gesture
+  RNSPanGestureRecognizerHorizontal *panRecognizerHorizontal =
+      [[RNSPanGestureRecognizerHorizontal alloc] initWithTarget:self action:@selector(handleSwipe:)];
+  RNSPanGestureRecognizerVertical *panRecognizerVertical =
+      [[RNSPanGestureRecognizerVertical alloc] initWithTarget:self action:@selector(handleSwipeVertical:)];
+
+  panRecognizerHorizontal.delegate = self;
+  [self addGestureRecognizer:panRecognizerHorizontal];
+  panRecognizerVertical.delegate = self;
+  [self addGestureRecognizer:panRecognizerVertical];
 }
 
 - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
@@ -689,6 +705,48 @@ - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
     }
   }
 }
+
+- (void)handleSwipeVertical:(UIPanGestureRecognizer *)gestureRecognizer
+{
+  float translation = [gestureRecognizer translationInView:gestureRecognizer.view].y;
+  float velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].y;
+  float distance = gestureRecognizer.view.bounds.size.height;
+
+  float transitionProgress = (translation / distance);
+
+  switch (gestureRecognizer.state) {
+    case UIGestureRecognizerStateBegan: {
+      _interactionController = [UIPercentDrivenInteractiveTransition new];
+      [_controller popViewControllerAnimated:YES];
+      break;
+    }
+
+    case UIGestureRecognizerStateChanged: {
+      [_interactionController updateInteractiveTransition:transitionProgress];
+      break;
+    }
+
+    case UIGestureRecognizerStateCancelled: {
+      [_interactionController cancelInteractiveTransition];
+      break;
+    }
+
+    case UIGestureRecognizerStateEnded: {
+      // values taken from
+      // https://github.com/react-navigation/react-navigation/blob/54739828598d7072c1bf7b369659e3682db3edc5/packages/stack/src/views/Stack/Card.tsx#L316
+      BOOL shouldFinishTransition = (translation + velocity * 0.3) > (distance / 2);
+      if (shouldFinishTransition) {
+        [_interactionController finishInteractiveTransition];
+      } else {
+        [_interactionController cancelInteractiveTransition];
+      }
+      _interactionController = nil;
+    }
+    default: {
+      break;
+    }
+  }
+}
 #endif
 
 - (id<UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
diff --git a/ios/RNSScreenStackAnimator.m b/ios/RNSScreenStackAnimator.m
index 1b6efdbc0e..7f502939fd 100644
--- a/ios/RNSScreenStackAnimator.m
+++ b/ios/RNSScreenStackAnimator.m
@@ -184,14 +184,30 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = CGAffineTransformIdentity;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
-    [UIView animateWithDuration:[self transitionDuration:transitionContext]
-        animations:^{
-          toViewController.view.transform = CGAffineTransformIdentity;
-          fromViewController.view.transform = topBottomTransform;
-        }
-        completion:^(BOOL finished) {
-          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
-        }];
+
+    void (^animationBlock)(void) = ^{
+      toViewController.view.transform = CGAffineTransformIdentity;
+      fromViewController.view.transform = topBottomTransform;
+    };
+    void (^completionBlock)(BOOL) = ^(BOOL finished) {
+      if (transitionContext.transitionWasCancelled) {
+        toViewController.view.transform = CGAffineTransformIdentity;
+      }
+      [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
+    };
+
+    if (!transitionContext.isInteractive) {
+      [UIView animateWithDuration:[self transitionDuration:transitionContext]
+                       animations:animationBlock
+                       completion:completionBlock];
+    } else {
+      // we don't want the EaseInOut option when swiping to dismiss the view, it is the same in default animation option
+      [UIView animateWithDuration:[self transitionDuration:transitionContext]
+                            delay:0.0
+                          options:UIViewAnimationOptionCurveLinear
+                       animations:animationBlock
+                       completion:completionBlock];
+    }
   }
 }
 
diff --git a/native-stack/README.md b/native-stack/README.md
index 8c4b66f142..4a6ab0c000 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -230,6 +230,12 @@ Defaults to `push`.
 
 Using `containedModal` and `containedTransparentModal` with other types of modals in one native stack navigator is not recommended and can result in a freeze or a crash of the application.
 
+#### `swipeDirection` (iOS only)
+
+Sets the direction in which you should swipe to dismiss the screen. The following values are supported:
+- `vertical` – dismiss screen vertically
+- `horizontal` – dismiss screen horizontally (default)
+
 #### `title`
 
 A string that can be used as a fallback for `headerTitle`.
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index f31b40abe4..f306ba937f 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -325,6 +325,14 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Sets the direction in which you should swipe to dismiss the screen.
+   * The following values are supported:
+   * - `vertical` – dismiss screen vertically
+   * - `horizontal` – dismiss screen horizontally (default)
+   * @platform ios
+   */
+  swipeDirection?: ScreenProps['swipeDirection'];
   /**
    * String that can be displayed in the header as a fallback for `headerTitle`.
    */
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index 123c815fcb..267b70f4b6 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -162,6 +162,7 @@ const RouteView = ({
     statusBarHidden,
     statusBarStyle,
     statusBarTranslucent,
+    swipeDirection = 'horizontal',
   } = options;
 
   let { stackPresentation = 'push' } = options;
@@ -205,6 +206,7 @@ const RouteView = ({
       statusBarHidden={statusBarHidden}
       statusBarStyle={statusBarStyle}
       statusBarTranslucent={statusBarTranslucent}
+      swipeDirection={swipeDirection}
       onHeaderBackButtonClicked={() => {
         navigation.dispatch({
           ...StackActions.pop(),
diff --git a/src/types.tsx b/src/types.tsx
index 253489619f..199d6a54e6 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -47,6 +47,7 @@ export type BlurEffectTypes =
   | 'systemThickMaterialDark'
   | 'systemChromeMaterialDark';
 export type ScreenReplaceTypes = 'push' | 'pop';
+export type SwipeDirectionTypes = 'vertical' | 'horizontal';
 export type ScreenOrientationTypes =
   | 'default'
   | 'all'
@@ -214,6 +215,14 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Sets the direction in which you should swipe to dismiss the screen.
+   * The following values are supported:
+   * - `vertical` – dismiss screen vertically
+   * - `horizontal` – dismiss screen horizontally (default)
+   * @platform ios
+   */
+  swipeDirection?: SwipeDirectionTypes;
 }
 
 export interface ScreenContainerProps extends ViewProps {

From 2be6743ffd6b99dae86d0718e463e4298e3e2a5d Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 5 Jan 2022 17:13:54 +0100
Subject: [PATCH 2/8] Update TestsExample/App.js

---
 TestsExample/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TestsExample/App.js b/TestsExample/App.js
index 1a8050ea54..34ee4069fd 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -80,7 +80,7 @@ enableFreeze(true);
 export default function App() {
   return (
     <ReanimatedScreenProvider>
-      <Test1260 />
+      <Test42 />
     </ReanimatedScreenProvider>
   );
 }

From a3fdbd1d3c09823e87ce4956c348b58d4b8015e9 Mon Sep 17 00:00:00 2001
From: WoLewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 5 Jan 2022 17:47:25 +0100
Subject: [PATCH 3/8] fix: revert changes in 556

---
 TestsExample/src/Test556.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TestsExample/src/Test556.js b/TestsExample/src/Test556.js
index 85c8350810..3987b5d3af 100644
--- a/TestsExample/src/Test556.js
+++ b/TestsExample/src/Test556.js
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{transitionDuration: 2.0, stackAnimation: 'simple_push'}}>
+      <Stack.Navigator>
         <Stack.Screen name="First" component={First} />
         <Stack.Screen
           name="Second"
@@ -19,14 +19,14 @@ export default function App() {
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({navigation}) {
   return (
     <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
 
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Second({navigation}) {
   return (
     <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
   );

From 45a1b09db8f0c0db0994944a1fd419865bf98f4d Mon Sep 17 00:00:00 2001
From: WoLewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 26 Jan 2022 12:59:22 +0100
Subject: [PATCH 4/8] fix: apply needed changes by default

---
 TestsExample/src/Test1260.tsx              |  2 +-
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md        |  2 ++
 native-stack/README.md                     |  2 ++
 src/native-stack/types.tsx                 |  1 +
 src/native-stack/views/NativeStackView.tsx | 27 ++++++++++++++++++----
 src/types.tsx                              |  1 +
 6 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/TestsExample/src/Test1260.tsx b/TestsExample/src/Test1260.tsx
index e130c84237..5843ad92f2 100644
--- a/TestsExample/src/Test1260.tsx
+++ b/TestsExample/src/Test1260.tsx
@@ -8,7 +8,7 @@ const Stack = createNativeStackNavigator();
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{fullScreenSwipeEnabled: true, swipeDirection: 'vertical', customAnimationOnSwipe: true, stackAnimation: 'slide_from_bottom'}}>
+      <Stack.Navigator screenOptions={{swipeDirection: 'vertical'}}>
         <Stack.Screen name="First" component={First} />
         <Stack.Screen
           name="Second"
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index 68507a39f7..d9d8549ac3 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -174,6 +174,8 @@ Sets the direction in which you should swipe to dismiss the screen. The followin
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
+When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
+
 #### `useTransitionProgress`
 
 Hook providing context value of transition progress of the current screen to be used with `react-native` `Animated`. It consists of 2 values:
diff --git a/native-stack/README.md b/native-stack/README.md
index 4a6ab0c000..9133cad2ea 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -236,6 +236,8 @@ Sets the direction in which you should swipe to dismiss the screen. The followin
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
+When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
+
 #### `title`
 
 A string that can be used as a fallback for `headerTitle`.
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index f306ba937f..02b0b91a64 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -327,6 +327,7 @@ export type NativeStackNavigationOptions = {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
+   * When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
    * The following values are supported:
    * - `vertical` – dismiss screen vertically
    * - `horizontal` – dismiss screen horizontally (default)
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index 267b70f4b6..b0e52d3b94 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -149,14 +149,11 @@ const RouteView = ({
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
   const {
-    customAnimationOnSwipe,
-    fullScreenSwipeEnabled,
     gestureEnabled,
     headerShown,
     nativeBackButtonDismissalEnabled = false,
     replaceAnimation = 'pop',
     screenOrientation,
-    stackAnimation,
     statusBarAnimation,
     statusBarColor,
     statusBarHidden,
@@ -165,7 +162,29 @@ const RouteView = ({
     swipeDirection = 'horizontal',
   } = options;
 
-  let { stackPresentation = 'push' } = options;
+  let {
+    customAnimationOnSwipe,
+    fullScreenSwipeEnabled,
+    stackAnimation,
+    stackPresentation = 'push',
+  } = options;
+
+  if (swipeDirection === 'vertical') {
+    // for `vertical` direction to work, we need to set `fullScreenSwipeEnabled` to `true`
+    // so the screen can be dismissed from any point on screen.
+    // `customAnimationOnSwipe` needs to be set to `true` so the `stackAnimation` set by user can be used,
+    // otherwise `simple_push` will be used.
+    // Also, the default animation for this direction seems to be `slide_from_bottom`.
+    if (fullScreenSwipeEnabled === undefined) {
+      fullScreenSwipeEnabled = true;
+    }
+    if (customAnimationOnSwipe === undefined) {
+      customAnimationOnSwipe = true;
+    }
+    if (stackAnimation === undefined) {
+      stackAnimation = 'slide_from_bottom';
+    }
+  }
 
   if (index === 0) {
     // first screen should always be treated as `push`, it resolves problems with no header animation
diff --git a/src/types.tsx b/src/types.tsx
index 199d6a54e6..68b1a34258 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -217,6 +217,7 @@ export interface ScreenProps extends ViewProps {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
+   * When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
    * The following values are supported:
    * - `vertical` – dismiss screen vertically
    * - `horizontal` – dismiss screen horizontally (default)

From 918dd9606a4f67a5fb2cfd337dd37c0b1c96e249 Mon Sep 17 00:00:00 2001
From: WoLewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 26 Jan 2022 13:03:05 +0100
Subject: [PATCH 5/8] fix: change will to should for non native-stack

---
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 2 +-
 src/types.tsx                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index d9d8549ac3..ecb03b607b 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -174,7 +174,7 @@ Sets the direction in which you should swipe to dismiss the screen. The followin
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
-When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
+When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` should be set by default.
 
 #### `useTransitionProgress`
 
diff --git a/src/types.tsx b/src/types.tsx
index 68b1a34258..0fa382e782 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -217,7 +217,7 @@ export interface ScreenProps extends ViewProps {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
-   * When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
+   * When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` should be set by default.
    * The following values are supported:
    * - `vertical` – dismiss screen vertically
    * - `horizontal` – dismiss screen horizontally (default)

From eed482e364980d028bb695f920e0852546915fc9 Mon Sep 17 00:00:00 2001
From: WoLewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 2 Feb 2022 13:17:09 +0100
Subject: [PATCH 6/8] fix: dont introduce new recognizers

---
 TestsExample/src/Test1260.tsx | 10 ++--
 ios/RNSScreenStack.m          | 98 +++++++++--------------------------
 2 files changed, 32 insertions(+), 76 deletions(-)

diff --git a/TestsExample/src/Test1260.tsx b/TestsExample/src/Test1260.tsx
index 5843ad92f2..a98cc7c965 100644
--- a/TestsExample/src/Test1260.tsx
+++ b/TestsExample/src/Test1260.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Button} from 'react-native';
+import {Button, View} from 'react-native';
 import {NavigationContainer, ParamListBase} from '@react-navigation/native';
 import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
 
@@ -21,13 +21,17 @@ export default function App() {
 
 function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{flex: 1, backgroundColor: 'red'}}>
+      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    </View>
 
   );
 }
 
 function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    <View style={{flex: 1, backgroundColor: 'blue'}}>
+      <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    </View>
   );
 }
diff --git a/ios/RNSScreenStack.m b/ios/RNSScreenStack.m
index 2a63bca02f..0c60130954 100644
--- a/ios/RNSScreenStack.m
+++ b/ios/RNSScreenStack.m
@@ -56,16 +56,10 @@ @interface RNSScreenEdgeGestureRecognizer : UIScreenEdgePanGestureRecognizer
 @implementation RNSScreenEdgeGestureRecognizer
 @end
 
-@interface RNSPanGestureRecognizerVertical : UIPanGestureRecognizer
+@interface RNSPanGestureRecognizer : UIPanGestureRecognizer
 @end
 
-@interface RNSPanGestureRecognizerHorizontal : UIPanGestureRecognizer
-@end
-
-@implementation RNSPanGestureRecognizerVertical
-@end
-
-@implementation RNSPanGestureRecognizerHorizontal
+@implementation RNSPanGestureRecognizer
 @end
 #endif
 
@@ -590,10 +584,7 @@ - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
   if (topScreen.fullScreenSwipeEnabled) {
     // we want only `RNSPanGestureRecognizer` to be able to recognize when
     // `fullScreenSwipeEnabled` is set
-    if (([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerHorizontal class]] &&
-         topScreen.swipeDirection == RNSScreenSwipeDirectionHorizontal) ||
-        ([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerVertical class]] &&
-         topScreen.swipeDirection == RNSScreenSwipeDirectionVertical)) {
+    if ([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizer class]]) {
       _isFullWidthSwiping = YES;
       [self cancelTouchesInParent];
       return YES;
@@ -619,9 +610,7 @@ - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
     if ([gestureRecognizer isKindOfClass:[RNSScreenEdgeGestureRecognizer class]]) {
       // it should only recognize with `customAnimationOnSwipe` set
       return NO;
-    } else if (
-        [gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerHorizontal class]] ||
-        [gestureRecognizer isKindOfClass:[RNSPanGestureRecognizerVertical class]]) {
+    } else if ([gestureRecognizer isKindOfClass:[RNSPanGestureRecognizer class]]) {
       // it should only recognize with `fullScreenSwipeEnabled` set
       return NO;
     }
@@ -647,70 +636,33 @@ - (void)setupGestureHandlers
   rightEdgeSwipeGestureRecognizer.delegate = self;
   [self addGestureRecognizer:rightEdgeSwipeGestureRecognizer];
 
-  // gesture recognizers for full width swipe gesture
-  RNSPanGestureRecognizerHorizontal *panRecognizerHorizontal =
-      [[RNSPanGestureRecognizerHorizontal alloc] initWithTarget:self action:@selector(handleSwipe:)];
-  RNSPanGestureRecognizerVertical *panRecognizerVertical =
-      [[RNSPanGestureRecognizerVertical alloc] initWithTarget:self action:@selector(handleSwipeVertical:)];
-
-  panRecognizerHorizontal.delegate = self;
-  [self addGestureRecognizer:panRecognizerHorizontal];
-  panRecognizerVertical.delegate = self;
-  [self addGestureRecognizer:panRecognizerVertical];
+  // gesture recognizer for full width swipe gesture
+  RNSPanGestureRecognizer *panRecognizer = [[RNSPanGestureRecognizer alloc] initWithTarget:self
+                                                                                    action:@selector(handleSwipe:)];
+  panRecognizer.delegate = self;
+  [self addGestureRecognizer:panRecognizer];
 }
 
 - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
 {
-  float translation = [gestureRecognizer translationInView:gestureRecognizer.view].x;
-  float velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].x;
-  float distance = gestureRecognizer.view.bounds.size.width;
-  BOOL isRTL = _controller.view.semanticContentAttribute == UISemanticContentAttributeForceRightToLeft;
-  if (isRTL) {
-    translation = -translation;
-    velocity = -velocity;
-  }
-
-  float transitionProgress = (translation / distance);
-
-  switch (gestureRecognizer.state) {
-    case UIGestureRecognizerStateBegan: {
-      _interactionController = [UIPercentDrivenInteractiveTransition new];
-      [_controller popViewControllerAnimated:YES];
-      break;
-    }
-
-    case UIGestureRecognizerStateChanged: {
-      [_interactionController updateInteractiveTransition:transitionProgress];
-      break;
-    }
-
-    case UIGestureRecognizerStateCancelled: {
-      [_interactionController cancelInteractiveTransition];
-      break;
-    }
-
-    case UIGestureRecognizerStateEnded: {
-      // values taken from
-      // https://github.com/react-navigation/react-navigation/blob/54739828598d7072c1bf7b369659e3682db3edc5/packages/stack/src/views/Stack/Card.tsx#L316
-      BOOL shouldFinishTransition = (translation + velocity * 0.3) > (distance / 2);
-      if (shouldFinishTransition) {
-        [_interactionController finishInteractiveTransition];
-      } else {
-        [_interactionController cancelInteractiveTransition];
-      }
-      _interactionController = nil;
-    }
-    default: {
-      break;
+  RNSScreenView *topScreen = (RNSScreenView *)_controller.viewControllers.lastObject.view;
+  float translation;
+  float velocity;
+  float distance;
+  if (topScreen.swipeDirection == RNSScreenSwipeDirectionVertical) {
+    translation = [gestureRecognizer translationInView:gestureRecognizer.view].y;
+    velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].y;
+    distance = gestureRecognizer.view.bounds.size.height;
+  } else {
+    translation = [gestureRecognizer translationInView:gestureRecognizer.view].x;
+    velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].x;
+    distance = gestureRecognizer.view.bounds.size.width;
+    BOOL isRTL = _controller.view.semanticContentAttribute == UISemanticContentAttributeForceRightToLeft;
+    if (isRTL) {
+      translation = -translation;
+      velocity = -velocity;
     }
   }
-}
-
-- (void)handleSwipeVertical:(UIPanGestureRecognizer *)gestureRecognizer
-{
-  float translation = [gestureRecognizer translationInView:gestureRecognizer.view].y;
-  float velocity = [gestureRecognizer velocityInView:gestureRecognizer.view].y;
-  float distance = gestureRecognizer.view.bounds.size.height;
 
   float transitionProgress = (translation / distance);
 

From 8143f76be50689ace3a01db59c95ab58a93f7fc0 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 7 Feb 2022 16:35:07 +0100
Subject: [PATCH 7/8] docs: wording

---
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md | 2 +-
 native-stack/README.md              | 2 +-
 src/native-stack/types.tsx          | 2 +-
 src/types.tsx                       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index 85c0b4565f..f49a25ca75 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -186,7 +186,7 @@ Sets the direction in which you should swipe to dismiss the screen. The followin
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
-When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` should be set by default.
+When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
 ### `transitionDuration` (iOS only)
 
 Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
diff --git a/native-stack/README.md b/native-stack/README.md
index f7012a2edc..9b9469fa1b 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -248,7 +248,7 @@ Sets the direction in which you should swipe to dismiss the screen. The followin
 - `vertical` – dismiss screen vertically
 - `horizontal` – dismiss screen horizontally (default)
 
-When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
+When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
 
 #### `title`
 
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index 3f6039473c..4e32849d30 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -345,7 +345,7 @@ export type NativeStackNavigationOptions = {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
-   * When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` will be set by default.
+   * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
    * The following values are supported:
    * - `vertical` – dismiss screen vertically
    * - `horizontal` – dismiss screen horizontally (default)
diff --git a/src/types.tsx b/src/types.tsx
index 9c107b3481..fa12e038c2 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -235,7 +235,7 @@ export interface ScreenProps extends ViewProps {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
-   * When using `vertical` option, `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` should be set by default.
+   * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
    * The following values are supported:
    * - `vertical` – dismiss screen vertically
    * - `horizontal` – dismiss screen horizontally (default)

From 892c9a5c6040c446323bd78aa2ed8f79b54819a8 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 7 Feb 2022 16:44:29 +0100
Subject: [PATCH 8/8] fix: post merge conflict issues

---
 guides/GUIDE_FOR_LIBRARY_AUTHORS.md        | 1 +
 src/native-stack/views/NativeStackView.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
index f49a25ca75..755fc4bfc3 100644
--- a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
+++ b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -187,6 +187,7 @@ Sets the direction in which you should swipe to dismiss the screen. The followin
 - `horizontal` – dismiss screen horizontally (default)
 
 When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+
 ### `transitionDuration` (iOS only)
 
 Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
index c4dafc46a2..2d43f13e86 100644
--- a/src/native-stack/views/NativeStackView.tsx
+++ b/src/native-stack/views/NativeStackView.tsx
@@ -163,6 +163,7 @@ const RouteView = ({
     statusBarStyle,
     statusBarTranslucent,
     swipeDirection = 'horizontal',
+    transitionDuration,
   } = options;
 
   let {
@@ -170,7 +171,6 @@ const RouteView = ({
     fullScreenSwipeEnabled,
     stackAnimation,
     stackPresentation = 'push',
-    transitionDuration,
   } = options;
 
   if (swipeDirection === 'vertical') {