react-native-screens 3.20.0 → 3.21.1

package/ios/RNSScreenStackHeaderConfig.mm

@@ -1,57 +1,74 @@
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTImageComponentView.h>
 #import <React/UIView+React.h>
+#import <react/renderer/components/image/ImageProps.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
+#import "RCTImageComponentView+RNSScreenStackHeaderConfig.h"
 #else
-#import <React/RCTBridge.h>
-#import <React/RCTImageLoader.h>
-#import <React/RCTImageSource.h>
 #import <React/RCTImageView.h>
 #import <React/RCTShadowView.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTUIManagerUtils.h>
 #endif
+#import <React/RCTBridge.h>
 #import <React/RCTFont.h>
+#import <React/RCTImageLoader.h>
+#import <React/RCTImageSource.h>
 #import "RNSScreen.h"
 #import "RNSScreenStackHeaderConfig.h"
 #import "RNSSearchBar.h"
 #import "RNSUIBarButtonItem.h"
 
-#ifdef RN_FABRIC_ENABLED
-#else
+#ifdef RCT_NEW_ARCH_ENABLED
+namespace rct = facebook::react;
+#endif // RCT_NEW_ARCH_ENABLED
+
+#ifndef RCT_NEW_ARCH_ENABLED
 // Some RN private method hacking below. Couldn't figure out better way to access image data
 // of a given RCTImageView. See more comments in the code section processing SubviewTypeBackButton
 @interface RCTImageView (Private)
 - (UIImage *)image;
 @end
+#endif // !RCT_NEW_ARCH_ENABLED
 
 @interface RCTImageLoader (Private)
 - (id<RCTImageCache>)imageCache;
 @end
-#endif
+
+@implementation NSString (RNSStringUtil)
+
++ (BOOL)RNSisBlank:(NSString *)string
+{
+  if (string == nil) {
+    return YES;
+  }
+  return [[string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] length] == 0;
+}
+
+@end
 
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
   BOOL _initialPropsSet;
 #else
 #endif
 }
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if (self = [super initWithFrame:frame]) {
-    static const auto defaultProps = std::make_shared<const facebook::react::RNSScreenStackHeaderConfigProps>();
+    static const auto defaultProps = std::make_shared<const rct::RNSScreenStackHeaderConfigProps>();
     _props = defaultProps;
-    self.hidden = YES;
     _show = YES;
     _translucent = NO;
-    _reactSubviews = [NSMutableArray new];
+    [self initProps];
   }
   return self;
 }
@@ -59,14 +76,20 @@
 - (instancetype)init
 {
   if (self = [super init]) {
-    self.hidden = YES;
     _translucent = YES;
-    _reactSubviews = [NSMutableArray new];
+    [self initProps];
   }
   return self;
 }
 #endif
 
+- (void)initProps
+{
+  self.hidden = YES;
+  _reactSubviews = [NSMutableArray new];
+  _backTitleVisible = YES;
+}
+
 - (UIView *)reactSuperview
 {
   return _screenView;
@@ -243,14 +266,15 @@
 
 + (UIImage *)loadBackButtonImageInViewController:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
 {
-#ifdef RN_FABRIC_ENABLED
-  @throw([NSException exceptionWithName:@"UNIMPLEMENTED" reason:@"Implement" userInfo:nil]);
-#else
   BOOL hasBackButtonImage = NO;
   for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
     if (subview.type == RNSScreenStackHeaderSubviewTypeBackButton && subview.subviews.count > 0) {
       hasBackButtonImage = YES;
+#ifdef RCT_NEW_ARCH_ENABLED
+      RCTImageComponentView *imageView = subview.subviews[0];
+#else
       RCTImageView *imageView = subview.subviews[0];
+#endif // RCT_NEW_ARCH_ENABLED
       if (imageView.image == nil) {
         // This is yet another workaround for loading custom back icon. It turns out that under
         // certain circumstances image attribute can be null despite the app running in production
@@ -259,14 +283,16 @@
         // does not populate the frame of the image view before the loading start. The latter result
         // in the image attribute not being updated. We manually set frame to the size of an image
         // in order to trigger proper reload that'd update the image attribute.
-        RCTImageSource *source = imageView.imageSources[0];
+        RCTImageSource *imageSource = [RNSScreenStackHeaderConfig imageSourceFromImageView:imageView];
         [imageView reactSetFrame:CGRectMake(
                                      imageView.frame.origin.x,
                                      imageView.frame.origin.y,
-                                     source.size.width,
-                                     source.size.height)];
+                                     imageSource.size.width,
+                                     imageSource.size.height)];
       }
+
       UIImage *image = imageView.image;
+
       // IMPORTANT!!!
       // image can be nil in DEV MODE ONLY
       //
@@ -280,12 +306,19 @@
       if (image == nil) {
         // in DEV MODE we try to load from cache (we use private API for that as it is not exposed
         // publically in headers).
-        RCTImageSource *source = imageView.imageSources[0];
-        RCTImageLoader *imageloader = [subview.bridge moduleForClass:[RCTImageLoader class]];
-        image = [imageloader.imageCache imageForUrl:source.request.URL.absoluteString
-                                               size:source.size
-                                              scale:source.scale
-                                         resizeMode:imageView.resizeMode];
+        RCTImageSource *imageSource = [RNSScreenStackHeaderConfig imageSourceFromImageView:imageView];
+        RCTImageLoader *imageLoader = [subview.bridge moduleForClass:[RCTImageLoader class]];
+
+        image = [imageLoader.imageCache
+            imageForUrl:imageSource.request.URL.absoluteString
+                   size:imageSource.size
+                  scale:imageSource.scale
+#ifdef RCT_NEW_ARCH_ENABLED
+             resizeMode:resizeModeFromCppEquiv(
+                            std::static_pointer_cast<const rct::ImageProps>(imageView.props)->resizeMode)];
+#else
+             resizeMode:imageView.resizeMode];
+#endif // RCT_NEW_ARCH_ENABLED
       }
       if (image == nil) {
         // This will be triggered if the image is not in the cache yet. What we do is we wait until
@@ -312,7 +345,6 @@
       }
     }
   }
-#endif // RN_FABRIC_ENABLED
   return nil;
 }
 
@@ -343,7 +375,7 @@
   }
 
   // TODO: implement blurEffect on Fabric
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #else
   if (config.blurEffect) {
     appearance.backgroundEffect = [UIBlurEffect effectWithStyle:config.blurEffect];
@@ -404,19 +436,15 @@
     appearance.largeTitleTextAttributes = largeAttrs;
   }
 
-#ifdef RN_FABRIC_ENABLED
-  [appearance setBackIndicatorImage:nil transitionMaskImage:nil];
-#else
   UIImage *backButtonImage = [self loadBackButtonImageInViewController:vc withConfig:config];
   if (backButtonImage) {
     [appearance setBackIndicatorImage:backButtonImage transitionMaskImage:backButtonImage];
   } else if (appearance.backIndicatorImage) {
     [appearance setBackIndicatorImage:nil transitionMaskImage:nil];
   }
-#endif // RN_FABRIC_ENABLED
   return appearance;
 }
-#endif
+#endif // Check for >= iOS 13.0
 
 + (void)updateViewController:(UIViewController *)vc
                   withConfig:(RNSScreenStackHeaderConfig *)config
@@ -430,7 +458,7 @@
       currentIndex > 0 ? [navctr.viewControllers objectAtIndex:currentIndex - 1].navigationItem : nil;
 
   BOOL wasHidden = navctr.navigationBarHidden;
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
   BOOL shouldHide = config == nil || !config.show;
 #else
   BOOL shouldHide = config == nil || config.hide;
@@ -460,32 +488,15 @@
   }
 
 #if !TARGET_OS_TV
-  // Fix for github.com/react-navigation/react-navigation/issues/11015
-  // It allows to hide back button title and use back button menu as normal.
-  // Back button display mode and back button menu are available since iOS 14.
-  if (@available(iOS 14.0, *)) {
-    // Make sure to set display mode to default.
-    // This line resets back button display mode - especially needed on the Fabric architecture.
-    navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeDefault;
-
-    NSString *trimmedBackTitle =
-        [config.backTitle stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
-
-    // When an whitespace only back title is passed set back button mode to minimal.
-    if (config.backTitle != nil && [trimmedBackTitle length] == 0) {
-      navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeMinimal;
-    }
-  } else if (
-      config.backTitle != nil || config.backTitleFontFamily || config.backTitleFontSize ||
-      config.disableBackButtonMenu) {
-    RNSUIBarButtonItem *backBarButtonItem = [[RNSUIBarButtonItem alloc] initWithTitle:config.backTitle ?: prevItem.title
-                                                                                style:UIBarButtonItemStylePlain
-                                                                               target:nil
-                                                                               action:nil];
-
-    [backBarButtonItem setMenuHidden:config.disableBackButtonMenu];
-
-    prevItem.backBarButtonItem = backBarButtonItem;
+  const auto isBackTitleBlank = [NSString RNSisBlank:config.backTitle] == YES;
+  NSString *resolvedBackTitle = isBackTitleBlank ? prevItem.title : config.backTitle;
+  RNSUIBarButtonItem *backBarButtonItem = [[RNSUIBarButtonItem alloc] initWithTitle:resolvedBackTitle
+                                                                              style:UIBarButtonItemStylePlain
+                                                                             target:nil
+                                                                             action:nil];
+  [backBarButtonItem setMenuHidden:config.disableBackButtonMenu];
+
+  if (config.isBackTitleVisible) {
     if (config.backTitleFontFamily || config.backTitleFontSize) {
       NSMutableDictionary *attrs = [NSMutableDictionary new];
       NSNumber *size = config.backTitleFontSize ?: @17;
@@ -500,11 +511,18 @@
       } else {
         attrs[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[size floatValue]];
       }
-      [self setTitleAttibutes:attrs forButton:prevItem.backBarButtonItem];
+      [self setTitleAttibutes:attrs forButton:backBarButtonItem];
     }
   } else {
-    prevItem.backBarButtonItem = nil;
+    // back button title should be not visible next to back button,
+    // but it should still appear in back menu (if one is enabled)
+
+    // When backBarButtonItem's title is null, back menu will use value
+    // of backButtonTitle
+    [backBarButtonItem setTitle:nil];
+    prevItem.backButtonTitle = resolvedBackTitle;
   }
+  prevItem.backBarButtonItem = backBarButtonItem;
 
   if (@available(iOS 11.0, *)) {
     if (config.largeTitle) {
@@ -594,9 +612,6 @@
         break;
       }
       case RNSScreenStackHeaderSubviewTypeBackButton: {
-#ifdef RN_FABRIC_ENABLED
-        RCTLogWarn(@"Back button subview is not yet Fabric compatible in react-native-screens");
-#endif
         break;
       }
     }
@@ -654,7 +669,7 @@
   [self updateViewControllerIfNeeded];
 }
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #pragma mark - Fabric specific
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
@@ -683,6 +698,39 @@
   [childComponentView removeFromSuperview];
 }
 
+static RCTResizeMode resizeModeFromCppEquiv(rct::ImageResizeMode resizeMode)
+{
+  switch (resizeMode) {
+    case rct::ImageResizeMode::Cover:
+      return RCTResizeModeCover;
+    case rct::ImageResizeMode::Contain:
+      return RCTResizeModeContain;
+    case rct::ImageResizeMode::Stretch:
+      return RCTResizeModeStretch;
+    case rct::ImageResizeMode::Center:
+      return RCTResizeModeCenter;
+    case rct::ImageResizeMode::Repeat:
+      return RCTResizeModeRepeat;
+  }
+}
+
+/**
+ * Fabric implementation of helper method for +loadBackButtonImageInViewController:withConfig:
+ * There is corresponding Paper implementation (with different parameter type) in Paper specific section.
+ */
++ (RCTImageSource *)imageSourceFromImageView:(RCTImageComponentView *)view
+{
+  auto const imageProps = *std::static_pointer_cast<const rct::ImageProps>(view.props);
+  rct::ImageSource cppImageSource = imageProps.sources.at(0);
+  auto imageSize = CGSize{cppImageSource.size.width, cppImageSource.size.height};
+  NSURLRequest *request =
+      [NSURLRequest requestWithURL:[NSURL URLWithString:RCTNSStringFromStringNilIfEmpty(cppImageSource.uri)]];
+  RCTImageSource *imageSource = [[RCTImageSource alloc] initWithURLRequest:request
+                                                                      size:imageSize
+                                                                     scale:cppImageSource.scale];
+  return imageSource;
+}
+
 #pragma mark - RCTComponentViewProtocol
 
 - (void)prepareForRecycle
@@ -691,10 +739,9 @@
   _initialPropsSet = NO;
 }
 
-+ (facebook::react::ComponentDescriptorProvider)componentDescriptorProvider
++ (rct::ComponentDescriptorProvider)componentDescriptorProvider
 {
-  return facebook::react::concreteComponentDescriptorProvider<
-      facebook::react::RNSScreenStackHeaderConfigComponentDescriptor>();
+  return rct::concreteComponentDescriptorProvider<rct::RNSScreenStackHeaderConfigComponentDescriptor>();
 }
 
 - (NSNumber *)getFontSizePropValue:(int)value
@@ -704,24 +751,20 @@
   return nil;
 }
 
-- (UISemanticContentAttribute)getDirectionPropValue:(facebook::react::RNSScreenStackHeaderConfigDirection)direction
+- (UISemanticContentAttribute)getDirectionPropValue:(rct::RNSScreenStackHeaderConfigDirection)direction
 {
   switch (direction) {
-    case facebook::react::RNSScreenStackHeaderConfigDirection::Rtl:
+    case rct::RNSScreenStackHeaderConfigDirection::Rtl:
       return UISemanticContentAttributeForceRightToLeft;
-    case facebook::react::RNSScreenStackHeaderConfigDirection::Ltr:
+    case rct::RNSScreenStackHeaderConfigDirection::Ltr:
       return UISemanticContentAttributeForceLeftToRight;
   }
 }
 
-- (void)updateProps:(facebook::react::Props::Shared const &)props
-           oldProps:(facebook::react::Props::Shared const &)oldProps
+- (void)updateProps:(rct::Props::Shared const &)props oldProps:(rct::Props::Shared const &)oldProps
 {
-  [super updateProps:props oldProps:oldProps];
-
-  const auto &oldScreenProps =
-      *std::static_pointer_cast<const facebook::react::RNSScreenStackHeaderConfigProps>(_props);
-  const auto &newScreenProps = *std::static_pointer_cast<const facebook::react::RNSScreenStackHeaderConfigProps>(props);
+  const auto &oldScreenProps = *std::static_pointer_cast<const rct::RNSScreenStackHeaderConfigProps>(_props);
+  const auto &newScreenProps = *std::static_pointer_cast<const rct::RNSScreenStackHeaderConfigProps>(props);
 
   BOOL needsNavigationControllerLayout = !_initialPropsSet;
 
@@ -767,6 +810,8 @@
     _direction = [self getDirectionPropValue:newScreenProps.direction];
   }
 
+  _backTitleVisible = newScreenProps.backTitleVisible;
+
   // We cannot compare SharedColor because it is shared value.
   // We could compare color value, but it is more performant to just assign new value
   _titleColor = RCTUIColorFromSharedColor(newScreenProps.titleColor);
@@ -781,7 +826,9 @@
   }
 
   _initialPropsSet = YES;
-  _props = std::static_pointer_cast<facebook::react::RNSScreenStackHeaderConfigProps const>(props);
+  _props = std::static_pointer_cast<rct::RNSScreenStackHeaderConfigProps const>(props);
+
+  [super updateProps:props oldProps:oldProps];
 }
 
 #else
@@ -799,10 +846,19 @@
   }
 }
 
+/**
+ * Paper implementation of helper method for +loadBackButtonImageInViewController:withConfig:
+ * There is corresponding Fabric implementation (with different parameter type) in Fabric specific section.
+ */
++ (RCTImageSource *)imageSourceFromImageView:(RCTImageView *)view
+{
+  return view.imageSources[0];
+}
+
 #endif
 @end
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 Class<RCTComponentViewProtocol> RNSScreenStackHeaderConfigCls(void)
 {
   return RNSScreenStackHeaderConfig.class;
@@ -827,6 +883,7 @@ RCT_EXPORT_VIEW_PROPERTY(backTitle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(backTitleFontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(backTitleFontSize, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(backTitleVisible, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(blurEffect, UIBlurEffectStyle)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(direction, UISemanticContentAttribute)

package/ios/RNSScreenStackHeaderSubview.h

@@ -1,5 +1,5 @@
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
 #endif
 
@@ -10,7 +10,7 @@
 NS_ASSUME_NONNULL_BEGIN
 
 @interface RNSScreenStackHeaderSubview :
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
     RCTViewComponentView
 #else
     UIView
@@ -20,13 +20,12 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, weak) UIView *reactSuperview;
 
-#ifdef RN_FABRIC_ENABLED
-#else
 @property (nonatomic, weak) RCTBridge *bridge;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
 - (instancetype)initWithBridge:(RCTBridge *)bridge;
-
-#endif
+#endif // RCT_NEW_ARCH_ENABLED
 
 @end
 

package/ios/RNSScreenStackHeaderSubview.mm

@@ -1,7 +1,7 @@
 #import "RNSScreenStackHeaderSubview.h"
 #import "RNSConvert.h"
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
@@ -10,11 +10,15 @@
 #import <React/RCTFabricComponentsPlugins.h>
 #endif
 
+@interface RCTBridge (Private)
++ (RCTBridge *)currentBridge;
+@end
+
 @implementation RNSScreenStackHeaderSubview
 
 #pragma mark - Common
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 
 #pragma mark - Fabric specific
 
@@ -40,13 +44,8 @@
 {
   const auto &newHeaderSubviewProps =
       *std::static_pointer_cast<const facebook::react::RNSScreenStackHeaderSubviewProps>(props);
-  const auto &oldHeaderSubviewProps =
-      *std::static_pointer_cast<const facebook::react::RNSScreenStackHeaderSubviewProps>(_props);
-
-  if (newHeaderSubviewProps.type != oldHeaderSubviewProps.type) {
-    _type = [RNSConvert RNSScreenStackHeaderSubviewTypeFromCppEquivalent:newHeaderSubviewProps.type];
-  }
 
+  [self setType:[RNSConvert RNSScreenStackHeaderSubviewTypeFromCppEquivalent:newHeaderSubviewProps.type]];
   [super updateProps:props oldProps:oldProps];
 }
 
@@ -93,7 +92,17 @@
   [super reactSetFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
 }
 
-#endif // RN_FABRIC_ENABLED
+#endif // RCT_NEW_ARCH_ENABLED
+
+- (RCTBridge *)bridge
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+  return [RCTBridge currentBridge];
+#else
+  return _bridge;
+#endif // RCT_NEW_ARCH_ENABLED
+}
+
 @end
 
 @implementation RNSScreenStackHeaderSubviewManager
@@ -102,7 +111,7 @@ RCT_EXPORT_MODULE()
 
 RCT_EXPORT_VIEW_PROPERTY(type, RNSScreenStackHeaderSubviewType)
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #else
 - (UIView *)view
 {
@@ -112,7 +121,7 @@ RCT_EXPORT_VIEW_PROPERTY(type, RNSScreenStackHeaderSubviewType)
 
 @end
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 Class<RCTComponentViewProtocol> RNSScreenStackHeaderSubviewCls(void)
 {
   return RNSScreenStackHeaderSubview.class;

package/ios/RNSScreenWindowTraits.mm

@@ -174,8 +174,27 @@
       }
     }
     if (newOrientation != UIInterfaceOrientationUnknown) {
-      [[UIDevice currentDevice] setValue:@(newOrientation) forKey:@"orientation"];
-      [UIViewController attemptRotationToDeviceOrientation];
+      if (@available(iOS 16.0, *)) {
+        NSArray *array = [[[UIApplication sharedApplication] connectedScenes] allObjects];
+        UIWindowScene *scene = (UIWindowScene *)array[0];
+        UIWindowSceneGeometryPreferencesIOS *geometryPreferences =
+            [[UIWindowSceneGeometryPreferencesIOS alloc] initWithInterfaceOrientations:orientationMask];
+        [scene requestGeometryUpdateWithPreferences:geometryPreferences
+                                       errorHandler:^(NSError *_Nonnull error){
+                                       }];
+
+        // `attemptRotationToDeviceOrientation` is deprecated for modern OS versions
+        // so we need to use `setNeedsUpdateOfSupportedInterfaceOrientations`
+        UIViewController *topController = [UIApplication sharedApplication].keyWindow.rootViewController;
+        while (topController.presentedViewController) {
+          topController = topController.presentedViewController;
+        }
+
+        [topController setNeedsUpdateOfSupportedInterfaceOrientations];
+      } else {
+        [[UIDevice currentDevice] setValue:@(newOrientation) forKey:@"orientation"];
+        [UIViewController attemptRotationToDeviceOrientation];
+      }
     }
   });
 #endif

package/ios/RNSSearchBar.h

@@ -1,7 +1,8 @@
 #import <UIKit/UIKit.h>
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
+#import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
 #endif
 
 #import <React/RCTBridge.h>
@@ -9,8 +10,8 @@
 #import <React/RCTViewManager.h>
 
 @interface RNSSearchBar :
-#ifdef RN_FABRIC_ENABLED
-    RCTViewComponentView <UISearchBarDelegate>
+#ifdef RCT_NEW_ARCH_ENABLED
+    RCTViewComponentView <UISearchBarDelegate, RCTRNSSearchBarViewProtocol>
 #else
     UIView <UISearchBarDelegate>
 #endif
@@ -19,7 +20,7 @@
 
 @property (nonatomic, retain) UISearchController *controller;
 
-#ifdef RN_FABRIC_ENABLED
+#ifdef RCT_NEW_ARCH_ENABLED
 #else
 @property (nonatomic, copy) RCTBubblingEventBlock onChangeText;
 @property (nonatomic, copy) RCTBubblingEventBlock onCancelButtonPress;