feat(iOS): add shadow to custom push pop transitions

apps/test-examples/src/Test2227.tsx

@@ -48,6 +48,7 @@ export default function App() {
       <Stack.Navigator
         screenOptions={{
           fullScreenGestureEnabled: true,
+          fullScreenGestureShadowEnabled: true,
         }}>
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Details" component={DetailsScreen} />

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -50,6 +50,12 @@ Defaults to `false`. When `enableFreeze()` is run at the top of the application
 
 Boolean indicating whether the swipe gesture should work on whole screen. Swiping with this option results in the same transition animation as `simple_push` by default. It can be changed to other custom animations with `customAnimationOnSwipe` prop, but default iOS swipe animation is not achievable due to usage of custom recognizer. Defaults to `false`.
 
+### `fullScreenSwipeShadowEnabled` (iOS only)
+
+Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+doesn't have a shadow by default. When enabled a custom shadow view is added during the transition which tries to mimick the
+default iOS shadow. Defaults to `false`.
+
 ### `gestureEnabled` (iOS only)
 
 When set to `false` the back swipe gesture will be disabled. The default value is `true`.

ios/RNSScreen.h

@@ -56,6 +56,7 @@ namespace react = facebook::react;
 #endif
 
 @property (nonatomic) BOOL fullScreenSwipeEnabled;
+@property (nonatomic) BOOL fullScreenSwipeShadowEnabled;
 @property (nonatomic) BOOL gestureEnabled;
 @property (nonatomic) BOOL hasStatusBarHiddenSet;
 @property (nonatomic) BOOL hasStatusBarStyleSet;

ios/RNSScreen.mm

@@ -703,6 +703,8 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
 
   [self setFullScreenSwipeEnabled:newScreenProps.fullScreenSwipeEnabled];
 
+  [self setFullScreenSwipeShadowEnabled:newScreenProps.fullScreenSwipeShadowEnabled];
+
   [self setGestureEnabled:newScreenProps.gestureEnabled];
 
   [self setTransitionDuration:[NSNumber numberWithInt:newScreenProps.transitionDuration]];
@@ -1427,6 +1429,7 @@ @implementation RNSScreenManager
 RCT_REMAP_VIEW_PROPERTY(activityState, activityStateOrNil, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(customAnimationOnSwipe, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(fullScreenSwipeEnabled, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(fullScreenSwipeShadowEnabled, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(gestureResponseDistance, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(hideKeyboardOnSwipe, BOOL)

ios/RNSScreenStackAnimator.mm

@@ -9,6 +9,9 @@
 static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.35;
 static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.35;
 static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
+// same value is used in other projects using similar approach for transistions
+// and it looks the most similar to the value used by Apple
+static constexpr float RNSShadowViewMaxAlpha = 0.1;
 
 @implementation RNSScreenStackAnimator {
   UINavigationControllerOperation _operation;
@@ -71,27 +74,33 @@ - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionCo
       // we are swiping with full width gesture
       if (screen.customAnimationOnSwipe) {
         [self animateTransitionWithStackAnimation:screen.stackAnimation
+                                    shadowEnabled:screen.fullScreenSwipeShadowEnabled
                                 transitionContext:transitionContext
                                              toVC:toViewController
                                            fromVC:fromViewController];
       } else {
         // we have to provide an animation when swiping, otherwise the screen will be popped immediately,
         // so in case of no custom animation on swipe set, we provide the one closest to the default
-        [self animateSimplePushWithTransitionContext:transitionContext toVC:toViewController fromVC:fromViewController];
+        [self animateSimplePushWithShadowEnabled:screen.fullScreenSwipeShadowEnabled
+                               transitionContext:transitionContext
+                                            toVC:toViewController
+                                          fromVC:fromViewController];
       }
     } else {
       // we are going forward or provided custom animation on swipe or clicked native header back button
       [self animateTransitionWithStackAnimation:screen.stackAnimation
+                                  shadowEnabled:screen.fullScreenSwipeShadowEnabled
                               transitionContext:transitionContext
                                            toVC:toViewController
                                          fromVC:fromViewController];
     }
   }
 }
 
-- (void)animateSimplePushWithTransitionContext:(id<UIViewControllerContextTransitioning>)transitionContext
-                                          toVC:(UIViewController *)toViewController
-                                        fromVC:(UIViewController *)fromViewController
+- (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
+                         transitionContext:(id<UIViewControllerContextTransitioning>)transitionContext
+                                      toVC:(UIViewController *)toViewController
+                                    fromVC:(UIViewController *)fromViewController
 {
   float containerWidth = transitionContext.containerView.bounds.size.width;
   float belowViewWidth = containerWidth * 0.3;
@@ -105,28 +114,55 @@ - (void)animateSimplePushWithTransitionContext:(id<UIViewControllerContextTransi
     leftTransform = CGAffineTransformMakeTranslation(belowViewWidth, 0);
   }
 
+  UIView *shadowView;
+  if (shadowEnabled) {
+    shadowView = [[UIView alloc] initWithFrame:fromViewController.view.frame];
+    shadowView.backgroundColor = [UIColor blackColor];
+  }
+
   if (_operation == UINavigationControllerOperationPush) {
     toViewController.view.transform = rightTransform;
     [[transitionContext containerView] addSubview:toViewController.view];
+    if (shadowView) {
+      [[transitionContext containerView] insertSubview:shadowView belowSubview:toViewController.view];
+      shadowView.alpha = 0.0;
+    }
+
     [UIView animateWithDuration:[self transitionDuration:transitionContext]
         animations:^{
           fromViewController.view.transform = leftTransform;
           toViewController.view.transform = CGAffineTransformIdentity;
+          if (shadowView) {
+            shadowView.alpha = RNSShadowViewMaxAlpha;
+          }
         }
         completion:^(BOOL finished) {
+          if (shadowView) {
+            [shadowView removeFromSuperview];
+          }
           fromViewController.view.transform = CGAffineTransformIdentity;
           toViewController.view.transform = CGAffineTransformIdentity;
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = leftTransform;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
+    if (shadowView) {
+      [[transitionContext containerView] insertSubview:shadowView belowSubview:fromViewController.view];
+      shadowView.alpha = RNSShadowViewMaxAlpha;
+    }
 
     void (^animationBlock)(void) = ^{
       toViewController.view.transform = CGAffineTransformIdentity;
       fromViewController.view.transform = rightTransform;
+      if (shadowView) {
+        shadowView.alpha = 0.0;
+      }
     };
     void (^completionBlock)(BOOL) = ^(BOOL finished) {
+      if (shadowView) {
+        [shadowView removeFromSuperview];
+      }
       fromViewController.view.transform = CGAffineTransformIdentity;
       toViewController.view.transform = CGAffineTransformIdentity;
       [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
@@ -381,12 +417,13 @@ + (BOOL)isCustomAnimation:(RNSScreenStackAnimation)animation
 }
 
 - (void)animateTransitionWithStackAnimation:(RNSScreenStackAnimation)animation
+                              shadowEnabled:(BOOL)shadowEnabled
                           transitionContext:(id<UIViewControllerContextTransitioning>)transitionContext
                                        toVC:(UIViewController *)toVC
                                      fromVC:(UIViewController *)fromVC
 {
   if (animation == RNSScreenStackAnimationSimplePush) {
-    [self animateSimplePushWithTransitionContext:transitionContext toVC:toVC fromVC:fromVC];
+    [self animateSimplePushWithShadowEnabled:shadowEnabled transitionContext:transitionContext toVC:toVC fromVC:fromVC];
     return;
   } else if (animation == RNSScreenStackAnimationSlideFromLeft) {
     [self animateSlideFromLeftWithTransitionContext:transitionContext toVC:toVC fromVC:fromVC];
@@ -402,7 +439,7 @@ - (void)animateTransitionWithStackAnimation:(RNSScreenStackAnimation)animation
     return;
   }
   // simple_push is the default custom animation
-  [self animateSimplePushWithTransitionContext:transitionContext toVC:toVC fromVC:fromVC];
+  [self animateSimplePushWithShadowEnabled:shadowEnabled transitionContext:transitionContext toVC:toVC fromVC:fromVC];
 }
 
 @end

native-stack/README.md

@@ -90,6 +90,12 @@ Enum value indicating display mode of **default** back button. It works on iOS >
 
 Boolean indicating whether the swipe gesture should work on whole screen. Swiping with this option results in the same transition animation as `simple_push` by default. It can be changed to other custom animations with `customAnimationOnSwipe` prop, but default iOS swipe animation is not achievable due to usage of custom recognizer. Defaults to `false`.
 
+### `fullScreenSwipeShadowEnabled` (iOS only)
+
+Boolean indicating whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+doesn't have a shadow by default. When enabled a custom shadow view is added during the transition which tries to mimick the
+default iOS shadow. Defaults to `false`.
+
 #### `gestureEnabled` (iOS only)
 
 Whether you can use gestures to dismiss this screen. Defaults to `true`.

src/fabric/ModalScreenNativeComponent.ts

@@ -77,6 +77,7 @@ export interface NativeProps extends ViewProps {
   sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: boolean;
   homeIndicatorHidden?: boolean;
   preventNativeDismiss?: boolean;
   gestureEnabled?: WithDefault<boolean, true>;

src/fabric/ScreenNativeComponent.ts

@@ -77,6 +77,7 @@ export interface NativeProps extends ViewProps {
   sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
   customAnimationOnSwipe?: boolean;
   fullScreenSwipeEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: boolean;
   homeIndicatorHidden?: boolean;
   preventNativeDismiss?: boolean;
   gestureEnabled?: WithDefault<boolean, true>;

src/native-stack/types.tsx

@@ -134,6 +134,16 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   fullScreenSwipeEnabled?: boolean;
+  /**
+   * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+   * doesn't have a shadow by default. When enabled a custom shadow view is added during the transition which tries to mimick the
+   * default iOS shadow. Defaults to `false`.
+   *
+   * Doesn't affect the behavior of transitions not using this gesture.
+   *
+   * @platform ios
+   */
+  fullScreenSwipeShadowEnabled?: boolean;
   /**
    * Whether you can use gestures to dismiss this screen. Defaults to `true`.
    * Only supported on iOS.

src/native-stack/views/NativeStackView.tsx

@@ -202,6 +202,7 @@ const RouteView = ({
   let {
     customAnimationOnSwipe,
     fullScreenSwipeEnabled,
+    fullScreenSwipeShadowEnabled,
     gestureResponseDistance,
     stackAnimation,
     stackPresentation = 'push',
@@ -216,6 +217,9 @@ const RouteView = ({
     if (fullScreenSwipeEnabled === undefined) {
       fullScreenSwipeEnabled = true;
     }
+    if (fullScreenSwipeShadowEnabled === undefined) {
+      fullScreenSwipeShadowEnabled = true;
+    }
     if (customAnimationOnSwipe === undefined) {
       customAnimationOnSwipe = true;
     }
@@ -294,6 +298,7 @@ const RouteView = ({
       customAnimationOnSwipe={customAnimationOnSwipe}
       freezeOnBlur={freezeOnBlur}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      fullScreenSwipeShadowEnabled={fullScreenSwipeShadowEnabled}
       hideKeyboardOnSwipe={hideKeyboardOnSwipe}
       homeIndicatorHidden={homeIndicatorHidden}
       gestureEnabled={isAndroid ? false : gestureEnabled}

src/types.tsx

@@ -133,6 +133,16 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   fullScreenSwipeEnabled?: boolean;
+  /**
+   * Whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus
+   * doesn't have a shadow by default. When enabled a custom shadow view is added during the transition which tries to mimick the
+   * default iOS shadow. Defaults to `false`.
+   *
+   * Doesn't affect the behavior of transitions not using this gesture.
+   *
+   * @platform ios
+   */
+  fullScreenSwipeShadowEnabled?: boolean;
   /**
    * Whether you can use gestures to dismiss this screen. Defaults to `true`.
    *