@amazon-devices/react-native-screens 2.0.1759135970 → 3.0.9000000000

package/ios/RNSScreenStackHeaderConfig.mm

@@ -8,7 +8,11 @@
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
+#import <rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h>
 #import "RCTImageComponentView+RNSScreenStackHeaderConfig.h"
+#ifndef NDEBUG
+#import <react/utils/ManagedObjectWrapper.h>
+#endif // !NDEBUG
 #else
 #import <React/RCTImageView.h>
 #import <React/RCTShadowView.h>
@@ -19,6 +23,8 @@
 #import <React/RCTFont.h>
 #import <React/RCTImageLoader.h>
 #import <React/RCTImageSource.h>
+#import "RNSConvert.h"
+#import "RNSDefines.h"
 #import "RNSScreen.h"
 #import "RNSScreenStackHeaderConfig.h"
 #import "RNSSearchBar.h"
@@ -54,13 +60,26 @@ namespace react = facebook::react;
 
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
+  NSDirectionalEdgeInsets _lastHeaderInsets;
 #ifdef RCT_NEW_ARCH_ENABLED
   BOOL _initialPropsSet;
+  react::RNSScreenStackHeaderConfigShadowNode::ConcreteState::Shared _state;
+#ifndef NDEBUG
+  RCTImageLoader *imageLoader;
+#endif // !NDEBUG
 #else
+  __weak RCTBridge *_bridge;
 #endif
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
+
+// Needed because of this: https://github.com/facebook/react-native/pull/37274
++ (void)load
+{
+  [super load];
+}
+
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if (self = [super initWithFrame:frame]) {
@@ -81,6 +100,16 @@ namespace react = facebook::react;
   }
   return self;
 }
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  if (self = [super init]) {
+    _bridge = bridge;
+    _translucent = YES;
+    [self initProps];
+  }
+  return self;
+}
 #endif
 
 - (void)initProps
@@ -88,8 +117,10 @@ namespace react = facebook::react;
   self.hidden = YES;
   _reactSubviews = [NSMutableArray new];
   _backTitleVisible = YES;
+  _blurEffect = RNSBlurEffectStyleNone;
 }
 
+RNS_IGNORE_SUPER_CALL_BEGIN
 - (UIView *)reactSuperview
 {
   return _screenView;
@@ -99,6 +130,7 @@ namespace react = facebook::react;
 {
   return _reactSubviews;
 }
+RNS_IGNORE_SUPER_CALL_END
 
 - (void)removeFromSuperview
 {
@@ -140,13 +172,16 @@ 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
   if (vc != nil && (nextVC == vc || isInFullScreenModal || isPresentingVC)) {
     [RNSScreenStackHeaderConfig updateViewController:self.screenView.controller withConfig:self animated:YES];
+    // As the header might have change in `updateViewController` we need to ensure that header height
+    // returned by the `onHeaderHeightChange` event is correct.
+    [self.screenView.controller calculateAndNotifyHeaderHeightChangeIsModal:NO];
   }
 }
 
@@ -160,6 +195,51 @@ namespace react = facebook::react;
   [navctr.view setNeedsLayout];
 }
 
+- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets
+{
+  if (_lastHeaderInsets.leading != insets.leading || _lastHeaderInsets.trailing != insets.trailing) {
+#ifdef RCT_NEW_ARCH_ENABLED
+    auto newState = react::RNSScreenStackHeaderConfigState{insets.leading, insets.trailing};
+    _state->updateState(std::move(newState));
+    _lastHeaderInsets = std::move(insets);
+#else
+    [_bridge.uiManager setLocalData:[[RNSHeaderConfigInsetsPayload alloc] initWithInsets:insets] forView:self];
+    _lastHeaderInsets = std::move(insets);
+#endif // RCT_NEW_ARCH_ENABLED
+  }
+}
+
+- (BOOL)hasSubviewOfType:(RNSScreenStackHeaderSubviewType)type
+{
+  for (RNSScreenStackHeaderSubview *subview in _reactSubviews) {
+    if (subview.type == type) {
+      return YES;
+    }
+  }
+
+  return NO;
+}
+
+- (BOOL)hasSubviewLeft
+{
+  return [self hasSubviewOfType:RNSScreenStackHeaderSubviewTypeLeft];
+}
+
+- (BOOL)shouldHeaderBeVisible
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+  return self.show;
+#else
+  return !self.hide;
+#endif // RCT_NEW_ARCH_ENABLED
+}
+
+- (BOOL)shouldBackButtonBeVisibleInNavigationBar:(nullable UINavigationBar *)navBar
+{
+  return navBar.backItem != nil && !self.hideBackButton &&
+      !(self.backButtonInCustomView == false && self.hasSubviewLeft);
+}
+
 + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
 {
   UINavigationBar *navbar = ((UINavigationController *)vc.parentViewController).navigationBar;
@@ -224,7 +304,7 @@ namespace react = facebook::react;
       [navbar setTitleTextAttributes:attrs];
     }
 
-#if !TARGET_OS_TV
+#if !TARGET_OS_TV && !TARGET_OS_VISION
     if (@available(iOS 11.0, *)) {
       if (config.largeTitle &&
           (config.largeTitleFontFamily || config.largeTitleFontSize || config.largeTitleFontWeight ||
@@ -264,10 +344,10 @@ namespace react = facebook::react;
   [button setTitleTextAttributes:attrs forState:UIControlStateFocused];
 }
 
-+ (UIImage *)loadBackButtonImageInViewController:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
+- (UIImage *)loadBackButtonImageInViewController:(UIViewController *)vc
 {
   BOOL hasBackButtonImage = NO;
-  for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
+  for (RNSScreenStackHeaderSubview *subview in self.reactSubviews) {
     if (subview.type == RNSScreenStackHeaderSubviewTypeBackButton && subview.subviews.count > 0) {
       hasBackButtonImage = YES;
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -293,6 +373,7 @@ namespace react = facebook::react;
 
       UIImage *image = imageView.image;
 
+#ifndef NDEBUG
       // IMPORTANT!!!
       // image can be nil in DEV MODE ONLY
       //
@@ -307,8 +388,9 @@ namespace react = facebook::react;
         // in DEV MODE we try to load from cache (we use private API for that as it is not exposed
         // publically in headers).
         RCTImageSource *imageSource = [RNSScreenStackHeaderConfig imageSourceFromImageView:imageView];
-        RCTImageLoader *imageLoader = [subview.bridge moduleForClass:[RCTImageLoader class]];
-
+#ifndef RCT_NEW_ARCH_ENABLED
+        RCTImageLoader *imageLoader = [_bridge moduleForClass:[RCTImageLoader class]];
+#endif // !RCT_NEW_ARCH_ENABLED
         image = [imageLoader.imageCache
             imageForUrl:imageSource.request.URL.absoluteString
                    size:imageSource.size
@@ -320,6 +402,7 @@ namespace react = facebook::react;
              resizeMode:imageView.resizeMode];
 #endif // RCT_NEW_ARCH_ENABLED
       }
+#endif // !NDEBUG
       if (image == nil) {
         // This will be triggered if the image is not in the cache yet. What we do is we wait until
         // the end of transition and run header config updates again. We could potentially wait for
@@ -336,7 +419,7 @@ namespace react = facebook::react;
 #if !TARGET_OS_TV
                 vc.navigationItem.hidesBackButton = YES;
 #endif
-                [config updateViewControllerIfNeeded];
+                [self updateViewControllerIfNeeded];
               }];
         }
         return [UIImage new];
@@ -353,6 +436,11 @@ namespace react = facebook::react;
                     withConfig:(RNSScreenStackHeaderConfig *)config
 {
   [self updateViewController:vc withConfig:config animated:animated];
+  // As the header might have change in `updateViewController` we need to ensure that header height
+  // returned by the `onHeaderHeightChange` event is correct.
+  if ([vc isKindOfClass:[RNSScreen class]]) {
+    [(RNSScreen *)vc calculateAndNotifyHeaderHeightChangeIsModal:NO];
+  }
 }
 
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
@@ -363,8 +451,16 @@ namespace react = facebook::react;
   UINavigationBarAppearance *appearance = [UINavigationBarAppearance new];
 
   if (config.backgroundColor && CGColorGetAlpha(config.backgroundColor.CGColor) == 0.) {
+    // Preserve the shadow properties in case the user wants to show the shadow on scroll.
+    UIColor *shadowColor = appearance.shadowColor;
+    UIImage *shadowImage = appearance.shadowImage;
     // transparent background color
     [appearance configureWithTransparentBackground];
+
+    if (!config.hideShadow) {
+      appearance.shadowColor = shadowColor;
+      appearance.shadowImage = shadowImage;
+    }
   } else {
     [appearance configureWithOpaqueBackground];
   }
@@ -374,13 +470,12 @@ namespace react = facebook::react;
     appearance.backgroundColor = config.backgroundColor;
   }
 
-  // TODO: implement blurEffect on Fabric
-#ifdef RCT_NEW_ARCH_ENABLED
-#else
-  if (config.blurEffect) {
-    appearance.backgroundEffect = [UIBlurEffect effectWithStyle:config.blurEffect];
+  if (config.blurEffect != RNSBlurEffectStyleNone) {
+    appearance.backgroundEffect =
+        [UIBlurEffect effectWithStyle:[RNSConvert tryConvertRNSBlurEffectStyleToUIBlurEffectStyle:config.blurEffect]];
+  } else {
+    appearance.backgroundEffect = nil;
   }
-#endif
 
   if (config.hideShadow) {
     appearance.shadowColor = nil;
@@ -389,9 +484,12 @@ namespace react = facebook::react;
   if (config.titleFontFamily || config.titleFontSize || config.titleFontWeight || config.titleColor) {
     NSMutableDictionary *attrs = [NSMutableDictionary new];
 
+    // Ignore changing header title color on visionOS
+#if !TARGET_OS_VISION
     if (config.titleColor) {
       attrs[NSForegroundColorAttributeName] = config.titleColor;
     }
+#endif
 
     NSString *family = config.titleFontFamily ?: nil;
     NSNumber *size = config.titleFontSize ?: @17;
@@ -414,9 +512,12 @@ namespace react = facebook::react;
       config.largeTitleColor || config.titleColor) {
     NSMutableDictionary *largeAttrs = [NSMutableDictionary new];
 
+    // Ignore changing header title color on visionOS
+#if !TARGET_OS_VISION
     if (config.largeTitleColor || config.titleColor) {
       largeAttrs[NSForegroundColorAttributeName] = config.largeTitleColor ? config.largeTitleColor : config.titleColor;
     }
+#endif
 
     NSString *largeFamily = config.largeTitleFontFamily ?: nil;
     NSNumber *largeSize = config.largeTitleFontSize ?: @34;
@@ -436,7 +537,7 @@ namespace react = facebook::react;
     appearance.largeTitleTextAttributes = largeAttrs;
   }
 
-  UIImage *backButtonImage = [self loadBackButtonImageInViewController:vc withConfig:config];
+  UIImage *backButtonImage = [config loadBackButtonImageInViewController:vc];
   if (backButtonImage) {
     [appearance setBackIndicatorImage:backButtonImage transitionMaskImage:backButtonImage];
   } else if (appearance.backIndicatorImage) {
@@ -453,16 +554,20 @@ namespace react = facebook::react;
   UINavigationItem *navitem = vc.navigationItem;
   UINavigationController *navctr = (UINavigationController *)vc.parentViewController;
 
+  // When modal is shown the underlying RNSScreen isn't attached to any navigation controller.
+  // During the modal dismissal transition this update method is called on this RNSScreen resulting in nil navctr.
+  // After the transition is completed it will be called again and will configure the navigation controller correctly.
+  // Also see: https://github.com/software-mansion/react-native-screens/pull/2336
+  if (navctr == nil) {
+    return;
+  }
+
   NSUInteger currentIndex = [navctr.viewControllers indexOfObject:vc];
   UINavigationItem *prevItem =
       currentIndex > 0 ? [navctr.viewControllers objectAtIndex:currentIndex - 1].navigationItem : nil;
 
   BOOL wasHidden = navctr.navigationBarHidden;
-#ifdef RCT_NEW_ARCH_ENABLED
-  BOOL shouldHide = config == nil || !config.show;
-#else
-  BOOL shouldHide = config == nil || config.hide;
-#endif
+  BOOL shouldHide = config == nil || !config.shouldHeaderBeVisible;
 
   if (!shouldHide && !config.translucent) {
     // when nav bar is not translucent we chage edgesForExtendedLayout to avoid system laying out
@@ -479,8 +584,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) {
@@ -497,8 +611,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) {
@@ -521,9 +651,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) {
@@ -541,10 +679,26 @@ 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) {
-      scrollEdgeAppearance.backgroundColor = config.largeTitleBackgroundColor;
+      // Add support for using a fully transparent bar when the backgroundColor is set to transparent.
+      if (CGColorGetAlpha(config.largeTitleBackgroundColor.CGColor) == 0.) {
+        // This will also remove the background blur effect in the large title which is otherwise inherited from the
+        // standard appearance.
+        [scrollEdgeAppearance configureWithTransparentBackground];
+        // This must be set to nil otherwise a default view will be added to the navigation bar background with an
+        // opaque background.
+        scrollEdgeAppearance.backgroundColor = nil;
+      } else {
+        scrollEdgeAppearance.backgroundColor = config.largeTitleBackgroundColor;
+      }
     }
     if (config.largeTitleHideShadow) {
       scrollEdgeAppearance.shadowColor = nil;
@@ -556,7 +710,7 @@ namespace react = facebook::react;
 #if !TARGET_OS_TV
     // updating backIndicatotImage does not work when called during transition. On iOS pre 13 we need
     // to update it before the navigation starts.
-    UIImage *backButtonImage = [self loadBackButtonImageInViewController:vc withConfig:config];
+    UIImage *backButtonImage = [config loadBackButtonImageInViewController:vc];
     if (backButtonImage) {
       navctr.navigationBar.backIndicatorImage = backButtonImage;
       navctr.navigationBar.backIndicatorTransitionMaskImage = backButtonImage;
@@ -574,6 +728,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
@@ -659,6 +815,7 @@ namespace react = facebook::react;
   }
 }
 
+RNS_IGNORE_SUPER_CALL_BEGIN
 - (void)insertReactSubview:(RNSScreenStackHeaderSubview *)subview atIndex:(NSInteger)atIndex
 {
   [_reactSubviews insertObject:subview atIndex:atIndex];
@@ -669,12 +826,7 @@ namespace react = facebook::react;
 {
   [_reactSubviews removeObject:subview];
 }
-
-- (void)didUpdateReactSubviews
-{
-  [super didUpdateReactSubviews];
-  [self updateViewControllerIfNeeded];
-}
+RNS_IGNORE_SUPER_CALL_BEGIN
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #pragma mark - Fabric specific
@@ -696,13 +848,52 @@ namespace react = facebook::react;
 
   //  [_reactSubviews insertObject:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
   [self insertReactSubview:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
+
+  // TODO: This could be called only once per transaction.
   [self updateViewControllerIfNeeded];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
+  BOOL isGoingToBeRemoved = _screenView.isMarkedForUnmountInCurrentTransaction;
+  if (isGoingToBeRemoved) {
+    // 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];
+  if (!isGoingToBeRemoved) {
+    [self updateViewControllerIfNeeded];
+  }
+}
+
+- (void)replaceNavigationBarViewsWithSnapshotOfSubview:(RNSScreenStackHeaderSubview *)childComponentView
+{
+  if (childComponentView.window != nil) {
+    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)
@@ -718,6 +909,9 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
       return RCTResizeModeCenter;
     case react::ImageResizeMode::Repeat:
       return RCTResizeModeRepeat;
+    default:
+      // Both RCTConvert and ImageProps use this as a default as of RN 0.76
+      return RCTResizeModeStretch;
   }
 }
 
@@ -727,7 +921,7 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
  */
 + (RCTImageSource *)imageSourceFromImageView:(RCTImageComponentView *)view
 {
-  auto const imageProps = *std::static_pointer_cast<const react::ImageProps>(view.props);
+  const auto &imageProps = *std::static_pointer_cast<const react::ImageProps>(view.props);
   react::ImageSource cppImageSource = imageProps.sources.at(0);
   auto imageSize = CGSize{cppImageSource.size.width, cppImageSource.size.height};
   NSURLRequest *request =
@@ -744,11 +938,7 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
 {
   [super prepareForRecycle];
   _initialPropsSet = NO;
-}
-
-+ (react::ComponentDescriptorProvider)componentDescriptorProvider
-{
-  return react::concreteComponentDescriptorProvider<react::RNSScreenStackHeaderConfigComponentDescriptor>();
+  _lastHeaderInsets = NSDirectionalEdgeInsets{};
 }
 
 - (NSNumber *)getFontSizePropValue:(int)value
@@ -758,14 +948,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
@@ -804,6 +989,7 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
   _largeTitleFontWeight = RCTNSStringFromStringNilIfEmpty(newScreenProps.largeTitleFontWeight);
   _largeTitleFontSize = [self getFontSizePropValue:newScreenProps.largeTitleFontSize];
   _largeTitleHideShadow = newScreenProps.largeTitleHideShadow;
+  _largeTitleBackgroundColor = RCTUIColorFromSharedColor(newScreenProps.largeTitleBackgroundColor);
 
   _backTitle = RCTNSStringFromStringNilIfEmpty(newScreenProps.backTitle);
   if (newScreenProps.backTitleFontFamily != oldScreenProps.backTitleFontFamily) {
@@ -812,9 +998,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;
@@ -826,6 +1014,10 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
   _color = RCTUIColorFromSharedColor(newScreenProps.color);
   _backgroundColor = RCTUIColorFromSharedColor(newScreenProps.backgroundColor);
 
+  if (newScreenProps.blurEffect != oldScreenProps.blurEffect) {
+    _blurEffect = [RNSConvert RNSBlurEffectStyleFromCppEquivalent:newScreenProps.blurEffect];
+  }
+
   [self updateViewControllerIfNeeded];
 
   if (needsNavigationControllerLayout) {
@@ -838,9 +1030,25 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
   [super updateProps:props oldProps:oldProps];
 }
 
+- (void)updateState:(const facebook::react::State::Shared &)state
+           oldState:(const facebook::react::State::Shared &)oldState
+{
+  _state = std::static_pointer_cast<const react::RNSScreenStackHeaderConfigShadowNode::ConcreteState>(state);
+#ifndef NDEBUG
+  if (auto imgLoaderPtr = _state.get()->getData().getImageLoader().lock()) {
+    imageLoader = react::unwrapManagedObject(imgLoaderPtr);
+  }
+#endif // !NDEBUG
+}
+
 #else
 #pragma mark - Paper specific
 
+- (void)didUpdateReactSubviews
+{
+  [self updateViewControllerIfNeeded];
+}
+
 - (void)didSetProps:(NSArray<NSString *> *)changedProps
 {
   [super didSetProps:changedProps];
@@ -876,11 +1084,21 @@ Class<RCTComponentViewProtocol> RNSScreenStackHeaderConfigCls(void)
 
 RCT_EXPORT_MODULE()
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+
 - (UIView *)view
 {
-  return [RNSScreenStackHeaderConfig new];
+  return [[RNSScreenStackHeaderConfig alloc] initWithBridge:self.bridge];
 }
 
+- (RCTShadowView *)shadowView
+{
+  return [RNSScreenStackHeaderConfigShadowView new];
+}
+
+#endif // RCT_NEW_ARCH_ENABLED
+
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleFontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleFontSize, NSNumber)
@@ -891,7 +1109,7 @@ 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(blurEffect, RNSBlurEffectStyle)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(direction, UISemanticContentAttribute)
 RCT_EXPORT_VIEW_PROPERTY(largeTitle, BOOL)
@@ -905,48 +1123,89 @@ 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
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+
+@implementation RNSHeaderConfigInsetsPayload
+
+- (instancetype)init
+{
+  return [self initWithInsets:NSDirectionalEdgeInsets{}];
+}
+
+- (instancetype)initWithInsets:(NSDirectionalEdgeInsets)insets
+{
+  if (self = [super init]) {
+    self.insets = insets;
+  }
+  return self;
+}
+
+@end
+
+@implementation RNSScreenStackHeaderConfigShadowView {
+}
+
+- (void)setLocalData:(NSObject *)localData
+{
+  if ([localData isKindOfClass:RNSHeaderConfigInsetsPayload.class]) {
+    RNSHeaderConfigInsetsPayload *payload = (RNSHeaderConfigInsetsPayload *)localData;
+    [self setPaddingStart:YGValue{.value = (float)payload.insets.leading, .unit = YGUnitPoint}];
+    [self setPaddingEnd:YGValue{.value = (float)payload.insets.trailing, .unit = YGUnitPoint}];
+
+    // Trigger layout prop recomputation
+    [self didSetProps:@[]];
+  } else {
+    [super setLocalData:localData];
+  }
+}
+
+@end
+#endif
+
 @implementation RCTConvert (RNSScreenStackHeader)
 
 + (NSMutableDictionary *)blurEffectsForIOSVersion
 {
   NSMutableDictionary *blurEffects = [NSMutableDictionary new];
   [blurEffects addEntriesFromDictionary:@{
-    @"extraLight" : @(UIBlurEffectStyleExtraLight),
-    @"light" : @(UIBlurEffectStyleLight),
-    @"dark" : @(UIBlurEffectStyleDark),
+    @"none" : @(RNSBlurEffectStyleNone),
+    @"extraLight" : @(RNSBlurEffectStyleExtraLight),
+    @"light" : @(RNSBlurEffectStyleLight),
+    @"dark" : @(RNSBlurEffectStyleDark),
   }];
 
   if (@available(iOS 10.0, *)) {
     [blurEffects addEntriesFromDictionary:@{
-      @"regular" : @(UIBlurEffectStyleRegular),
-      @"prominent" : @(UIBlurEffectStyleProminent),
+      @"regular" : @(RNSBlurEffectStyleRegular),
+      @"prominent" : @(RNSBlurEffectStyleProminent),
     }];
   }
 #if !TARGET_OS_TV && defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
     [blurEffects addEntriesFromDictionary:@{
-      @"systemUltraThinMaterial" : @(UIBlurEffectStyleSystemUltraThinMaterial),
-      @"systemThinMaterial" : @(UIBlurEffectStyleSystemThinMaterial),
-      @"systemMaterial" : @(UIBlurEffectStyleSystemMaterial),
-      @"systemThickMaterial" : @(UIBlurEffectStyleSystemThickMaterial),
-      @"systemChromeMaterial" : @(UIBlurEffectStyleSystemChromeMaterial),
-      @"systemUltraThinMaterialLight" : @(UIBlurEffectStyleSystemUltraThinMaterialLight),
-      @"systemThinMaterialLight" : @(UIBlurEffectStyleSystemThinMaterialLight),
-      @"systemMaterialLight" : @(UIBlurEffectStyleSystemMaterialLight),
-      @"systemThickMaterialLight" : @(UIBlurEffectStyleSystemThickMaterialLight),
-      @"systemChromeMaterialLight" : @(UIBlurEffectStyleSystemChromeMaterialLight),
-      @"systemUltraThinMaterialDark" : @(UIBlurEffectStyleSystemUltraThinMaterialDark),
-      @"systemThinMaterialDark" : @(UIBlurEffectStyleSystemThinMaterialDark),
-      @"systemMaterialDark" : @(UIBlurEffectStyleSystemMaterialDark),
-      @"systemThickMaterialDark" : @(UIBlurEffectStyleSystemThickMaterialDark),
-      @"systemChromeMaterialDark" : @(UIBlurEffectStyleSystemChromeMaterialDark),
+      @"systemUltraThinMaterial" : @(RNSBlurEffectStyleSystemUltraThinMaterial),
+      @"systemThinMaterial" : @(RNSBlurEffectStyleSystemThinMaterial),
+      @"systemMaterial" : @(RNSBlurEffectStyleSystemMaterial),
+      @"systemThickMaterial" : @(RNSBlurEffectStyleSystemThickMaterial),
+      @"systemChromeMaterial" : @(RNSBlurEffectStyleSystemChromeMaterial),
+      @"systemUltraThinMaterialLight" : @(RNSBlurEffectStyleSystemUltraThinMaterialLight),
+      @"systemThinMaterialLight" : @(RNSBlurEffectStyleSystemThinMaterialLight),
+      @"systemMaterialLight" : @(RNSBlurEffectStyleSystemMaterialLight),
+      @"systemThickMaterialLight" : @(RNSBlurEffectStyleSystemThickMaterialLight),
+      @"systemChromeMaterialLight" : @(RNSBlurEffectStyleSystemChromeMaterialLight),
+      @"systemUltraThinMaterialDark" : @(RNSBlurEffectStyleSystemUltraThinMaterialDark),
+      @"systemThinMaterialDark" : @(RNSBlurEffectStyleSystemThinMaterialDark),
+      @"systemMaterialDark" : @(RNSBlurEffectStyleSystemMaterialDark),
+      @"systemThickMaterialDark" : @(RNSBlurEffectStyleSystemThickMaterialDark),
+      @"systemChromeMaterialDark" : @(RNSBlurEffectStyleSystemChromeMaterialDark),
     }];
   }
 #endif
@@ -962,6 +1221,16 @@ RCT_ENUM_CONVERTER(
     UISemanticContentAttributeUnspecified,
     integerValue)
 
-RCT_ENUM_CONVERTER(UIBlurEffectStyle, ([self blurEffectsForIOSVersion]), UIBlurEffectStyleExtraLight, integerValue)
+RCT_ENUM_CONVERTER(
+    UINavigationItemBackButtonDisplayMode,
+    (@{
+      @"default" : @(UINavigationItemBackButtonDisplayModeDefault),
+      @"generic" : @(UINavigationItemBackButtonDisplayModeGeneric),
+      @"minimal" : @(UINavigationItemBackButtonDisplayModeMinimal),
+    }),
+    UINavigationItemBackButtonDisplayModeDefault,
+    integerValue)
+
+RCT_ENUM_CONVERTER(RNSBlurEffectStyle, ([self blurEffectsForIOSVersion]), RNSBlurEffectStyleNone, integerValue)
 
 @end