react-native-screens 3.31.1 → 3.33.0

package/ios/RNSScreenStackAnimator.mm

@@ -9,6 +9,9 @@ static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.35;
 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,17 +74,22 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
       // 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];
@@ -89,9 +97,10 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
   }
 }
 
-- (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,15 +114,32 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
     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]];
@@ -121,12 +147,22 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
   } 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 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
 }
 
 - (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 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
     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

package/ios/RNSScreenStackHeaderConfig.h

@@ -55,6 +55,7 @@
 @property (nonatomic) BOOL translucent;
 @property (nonatomic) BOOL backButtonInCustomView;
 @property (nonatomic) UISemanticContentAttribute direction;
+@property (nonatomic) UINavigationItemBackButtonDisplayMode backButtonDisplayMode;
 
 + (void)willShowViewController:(UIViewController *)vc
                       animated:(BOOL)animated
@@ -70,5 +71,6 @@
 
 + (UIBlurEffectStyle)UIBlurEffectStyle:(id)json;
 + (UISemanticContentAttribute)UISemanticContentAttribute:(id)json;
++ (UINavigationItemBackButtonDisplayMode)UINavigationItemBackButtonDisplayMode:(id)json;
 
 @end

package/ios/RNSScreenStackHeaderConfig.mm

@@ -19,6 +19,7 @@
 #import <React/RCTFont.h>
 #import <React/RCTImageLoader.h>
 #import <React/RCTImageSource.h>
+#import "RNSConvert.h"
 #import "RNSScreen.h"
 #import "RNSScreenStackHeaderConfig.h"
 #import "RNSSearchBar.h"
@@ -140,8 +141,8 @@ namespace react = facebook::react;
     nextVC = nav.topViewController;
   }
 
-  // we want updates sent to the VC below modal too since it is also visible
-  BOOL isPresentingVC = nextVC != nil && vc.presentedViewController == nextVC;
+  // we want updates sent to the VC directly below modal too since it is also visible
+  BOOL isPresentingVC = nextVC != nil && vc.presentedViewController == nextVC && vc == nav.topViewController;
 
   BOOL isInFullScreenModal = nav == nil && _screenView.stackPresentation == RNSScreenStackPresentationFullScreenModal;
   // if nav is nil, it means we can be in a fullScreen modal, so there is no nextVC, but we still want to update
@@ -493,8 +494,17 @@ namespace react = facebook::react;
        config.direction == UISemanticContentAttributeForceRightToLeft) &&
       // iOS 12 cancels swipe gesture when direction is changed. See #1091
       navctr.view.semanticContentAttribute != config.direction) {
+    // This is needed for swipe back gesture direction
     navctr.view.semanticContentAttribute = config.direction;
+
+    // This is responsible for the direction of the navigationBar and its contents
     navctr.navigationBar.semanticContentAttribute = config.direction;
+    [[UIButton appearanceWhenContainedInInstancesOfClasses:@[ navctr.navigationBar.class ]]
+        setSemanticContentAttribute:config.direction];
+    [[UIView appearanceWhenContainedInInstancesOfClasses:@[ navctr.navigationBar.class ]]
+        setSemanticContentAttribute:config.direction];
+    [[UISearchBar appearanceWhenContainedInInstancesOfClasses:@[ navctr.navigationBar.class ]]
+        setSemanticContentAttribute:config.direction];
   }
 
   if (shouldHide) {
@@ -511,8 +521,24 @@ namespace react = facebook::react;
                                                                              action:nil];
   [backBarButtonItem setMenuHidden:config.disableBackButtonMenu];
 
+  auto isBackButtonCustomized = !isBackTitleBlank || config.disableBackButtonMenu;
+
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_14_0) && \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
+  if (@available(iOS 14.0, *)) {
+    prevItem.backButtonDisplayMode = config.backButtonDisplayMode;
+  }
+#endif
+
   if (config.isBackTitleVisible) {
-    if (config.backTitleFontFamily || config.backTitleFontSize) {
+    if ((config.backTitleFontFamily &&
+         // While being used by react-navigation, the `backTitleFontFamily` will
+         // be set to "System" by default - which is the system default font.
+         // To avoid always considering the font as customized, we need to have an additional check.
+         // See: https://github.com/software-mansion/react-native-screens/pull/2105#discussion_r1565222738
+         ![config.backTitleFontFamily isEqual:@"System"]) ||
+        config.backTitleFontSize) {
+      isBackButtonCustomized = YES;
       NSMutableDictionary *attrs = [NSMutableDictionary new];
       NSNumber *size = config.backTitleFontSize ?: @17;
       if (config.backTitleFontFamily) {
@@ -535,9 +561,17 @@ namespace react = facebook::react;
     // When backBarButtonItem's title is null, back menu will use value
     // of backButtonTitle
     [backBarButtonItem setTitle:nil];
+    isBackButtonCustomized = YES;
     prevItem.backButtonTitle = resolvedBackTitle;
   }
-  prevItem.backBarButtonItem = backBarButtonItem;
+
+  // Prevent unnecessary assignment of backBarButtonItem if it is not customized,
+  // as assigning one will override the native behavior of automatically shortening
+  // the title to "Back" or hide the back title if there's not enough space.
+  // See: https://github.com/software-mansion/react-native-screens/issues/1589
+  if (isBackButtonCustomized) {
+    prevItem.backBarButtonItem = backBarButtonItem;
+  }
 
   if (@available(iOS 11.0, *)) {
     if (config.largeTitle) {
@@ -555,6 +589,12 @@ namespace react = facebook::react;
     navitem.standardAppearance = appearance;
     navitem.compactAppearance = appearance;
 
+// appearance does not apply to the tvOS so we need to use lagacy customization
+#if TARGET_OS_TV
+    navctr.navigationBar.titleTextAttributes = appearance.titleTextAttributes;
+    navctr.navigationBar.backgroundColor = appearance.backgroundColor;
+#endif
+
     UINavigationBarAppearance *scrollEdgeAppearance =
         [[UINavigationBarAppearance alloc] initWithBarAppearance:appearance];
     if (config.largeTitleBackgroundColor != nil) {
@@ -581,8 +621,6 @@ namespace react = facebook::react;
 #endif
   }
 #if !TARGET_OS_TV
-  // Workaround for the wrong rotation of back button arrow in RTL mode.
-  navitem.hidesBackButton = true;
   navitem.hidesBackButton = config.hideBackButton;
 #endif
   navitem.leftBarButtonItem = nil;
@@ -590,6 +628,8 @@ namespace react = facebook::react;
   navitem.titleView = nil;
 
   for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
+    // This code should be kept in sync on Fabric with analogous switch statement in
+    // `- [RNSScreenStackHeaderConfig replaceNavigationBarViewsWithSnapshotOfSubview:]` method.
     switch (subview.type) {
       case RNSScreenStackHeaderSubviewTypeLeft: {
 #if !TARGET_OS_TV
@@ -640,13 +680,6 @@ namespace react = facebook::react;
     }
   }
 
-  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0), dispatch_get_main_queue(), ^{
-    // Position the contents in the navigation bar, regarding to the direction.
-    for (UIView *view in navctr.navigationBar.subviews) {
-      view.semanticContentAttribute = config.direction;
-    }
-  });
-
   // This assignment should be done after `navitem.titleView = ...` assignment (iOS 16.0 bug).
   // See: https://github.com/software-mansion/react-native-screens/issues/1570 (comments)
   navitem.title = config.title;
@@ -724,8 +757,38 @@ namespace react = facebook::react;
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
+  // For explanation of why we can make a snapshot here despite the fact that our children are already
+  // unmounted see https://github.com/software-mansion/react-native-screens/pull/2261
+  [self replaceNavigationBarViewsWithSnapshotOfSubview:(RNSScreenStackHeaderSubview *)childComponentView];
   [_reactSubviews removeObject:(RNSScreenStackHeaderSubview *)childComponentView];
   [childComponentView removeFromSuperview];
+  [self updateViewControllerIfNeeded];
+}
+
+- (void)replaceNavigationBarViewsWithSnapshotOfSubview:(RNSScreenStackHeaderSubview *)childComponentView
+{
+  UINavigationItem *navitem = _screenView.controller.navigationItem;
+  UIView *snapshot = [childComponentView snapshotViewAfterScreenUpdates:NO];
+
+  // This code should be kept in sync with analogous switch statement in
+  // `+ [RNSScreenStackHeaderConfig updateViewController: withConfig: animated:]` method.
+  switch (childComponentView.type) {
+    case RNSScreenStackHeaderSubviewTypeLeft:
+      navitem.leftBarButtonItem.customView = snapshot;
+      break;
+    case RNSScreenStackHeaderSubviewTypeCenter:
+    case RNSScreenStackHeaderSubviewTypeTitle:
+      navitem.titleView = snapshot;
+      break;
+    case RNSScreenStackHeaderSubviewTypeRight:
+      navitem.rightBarButtonItem.customView = snapshot;
+      break;
+    case RNSScreenStackHeaderSubviewTypeSearchBar:
+    case RNSScreenStackHeaderSubviewTypeBackButton:
+      break;
+    default:
+      RCTLogError(@"[RNScreens] Unhandled subview type: %ld", childComponentView.type);
+  }
 }
 
 static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
@@ -769,11 +832,6 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
   _initialPropsSet = NO;
 }
 
-+ (react::ComponentDescriptorProvider)componentDescriptorProvider
-{
-  return react::concreteComponentDescriptorProvider<react::RNSScreenStackHeaderConfigComponentDescriptor>();
-}
-
 - (NSNumber *)getFontSizePropValue:(int)value
 {
   if (value > 0)
@@ -781,14 +839,9 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
   return nil;
 }
 
-- (UISemanticContentAttribute)getDirectionPropValue:(react::RNSScreenStackHeaderConfigDirection)direction
++ (react::ComponentDescriptorProvider)componentDescriptorProvider
 {
-  switch (direction) {
-    case react::RNSScreenStackHeaderConfigDirection::Rtl:
-      return UISemanticContentAttributeForceRightToLeft;
-    case react::RNSScreenStackHeaderConfigDirection::Ltr:
-      return UISemanticContentAttributeForceLeftToRight;
-  }
+  return react::concreteComponentDescriptorProvider<react::RNSScreenStackHeaderConfigComponentDescriptor>();
 }
 
 - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::Shared const &)oldProps
@@ -835,9 +888,11 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
   _backTitleFontSize = [self getFontSizePropValue:newScreenProps.backTitleFontSize];
   _hideBackButton = newScreenProps.hideBackButton;
   _disableBackButtonMenu = newScreenProps.disableBackButtonMenu;
+  _backButtonDisplayMode =
+      [RNSConvert UINavigationItemBackButtonDisplayModeFromCppEquivalent:newScreenProps.backButtonDisplayMode];
 
   if (newScreenProps.direction != oldScreenProps.direction) {
-    _direction = [self getDirectionPropValue:newScreenProps.direction];
+    _direction = [RNSConvert UISemanticContentAttributeFromCppEquivalent:newScreenProps.direction];
   }
 
   _backTitleVisible = newScreenProps.backTitleVisible;
@@ -928,8 +983,8 @@ RCT_EXPORT_VIEW_PROPERTY(hideBackButton, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(hideShadow, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(backButtonInCustomView, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(disableBackButtonMenu, BOOL)
-// `hidden` is an UIView property, we need to use different name internally
-RCT_REMAP_VIEW_PROPERTY(hidden, hide, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(backButtonDisplayMode, UINavigationItemBackButtonDisplayMode)
+RCT_REMAP_VIEW_PROPERTY(hidden, hide, BOOL) // `hidden` is an UIView property, we need to use different name internally
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
 
 @end
@@ -985,6 +1040,16 @@ RCT_ENUM_CONVERTER(
     UISemanticContentAttributeUnspecified,
     integerValue)
 
+RCT_ENUM_CONVERTER(
+    UINavigationItemBackButtonDisplayMode,
+    (@{
+      @"default" : @(UINavigationItemBackButtonDisplayModeDefault),
+      @"generic" : @(UINavigationItemBackButtonDisplayModeGeneric),
+      @"minimal" : @(UINavigationItemBackButtonDisplayModeMinimal),
+    }),
+    UINavigationItemBackButtonDisplayModeDefault,
+    integerValue)
+
 RCT_ENUM_CONVERTER(UIBlurEffectStyle, ([self blurEffectsForIOSVersion]), UIBlurEffectStyleExtraLight, integerValue)
 
 @end

package/ios/RNSScreenStackHeaderSubview.mm

@@ -72,9 +72,17 @@ namespace react = facebook::react;
         self);
   } else {
     self.bounds = CGRect{CGPointZero, frame.size};
+    // We're forcing the parent view to layout this subview with correct frame size,
+    // see: https://github.com/software-mansion/react-native-screens/pull/2248
+    [self.superview layoutIfNeeded];
   }
 }
 
++ (BOOL)shouldBeRecycled
+{
+  return NO;
+}
+
 #else
 #pragma mark - Paper specific
 

package/ios/RNSSearchBar.h

@@ -29,11 +29,11 @@
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #else
-@property (nonatomic, copy) RCTBubblingEventBlock onChangeText;
-@property (nonatomic, copy) RCTBubblingEventBlock onCancelButtonPress;
-@property (nonatomic, copy) RCTBubblingEventBlock onSearchButtonPress;
-@property (nonatomic, copy) RCTBubblingEventBlock onFocus;
-@property (nonatomic, copy) RCTBubblingEventBlock onBlur;
+@property (nonatomic, copy) RCTDirectEventBlock onChangeText;
+@property (nonatomic, copy) RCTDirectEventBlock onCancelButtonPress;
+@property (nonatomic, copy) RCTDirectEventBlock onSearchButtonPress;
+@property (nonatomic, copy) RCTDirectEventBlock onSearchFocus;
+@property (nonatomic, copy) RCTDirectEventBlock onSearchBlur;
 #endif
 
 @end

package/ios/RNSSearchBar.mm

@@ -67,11 +67,11 @@ namespace react = facebook::react;
 #ifdef RCT_NEW_ARCH_ENABLED
   if (_eventEmitter != nullptr) {
     std::dynamic_pointer_cast<const react::RNSSearchBarEventEmitter>(_eventEmitter)
-        ->onFocus(react::RNSSearchBarEventEmitter::OnFocus{});
+        ->onSearchFocus(react::RNSSearchBarEventEmitter::OnSearchFocus{});
   }
 #else
-  if (self.onFocus) {
-    self.onFocus(@{});
+  if (self.onSearchFocus) {
+    self.onSearchFocus(@{});
   }
 #endif
 }
@@ -81,11 +81,11 @@ namespace react = facebook::react;
 #ifdef RCT_NEW_ARCH_ENABLED
   if (_eventEmitter != nullptr) {
     std::dynamic_pointer_cast<const react::RNSSearchBarEventEmitter>(_eventEmitter)
-        ->onBlur(react::RNSSearchBarEventEmitter::OnBlur{});
+        ->onSearchBlur(react::RNSSearchBarEventEmitter::OnSearchBlur{});
   }
 #else
-  if (self.onBlur) {
-    self.onBlur(@{});
+  if (self.onSearchBlur) {
+    self.onSearchBlur(@{});
   }
 #endif
 }
@@ -414,11 +414,11 @@ RCT_EXPORT_VIEW_PROPERTY(textColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(cancelButtonText, NSString)
 RCT_EXPORT_VIEW_PROPERTY(placement, RNSSearchBarPlacement)
 
-RCT_EXPORT_VIEW_PROPERTY(onChangeText, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onCancelButtonPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onSearchButtonPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onChangeText, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onCancelButtonPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSearchButtonPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSearchFocus, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSearchBlur, RCTDirectEventBlock)
 
 #ifndef RCT_NEW_ARCH_ENABLED
 

package/ios/utils/RCTSurfaceTouchHandler+RNSUtility.h

@@ -0,0 +1,15 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTSurfaceTouchHandler.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTSurfaceTouchHandler (RNSUtility)
+
+- (void)rnscreens_cancelTouches;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // RCT_NEW_ARCH_ENABLED

package/ios/utils/RCTSurfaceTouchHandler+RNSUtility.mm

@@ -0,0 +1,14 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "RCTSurfaceTouchHandler+RNSUtility.h"
+
+@implementation RCTSurfaceTouchHandler (RNSUtility)
+
+- (void)rnscreens_cancelTouches
+{
+  [self setEnabled:NO];
+  [self setEnabled:YES];
+  [self reset];
+}
+
+@end
+#endif // RCT_NEW_ARCH_ENABLED

package/ios/utils/RCTTouchHandler+RNSUtility.h

@@ -0,0 +1,15 @@
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTTouchHandler.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTouchHandler (RNSUtility)
+
+- (void)rnscreens_cancelTouches;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // !RCT_NEW_ARCH_ENABLED

package/ios/utils/RCTTouchHandler+RNSUtility.mm

@@ -0,0 +1,15 @@
+#ifndef RCT_NEW_ARCH_ENABLED
+#import "RCTTouchHandler+RNSUtility.h"
+
+@implementation RCTTouchHandler (RNSUtility)
+
+- (void)rnscreens_cancelTouches
+{
+  [self setEnabled:NO];
+  [self setEnabled:YES];
+  [self reset];
+}
+
+@end
+
+#endif // !RCT_NEW_ARCH_ENABLED

package/ios/utils/UIView+RNSUtility.h

@@ -0,0 +1,23 @@
+#import <Foundation/Foundation.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTSurfaceTouchHandler.h>
+#else
+#import <React/RCTTouchHandler.h>
+#endif // RCT_NEW_ARCH_ENABLED
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#define RNS_TOUCH_HANDLER_ARCH_TYPE RCTSurfaceTouchHandler
+#else
+#define RNS_TOUCH_HANDLER_ARCH_TYPE RCTTouchHandler
+#endif // RCT_NEW_ARCH_ENABLED
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface UIView (RNSUtility)
+
+- (nullable RNS_TOUCH_HANDLER_ARCH_TYPE *)rnscreens_findTouchHandlerInAncestorChain;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/utils/UIView+RNSUtility.mm

@@ -0,0 +1,55 @@
+
+#import "UIView+RNSUtility.h"
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTSurfaceView.h>
+#endif
+
+@implementation UIView (RNSUtility)
+
+- (nullable RNS_TOUCH_HANDLER_ARCH_TYPE *)rnscreens_findTouchHandlerInAncestorChain
+{
+  UIView *parent = self.superview;
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  // On Fabric there is no view that exposes touchHandler above us in the view hierarchy, however it is still
+  // utilised. `RCTSurfaceView` should be present above us, which hosts `RCTFabricSurface` instance, which in turn
+  // hosts `RCTSurfaceTouchHandler` as a private field. When initialised, `RCTSurfaceTouchHandler` is attached to the
+  // surface view as a gestureRecognizer <- and this is where we can lay our hands on it.
+
+  while (parent != nil && ![parent isKindOfClass:RCTSurfaceView.class]) {
+    parent = parent.superview;
+  }
+
+  // This could be possible in modal context
+  if (parent == nil) {
+    return nil;
+  }
+
+  // Experimentation shows that RCTSurfaceTouchHandler is the only gestureRecognizer registered here,
+  // so we should not be afraid of any performance hit here.
+  for (UIGestureRecognizer *recognizer in parent.gestureRecognizers) {
+    if ([recognizer isKindOfClass:RCTSurfaceTouchHandler.class]) {
+      return static_cast<RNS_TOUCH_HANDLER_ARCH_TYPE *>(recognizer);
+    }
+  }
+
+#else
+
+  // On Paper we can access touchHandler hosted by `RCTRootContentView` which should be above ScreenStack
+  // in view hierarchy.
+  while (parent != nil && ![parent respondsToSelector:@selector(touchHandler)]) {
+    parent = parent.superview;
+  }
+
+  if (parent != nil) {
+    RCTTouchHandler *touchHandler = [parent performSelector:@selector(touchHandler)];
+    return static_cast<RNS_TOUCH_HANDLER_ARCH_TYPE *>(touchHandler);
+  }
+
+#endif // RCT_NEW_ARCH_ENABLED
+
+  return nil;
+}
+
+@end