react-native-screens 3.13.1 → 3.14.0

package/ios/{RNSScreenStackAnimator.m → RNSScreenStackAnimator.mm}

@@ -1,7 +1,8 @@
 #import "RNSScreenStackAnimator.h"
-#import "RNSScreen.h"
 #import "RNSScreenStack.h"
 
+#import "RNSScreen.h"
+
 // proportions to default transition duration
 static const float RNSSlideOpenTransitionDurationProportion = 1;
 static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.35;
@@ -29,11 +30,11 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
   if (_operation == UINavigationControllerOperationPush) {
     UIViewController *toViewController =
         [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
-    screen = (RNSScreenView *)toViewController.view;
+    screen = ((RNSScreen *)toViewController).screenView;
   } else if (_operation == UINavigationControllerOperationPop) {
     UIViewController *fromViewController =
         [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
-    screen = (RNSScreenView *)fromViewController.view;
+    screen = ((RNSScreen *)fromViewController).screenView;
   }
 
   if (screen != nil && screen.stackAnimation == RNSScreenStackAnimationNone) {
@@ -57,9 +58,9 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
 
   RNSScreenView *screen;
   if (_operation == UINavigationControllerOperationPush) {
-    screen = (RNSScreenView *)toViewController.view;
+    screen = ((RNSScreen *)toViewController).screenView;
   } else if (_operation == UINavigationControllerOperationPop) {
-    screen = (RNSScreenView *)fromViewController.view;
+    screen = ((RNSScreen *)fromViewController).screenView;
   }
 
   if (screen != nil) {
@@ -111,6 +112,7 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
         }
         completion:^(BOOL finished) {
           fromViewController.view.transform = CGAffineTransformIdentity;
+          toViewController.view.transform = CGAffineTransformIdentity;
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
   } else if (_operation == UINavigationControllerOperationPop) {
@@ -122,9 +124,8 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
       fromViewController.view.transform = rightTransform;
     };
     void (^completionBlock)(BOOL) = ^(BOOL finished) {
-      if (transitionContext.transitionWasCancelled) {
-        toViewController.view.transform = CGAffineTransformIdentity;
-      }
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      toViewController.view.transform = CGAffineTransformIdentity;
       [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
     };
 
@@ -157,6 +158,7 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
           toViewController.view.alpha = 1.0;
         }
         completion:^(BOOL finished) {
+          toViewController.view.alpha = 1.0;
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
   } else if (_operation == UINavigationControllerOperationPop) {
@@ -167,9 +169,8 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
           fromViewController.view.alpha = 0.0;
         }
         completion:^(BOOL finished) {
-          if (transitionContext.transitionWasCancelled) {
-            toViewController.view.transform = CGAffineTransformIdentity;
-          }
+          fromViewController.view.alpha = 1.0;
+
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
   }
@@ -192,6 +193,7 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
         }
         completion:^(BOOL finished) {
           fromViewController.view.transform = CGAffineTransformIdentity;
+          toViewController.view.transform = CGAffineTransformIdentity;
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
   } else if (_operation == UINavigationControllerOperationPop) {
@@ -203,9 +205,8 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
       fromViewController.view.transform = topBottomTransform;
     };
     void (^completionBlock)(BOOL) = ^(BOOL finished) {
-      if (transitionContext.transitionWasCancelled) {
-        toViewController.view.transform = CGAffineTransformIdentity;
-      }
+      fromViewController.view.transform = CGAffineTransformIdentity;
+      toViewController.view.transform = CGAffineTransformIdentity;
       [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
     };
 
@@ -273,6 +274,10 @@ static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
           fromViewController.view.transform = topBottomTransform;
         }
         completion:^(BOOL finished) {
+          fromViewController.view.transform = CGAffineTransformIdentity;
+          toViewController.view.transform = CGAffineTransformIdentity;
+          fromViewController.view.alpha = 1.0;
+          toViewController.view.alpha = 1.0;
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
     [UIView animateWithDuration:transitionDuration * RNSFadeCloseTransitionDurationProportion // defaults to 0.15 s

package/ios/RNSScreenStackHeaderConfig.h

@@ -1,13 +1,30 @@
-#import <React/RCTConvert.h>
+#ifdef RN_FABRIC_ENABLED
+#import <React/RCTViewComponentView.h>
+#else
 #import <React/RCTViewManager.h>
+#endif
 
+#import <React/RCTConvert.h>
 #import "RNSScreen.h"
+#import "RNSScreenStackHeaderSubview.h"
 #import "RNSSearchBar.h"
 
-@interface RNSScreenStackHeaderConfig : UIView
+@interface RNSScreenStackHeaderConfig :
+#ifdef RN_FABRIC_ENABLED
+    RCTViewComponentView
+#else
+    UIView
+#endif
 
 @property (nonatomic, weak) RNSScreenView *screenView;
 
+#ifdef RN_FABRIC_ENABLED
+@property (nonatomic) BOOL show;
+#else
+@property (nonatomic) UIBlurEffectStyle blurEffect;
+@property (nonatomic) BOOL hide;
+#endif
+
 @property (nonatomic, retain) NSString *title;
 @property (nonatomic, retain) NSString *titleFontFamily;
 @property (nonatomic, retain) NSNumber *titleFontSize;
@@ -17,9 +34,7 @@
 @property (nonatomic, retain) NSString *backTitleFontFamily;
 @property (nonatomic, retain) NSNumber *backTitleFontSize;
 @property (nonatomic, retain) UIColor *backgroundColor;
-@property (nonatomic) UIBlurEffectStyle blurEffect;
 @property (nonatomic, retain) UIColor *color;
-@property (nonatomic) BOOL hide;
 @property (nonatomic) BOOL largeTitle;
 @property (nonatomic, retain) NSString *largeTitleFontFamily;
 @property (nonatomic, retain) NSNumber *largeTitleFontSize;
@@ -28,10 +43,10 @@
 @property (nonatomic) BOOL largeTitleHideShadow;
 @property (nonatomic, retain) UIColor *largeTitleColor;
 @property (nonatomic) BOOL hideBackButton;
-@property (nonatomic) BOOL backButtonInCustomView;
 @property (nonatomic) BOOL disableBackButtonMenu;
 @property (nonatomic) BOOL hideShadow;
 @property (nonatomic) BOOL translucent;
+@property (nonatomic) BOOL backButtonInCustomView;
 @property (nonatomic) UISemanticContentAttribute direction;
 
 + (void)willShowViewController:(UIViewController *)vc
@@ -44,25 +59,9 @@
 
 @end
 
-typedef NS_ENUM(NSInteger, RNSScreenStackHeaderSubviewType) {
-  RNSScreenStackHeaderSubviewTypeBackButton,
-  RNSScreenStackHeaderSubviewTypeLeft,
-  RNSScreenStackHeaderSubviewTypeRight,
-  RNSScreenStackHeaderSubviewTypeTitle,
-  RNSScreenStackHeaderSubviewTypeCenter,
-  RNSScreenStackHeaderSubviewTypeSearchBar,
-};
-
 @interface RCTConvert (RNSScreenStackHeader)
 
-+ (RNSScreenStackHeaderSubviewType)RNSScreenStackHeaderSubviewType:(id)json;
 + (UIBlurEffectStyle)UIBlurEffectStyle:(id)json;
 + (UISemanticContentAttribute)UISemanticContentAttribute:(id)json;
 
 @end
-
-@interface RNSScreenStackHeaderSubviewManager : RCTViewManager
-
-@property (nonatomic) RNSScreenStackHeaderSubviewType type;
-
-@end

package/ios/{RNSScreenStackHeaderConfig.m → RNSScreenStackHeaderConfig.mm}

@@ -1,16 +1,28 @@
-#import "RNSScreenStackHeaderConfig.h"
-#import "RNSScreen.h"
-#import "RNSSearchBar.h"
-
+#ifdef RN_FABRIC_ENABLED
+#import <React/RCTConversions.h>
+#import <React/UIView+React.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 "RCTFabricComponentsPlugins.h"
+#else
 #import <React/RCTBridge.h>
-#import <React/RCTFont.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/RCTFont.h>
+#import "RNSScreen.h"
+#import "RNSScreenStackHeaderConfig.h"
+#import "RNSSearchBar.h"
+#import "RNSUIBarButtonItem.h"
 
+#ifdef RN_FABRIC_ENABLED
+#else
 // 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)
@@ -20,67 +32,30 @@
 @interface RCTImageLoader (Private)
 - (id<RCTImageCache>)imageCache;
 @end
-
-@interface RNSScreenStackHeaderSubview : UIView
-
-@property (nonatomic, weak) RCTBridge *bridge;
-@property (nonatomic, weak) UIView *reactSuperview;
-@property (nonatomic) RNSScreenStackHeaderSubviewType type;
-
-- (instancetype)initWithBridge:(RCTBridge *)bridge;
-
-@end
-
-@implementation RNSScreenStackHeaderSubview
-
-- (instancetype)initWithBridge:(RCTBridge *)bridge
-{
-  if (self = [super init]) {
-    _bridge = bridge;
-  }
-  return self;
-}
-
-- (void)reactSetFrame:(CGRect)frame
-{
-  // Block any attempt to set coordinates on RNSScreenStackHeaderSubview. This
-  // makes UINavigationBar the only one to control the position of header content.
-  [super reactSetFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
-}
-
-@end
-
-@interface RNSUIBarButtonItem : UIBarButtonItem
-
-@property (nonatomic) BOOL menuHidden;
-
-@end
-
-@implementation RNSUIBarButtonItem
-
-- (void)setMenuHidden:(BOOL)menuHidden
-{
-  _menuHidden = menuHidden;
-}
-
-#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_14_0) && \
-    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
-- (void)setMenu:(UIMenu *)menu
-{
-  if (@available(iOS 14.0, *)) {
-    if (!_menuHidden) {
-      super.menu = menu;
-    }
-  }
-}
 #endif
 
-@end
-
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
+#ifdef RN_FABRIC_ENABLED
+  BOOL _initialPropsSet;
+#else
+#endif
 }
 
+#ifdef RN_FABRIC_ENABLED
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const facebook::react::RNSScreenStackHeaderConfigProps>();
+    _props = defaultProps;
+    self.hidden = YES;
+    _show = YES;
+    _translucent = NO;
+    _reactSubviews = [NSMutableArray new];
+  }
+  return self;
+}
+#else
 - (instancetype)init
 {
   if (self = [super init]) {
@@ -90,16 +65,11 @@
   }
   return self;
 }
+#endif
 
-- (void)insertReactSubview:(RNSScreenStackHeaderSubview *)subview atIndex:(NSInteger)atIndex
-{
-  [_reactSubviews insertObject:subview atIndex:atIndex];
-  subview.reactSuperview = self;
-}
-
-- (void)removeReactSubview:(RNSScreenStackHeaderSubview *)subview
+- (UIView *)reactSuperview
 {
-  [_reactSubviews removeObject:subview];
+  return _screenView;
 }
 
 - (NSArray<UIView *> *)reactSubviews
@@ -107,11 +77,6 @@
   return _reactSubviews;
 }
 
-- (UIView *)reactSuperview
-{
-  return _screenView;
-}
-
 - (void)removeFromSuperview
 {
   [super removeFromSuperview];
@@ -164,27 +129,12 @@
 
 - (void)layoutNavigationControllerView
 {
-  UIViewController *vc = _screenView.controller;
-  UINavigationController *navctr = vc.navigationController;
-  [navctr.view setNeedsLayout];
-}
-
-- (void)didSetProps:(NSArray<NSString *> *)changedProps
-{
-  [super didSetProps:changedProps];
-  [self updateViewControllerIfNeeded];
   // We need to layout navigation controller view after translucent prop changes, because otherwise
   // frame of RNSScreen will not be changed and screen content will remain the same size.
   // For more details look at https://github.com/software-mansion/react-native-screens/issues/1158
-  if ([changedProps containsObject:@"translucent"]) {
-    [self layoutNavigationControllerView];
-  }
-}
-
-- (void)didUpdateReactSubviews
-{
-  [super didUpdateReactSubviews];
-  [self updateViewControllerIfNeeded];
+  UIViewController *vc = _screenView.controller;
+  UINavigationController *navctr = vc.navigationController;
+  [navctr.view setNeedsLayout];
 }
 
 + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
@@ -293,6 +243,9 @@
 
 + (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) {
@@ -359,6 +312,7 @@
       }
     }
   }
+#endif // RN_FABRIC_ENABLED
   return nil;
 }
 
@@ -388,9 +342,13 @@
     appearance.backgroundColor = config.backgroundColor;
   }
 
+  // TODO: implement blurEffect on Fabric
+#ifdef RN_FABRIC_ENABLED
+#else
   if (config.blurEffect) {
     appearance.backgroundEffect = [UIBlurEffect effectWithStyle:config.blurEffect];
   }
+#endif
 
   if (config.hideShadow) {
     appearance.shadowColor = nil;
@@ -446,12 +404,16 @@
     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
@@ -468,7 +430,11 @@
       currentIndex > 0 ? [navctr.viewControllers objectAtIndex:currentIndex - 1].navigationItem : nil;
 
   BOOL wasHidden = navctr.navigationBarHidden;
+#ifdef RN_FABRIC_ENABLED
+  BOOL shouldHide = config == nil || !config.show;
+#else
   BOOL shouldHide = config == nil || config.hide;
+#endif
 
   if (!shouldHide && !config.translucent) {
     // when nav bar is not translucent we chage edgesForExtendedLayout to avoid system laying out
@@ -572,6 +538,7 @@
   navitem.leftBarButtonItem = nil;
   navitem.rightBarButtonItem = nil;
   navitem.titleView = nil;
+
   for (RNSScreenStackHeaderSubview *subview in config.reactSubviews) {
     switch (subview.type) {
       case RNSScreenStackHeaderSubviewTypeLeft: {
@@ -609,8 +576,12 @@
           }
 #endif
         }
+        break;
       }
       case RNSScreenStackHeaderSubviewTypeBackButton: {
+#ifdef RN_FABRIC_ENABLED
+        RCTLogWarn(@"Back button subivew is not yet Fabric compatible in react-native-screens");
+#endif
         break;
       }
     }
@@ -647,8 +618,178 @@
   }
 }
 
+- (void)insertReactSubview:(RNSScreenStackHeaderSubview *)subview atIndex:(NSInteger)atIndex
+{
+  [_reactSubviews insertObject:subview atIndex:atIndex];
+  subview.reactSuperview = self;
+}
+
+- (void)removeReactSubview:(RNSScreenStackHeaderSubview *)subview
+{
+  [_reactSubviews removeObject:subview];
+}
+
+- (void)didUpdateReactSubviews
+{
+  [super didUpdateReactSubviews];
+  [self updateViewControllerIfNeeded];
+}
+
+#ifdef RN_FABRIC_ENABLED
+#pragma mark - Fabric specific
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  if (![childComponentView isKindOfClass:[RNSScreenStackHeaderSubview class]]) {
+    RCTLogError(@"ScreenStackHeader only accepts children of type ScreenStackHeaderSubview");
+    return;
+  }
+
+  RCTAssert(
+      childComponentView.superview == nil,
+      @"Attempt to mount already mounted component view. (parent: %@, child: %@, index: %@, existing parent: %@)",
+      self,
+      childComponentView,
+      @(index),
+      @([childComponentView.superview tag]));
+
+  //  [_reactSubviews insertObject:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
+  [self insertReactSubview:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
+  [self updateViewControllerIfNeeded];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_reactSubviews removeObject:(RNSScreenStackHeaderSubview *)childComponentView];
+  [childComponentView removeFromSuperview];
+}
+
+#pragma mark - RCTComponentViewProtocol
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  _initialPropsSet = NO;
+}
+
++ (facebook::react::ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return facebook::react::concreteComponentDescriptorProvider<
+      facebook::react::RNSScreenStackHeaderConfigComponentDescriptor>();
+}
+
+- (NSNumber *)getFontSizePropValue:(int)value
+{
+  if (value > 0)
+    return [NSNumber numberWithInt:value];
+  return nil;
+}
+
+- (UISemanticContentAttribute)getDirectionPropValue:(facebook::react::RNSScreenStackHeaderConfigDirection)direction
+{
+  switch (direction) {
+    case facebook::react::RNSScreenStackHeaderConfigDirection::Rtl:
+      return UISemanticContentAttributeForceRightToLeft;
+    case facebook::react::RNSScreenStackHeaderConfigDirection::Ltr:
+      return UISemanticContentAttributeForceLeftToRight;
+  }
+}
+
+- (void)updateProps:(facebook::react::Props::Shared const &)props
+           oldProps:(facebook::react::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);
+
+  BOOL needsNavigationControllerLayout = !_initialPropsSet;
+
+  if (newScreenProps.hidden != !_show) {
+    _show = !newScreenProps.hidden;
+    needsNavigationControllerLayout = YES;
+  }
+
+  if (newScreenProps.translucent != _translucent) {
+    _translucent = newScreenProps.translucent;
+    needsNavigationControllerLayout = YES;
+  }
+
+  if (newScreenProps.backButtonInCustomView != _backButtonInCustomView) {
+    [self setBackButtonInCustomView:newScreenProps.backButtonInCustomView];
+  }
+
+  _title = RCTNSStringFromStringNilIfEmpty(newScreenProps.title);
+  if (newScreenProps.titleFontFamily != oldScreenProps.titleFontFamily) {
+    _titleFontFamily = RCTNSStringFromStringNilIfEmpty(newScreenProps.titleFontFamily);
+  }
+  _titleFontWeight = RCTNSStringFromStringNilIfEmpty(newScreenProps.titleFontWeight);
+  _titleFontSize = [self getFontSizePropValue:newScreenProps.titleFontSize];
+  _hideShadow = newScreenProps.hideShadow;
+
+  _largeTitle = newScreenProps.largeTitle;
+  if (newScreenProps.largeTitleFontFamily != oldScreenProps.largeTitleFontFamily) {
+    _largeTitleFontFamily = RCTNSStringFromStringNilIfEmpty(newScreenProps.largeTitleFontFamily);
+  }
+  _largeTitleFontWeight = RCTNSStringFromStringNilIfEmpty(newScreenProps.largeTitleFontWeight);
+  _largeTitleFontSize = [self getFontSizePropValue:newScreenProps.largeTitleFontSize];
+  _largeTitleHideShadow = newScreenProps.largeTitleHideShadow;
+
+  _backTitle = RCTNSStringFromStringNilIfEmpty(newScreenProps.backTitle);
+  if (newScreenProps.backTitleFontFamily != oldScreenProps.backTitleFontFamily) {
+    _backTitleFontFamily = RCTNSStringFromStringNilIfEmpty(newScreenProps.backTitleFontFamily);
+  }
+  _backTitleFontSize = [self getFontSizePropValue:newScreenProps.backTitleFontSize];
+  _hideBackButton = newScreenProps.hideBackButton;
+  _disableBackButtonMenu = newScreenProps.disableBackButtonMenu;
+
+  if (newScreenProps.direction != oldScreenProps.direction) {
+    _direction = [self getDirectionPropValue:newScreenProps.direction];
+  }
+
+  // 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);
+  _largeTitleColor = RCTUIColorFromSharedColor(newScreenProps.largeTitleColor);
+  _color = RCTUIColorFromSharedColor(newScreenProps.color);
+  _backgroundColor = RCTUIColorFromSharedColor(newScreenProps.backgroundColor);
+
+  [self updateViewControllerIfNeeded];
+
+  if (needsNavigationControllerLayout) {
+    [self layoutNavigationControllerView];
+  }
+
+  _initialPropsSet = YES;
+  _props = std::static_pointer_cast<facebook::react::RNSScreenStackHeaderConfigProps const>(props);
+}
+
+#else
+#pragma mark - Paper specific
+
+- (void)didSetProps:(NSArray<NSString *> *)changedProps
+{
+  [super didSetProps:changedProps];
+  [self updateViewControllerIfNeeded];
+  // We need to layout navigation controller view after translucent prop changes, because otherwise
+  // frame of RNSScreen will not be changed and screen content will remain the same size.
+  // For more details look at https://github.com/software-mansion/react-native-screens/issues/1158
+  if ([changedProps containsObject:@"translucent"]) {
+    [self layoutNavigationControllerView];
+  }
+}
+
+#endif
 @end
 
+#ifdef RN_FABRIC_ENABLED
+Class<RCTComponentViewProtocol> RNSScreenStackHeaderConfigCls(void)
+{
+  return RNSScreenStackHeaderConfig.class;
+}
+#endif
+
 @implementation RNSScreenStackHeaderConfigManager
 
 RCT_EXPORT_MODULE()
@@ -729,19 +870,6 @@ RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
   return blurEffects;
 }
 
-RCT_ENUM_CONVERTER(
-    RNSScreenStackHeaderSubviewType,
-    (@{
-      @"back" : @(RNSScreenStackHeaderSubviewTypeBackButton),
-      @"left" : @(RNSScreenStackHeaderSubviewTypeLeft),
-      @"right" : @(RNSScreenStackHeaderSubviewTypeRight),
-      @"title" : @(RNSScreenStackHeaderSubviewTypeTitle),
-      @"center" : @(RNSScreenStackHeaderSubviewTypeCenter),
-      @"searchBar" : @(RNSScreenStackHeaderSubviewTypeSearchBar),
-    }),
-    RNSScreenStackHeaderSubviewTypeTitle,
-    integerValue)
-
 RCT_ENUM_CONVERTER(
     UISemanticContentAttribute,
     (@{
@@ -754,16 +882,3 @@ RCT_ENUM_CONVERTER(
 RCT_ENUM_CONVERTER(UIBlurEffectStyle, ([self blurEffectsForIOSVersion]), UIBlurEffectStyleExtraLight, integerValue)
 
 @end
-
-@implementation RNSScreenStackHeaderSubviewManager
-
-RCT_EXPORT_MODULE()
-
-RCT_EXPORT_VIEW_PROPERTY(type, RNSScreenStackHeaderSubviewType)
-
-- (UIView *)view
-{
-  return [[RNSScreenStackHeaderSubview alloc] initWithBridge:self.bridge];
-}
-
-@end

package/ios/RNSScreenStackHeaderSubview.h

@@ -0,0 +1,45 @@
+
+#ifdef RN_FABRIC_ENABLED
+#import <React/RCTViewComponentView.h>
+#endif
+
+#import <React/RCTConvert.h>
+#import <react/RCTViewManager.h>
+#import "RNSEnums.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNSScreenStackHeaderSubview :
+#ifdef RN_FABRIC_ENABLED
+    RCTViewComponentView
+#else
+    UIView
+#endif
+
+@property (nonatomic) RNSScreenStackHeaderSubviewType type;
+
+@property (nonatomic, weak) UIView *reactSuperview;
+
+#ifdef RN_FABRIC_ENABLED
+#else
+@property (nonatomic, weak) RCTBridge *bridge;
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge;
+
+#endif
+
+@end
+
+@interface RNSScreenStackHeaderSubviewManager : RCTViewManager
+
+@property (nonatomic) RNSScreenStackHeaderSubviewType type;
+
+@end
+
+@interface RCTConvert (RNSScreenStackHeaderSubview)
+
++ (RNSScreenStackHeaderSubviewType)RNSScreenStackHeaderSubviewType:(id)json;
+
+@end
+
+NS_ASSUME_NONNULL_END