react-native-screens 4.0.0-beta.1 → 4.0.0-beta.11

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.h

@@ -0,0 +1,32 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnscreens/EventEmitters.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include "FrameCorrectionModes.h"
+#include "RNSScreenStackHeaderConfigState.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+JSI_EXPORT extern const char RNSScreenStackHeaderConfigComponentName[];
+
+class JSI_EXPORT RNSScreenStackHeaderConfigShadowNode final
+    : public ConcreteViewShadowNode<
+          RNSScreenStackHeaderConfigComponentName,
+          RNSScreenStackHeaderConfigProps,
+          RNSScreenStackHeaderConfigEventEmitter,
+          RNSScreenStackHeaderConfigState> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+
+#pragma mark - ShadowNode overrides
+
+#pragma mark - Custom interface
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp

@@ -0,0 +1,23 @@
+#include "RNSScreenStackHeaderConfigState.h"
+
+namespace facebook {
+namespace react {
+
+#ifdef ANDROID
+folly::dynamic RNSScreenStackHeaderConfigState::getDynamic() const {
+  return folly::dynamic::object("paddingStart", paddingStart_)(
+      "paddingEnd_", paddingEnd_);
+}
+
+#endif
+
+Float RNSScreenStackHeaderConfigState::getPaddingStart() const noexcept {
+  return paddingStart_;
+}
+
+Float RNSScreenStackHeaderConfigState::getPaddingEnd() const noexcept {
+  return paddingEnd_;
+}
+
+} // namespace react
+} // namespace facebook

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h

@@ -0,0 +1,50 @@
+#pragma once
+
+#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/graphics/Float.h>
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+class JSI_EXPORT RNSScreenStackHeaderConfigState final {
+ public:
+  using Shared = std::shared_ptr<const RNSScreenStackHeaderConfigState>;
+
+  RNSScreenStackHeaderConfigState() = default;
+
+  RNSScreenStackHeaderConfigState(Float paddingStart, Float paddingEnd)
+      : paddingStart_{paddingStart}, paddingEnd_{paddingEnd} {}
+
+#ifdef ANDROID
+  RNSScreenStackHeaderConfigState(
+      RNSScreenStackHeaderConfigState const &previousState,
+      folly::dynamic data)
+      : paddingStart_{static_cast<Float>(data["paddingStart"].getDouble())},
+        paddingEnd_{static_cast<Float>(data["paddingEnd"].getDouble())} {}
+#endif
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const;
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
+
+#endif
+
+#pragma mark - Getters
+
+  [[nodiscard]] Float getPaddingStart() const noexcept;
+
+  [[nodiscard]] Float getPaddingEnd() const noexcept;
+
+ private:
+  Float paddingStart_{0.f};
+  Float paddingEnd_{0.f};
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h

@@ -0,0 +1,27 @@
+#pragma once
+
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#endif
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/rnscreens/utils/RectUtil.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSScreenStackHeaderSubviewShadowNode.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+class RNSScreenStackHeaderSubviewComponentDescriptor final
+    : public ConcreteComponentDescriptor<
+          RNSScreenStackHeaderSubviewShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.cpp

@@ -0,0 +1,8 @@
+#include "RNSScreenStackHeaderSubviewShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNSScreenStackHeaderSubviewComponentName[] =
+    "RNSScreenStackHeaderSubview";
+
+}

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.h

@@ -0,0 +1,32 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnscreens/EventEmitters.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include "FrameCorrectionModes.h"
+#include "RNSScreenStackHeaderSubviewState.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+JSI_EXPORT extern const char RNSScreenStackHeaderSubviewComponentName[];
+
+class JSI_EXPORT RNSScreenStackHeaderSubviewShadowNode final
+    : public ConcreteViewShadowNode<
+          RNSScreenStackHeaderSubviewComponentName,
+          RNSScreenStackHeaderSubviewProps,
+          RNSScreenStackHeaderSubviewEventEmitter,
+          RNSScreenStackHeaderSubviewState> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+
+#pragma mark - ShadowNode overrides
+
+#pragma mark - Custom interface
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.cpp

@@ -0,0 +1,15 @@
+#include "RNSScreenStackHeaderSubviewState.h"
+
+namespace facebook {
+namespace react {
+
+using namespace rnscreens;
+
+#ifdef ANDROID
+folly::dynamic RNSScreenStackHeaderSubviewState::getDynamic() const {
+  return folly::dynamic::object();
+}
+#endif
+
+} // namespace react
+} // namespace facebook

package/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/graphics/Float.h>
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+#include "FrameCorrectionModes.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+class JSI_EXPORT RNSScreenStackHeaderSubviewState final {
+ public:
+  using Shared = std::shared_ptr<const RNSScreenStackHeaderSubviewState>;
+
+  RNSScreenStackHeaderSubviewState() = default;
+
+#ifdef ANDROID
+  RNSScreenStackHeaderSubviewState(
+      RNSScreenStackHeaderSubviewState const &previousState,
+      folly::dynamic data) {}
+#endif
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const;
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
+#endif
+
+#pragma mark - Getters
+};
+
+} // namespace facebook::react

package/ios/RNSConvert.mm

@@ -53,7 +53,6 @@
   switch (stackAnimation) {
     // these four are intentionally grouped
     case react::RNSScreenStackAnimation::Slide_from_right:
-    case react::RNSScreenStackAnimation::Ios:
     case react::RNSScreenStackAnimation::Ios_from_right:
     case react::RNSScreenStackAnimation::Default:
       return RNSScreenStackAnimationDefault;

package/ios/RNSScreen.h

@@ -90,6 +90,7 @@ namespace react = facebook::react;
 @property (nonatomic) NSNumber *sheetLargestUndimmedDetent;
 @property (nonatomic) BOOL sheetGrabberVisible;
 @property (nonatomic) CGFloat sheetCornerRadius;
+@property (nonatomic) NSInteger sheetInitialDetent;
 @property (nonatomic) BOOL sheetExpandsWhenScrolledToEdge;
 #endif // !TARGET_OS_TV
 
@@ -99,6 +100,8 @@ namespace react = facebook::react;
 @property (nonatomic) react::LayoutMetrics newLayoutMetrics;
 @property (weak, nonatomic) RNSScreenStackHeaderConfig *config;
 @property (nonatomic, readonly) BOOL hasHeaderConfig;
+@property (nonatomic, readonly, getter=isMarkedForUnmountInCurrentTransaction)
+    BOOL markedForUnmountInCurrentTransaction;
 #else
 @property (nonatomic, copy) RCTDirectEventBlock onAppear;
 @property (nonatomic, copy) RCTDirectEventBlock onDisappear;
@@ -123,6 +126,10 @@ namespace react = facebook::react;
 - (void)updateBounds;
 - (void)notifyDismissedWithCount:(int)dismissCount;
 - (instancetype)initWithFrame:(CGRect)frame;
+/// Tell `Screen` that it will be unmounted in next transaction.
+/// The component needs this so that we can later decide whether to
+/// replace it with snapshot or not.
+- (void)willBeUnmountedInUpcomingTransaction;
 #else
 - (instancetype)initWithBridge:(RCTBridge *)bridge;
 #endif // RCT_NEW_ARCH_ENABLED
@@ -132,6 +139,14 @@ namespace react = facebook::react;
 - (BOOL)isModal;
 - (BOOL)isPresentedAsNativeModal;
 
+/**
+ * Tell `Screen` component that it has been removed from react state and can safely cleanup
+ * any retained resources.
+ *
+ * Note, that on old architecture this method might be called by RN via `RCTInvalidating` protocol.
+ */
+- (void)invalidate;
+
 /// Looks for header configuration in instance's `reactSubviews` and returns it. If not present returns `nil`.
 - (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig;
 

package/ios/RNSScreen.mm

@@ -123,6 +123,9 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
 #endif // !TARGET_OS_TV
   _sheetsScrollView = nil;
   _didSetSheetAllowedDetentsOnController = NO;
+#ifdef RCT_NEW_ARCH_ENABLED
+  _markedForUnmountInCurrentTransaction = NO;
+#endif // RCT_NEW_ARCH_ENABLED
 }
 
 - (UIViewController *)reactViewController
@@ -304,11 +307,25 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
 {
   int activityState = [activityStateOrNil intValue];
   if (activityStateOrNil != nil && activityState != -1 && activityState != _activityState) {
+    [self maybeAssertActivityStateProgressionOldValue:_activityState newValue:activityState];
     _activityState = activityState;
     [_reactSuperview markChildUpdated];
   }
 }
 
+- (void)maybeAssertActivityStateProgressionOldValue:(int)oldValue newValue:(int)newValue
+{
+  if (self.isNativeStackScreen && newValue < oldValue) {
+    RCTLogError(@"[RNScreens] activityState can only progress in NativeStack");
+  }
+}
+
+/// Note that this method works only after the screen is actually mounted under a screen stack view.
+- (BOOL)isNativeStackScreen
+{
+  return [_reactSuperview isKindOfClass:RNSScreenStackView.class];
+}
+
 #if !TARGET_OS_TV && !TARGET_OS_VISION
 - (void)setStatusBarStyle:(RNSStatusBarStyle)statusBarStyle
 {
@@ -745,6 +762,12 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
       self.controller.modalPresentationStyle == UIModalPresentationOverCurrentContext;
 }
 
+- (void)invalidate
+{
+  _controller = nil;
+  [_sheetsScrollView removeObserver:self forKeyPath:@"bounds" context:nil];
+}
+
 #if !TARGET_OS_TV && !TARGET_OS_VISION
 
 - (void)setPropertyForSheet:(UISheetPresentationController *)sheet
@@ -889,8 +912,8 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
     sheet.delegate = self;
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_16_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_16_0
-    if (_sheetAllowedDetents.count > 0) {
-      if (@available(iOS 16.0, *)) {
+    if (@available(iOS 16.0, *)) {
+      if (_sheetAllowedDetents.count > 0) {
         if (_sheetAllowedDetents.count == 1 && [_sheetAllowedDetents[0] integerValue] == SHEET_FIT_TO_CONTENTS) {
           // This is `fitToContents` case, where sheet should be just high to display its contents.
           // Paper: we do not set anything here, we will set once React computed layout of our React's children, namely
@@ -944,6 +967,26 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
       }
     }
 
+    if (_sheetInitialDetent > 0 && _sheetInitialDetent < _sheetAllowedDetents.count) {
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_16_0) && \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_16_0
+      if (@available(iOS 16.0, *)) {
+        UISheetPresentationControllerDetent *detent = sheet.detents[_sheetInitialDetent];
+        [self setSelectedDetentForSheet:sheet to:detent.identifier animate:YES];
+      } else
+#endif // Check for iOS >= 16
+      {
+        if (_sheetInitialDetent < 2) {
+          [self setSelectedDetentForSheet:sheet to:UISheetPresentationControllerDetentIdentifierLarge animate:YES];
+        } else {
+          RCTLogError(
+              @"[RNScreens] sheetInitialDetent out of bounds, on iOS versions below 16 sheetAllowedDetents is ignored in favor of an array of two system-defined detents");
+        }
+      }
+    } else if (_sheetInitialDetent != 0) {
+      RCTLogError(@"[RNScreens] sheetInitialDetent out of bounds for sheetAllowedDetents array");
+    }
+
     sheet.prefersScrollingExpandsWhenScrolledToEdge = _sheetExpandsWhenScrolledToEdge;
     [self setGrabberVisibleForSheet:sheet to:_sheetGrabberVisible animate:YES];
     [self setCornerRadiusForSheet:sheet to:_sheetCornerRadius animate:YES];
@@ -1052,6 +1095,11 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
   return _config != nil;
 }
 
+- (void)willBeUnmountedInUpcomingTransaction
+{
+  _markedForUnmountInCurrentTransaction = YES;
+}
+
 + (react::ComponentDescriptorProvider)componentDescriptorProvider
 {
   return react::concreteComponentDescriptorProvider<react::RNSScreenComponentDescriptor>();
@@ -1151,6 +1199,10 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
     [self setSheetAllowedDetents:[RNSConvert detentFractionsArrayFromVector:newScreenProps.sheetAllowedDetents]];
   }
 
+  if (newScreenProps.sheetInitialDetent != oldScreenProps.sheetInitialDetent) {
+    [self setSheetInitialDetent:newScreenProps.sheetInitialDetent];
+  }
+
   if (newScreenProps.sheetLargestUndimmedDetent != oldScreenProps.sheetLargestUndimmedDetent) {
     [self setSheetLargestUndimmedDetent:[NSNumber numberWithInt:newScreenProps.sheetLargestUndimmedDetent]];
   }
@@ -1237,11 +1289,6 @@ constexpr NSInteger SHEET_LARGEST_UNDIMMED_DETENT_NONE = -1;
   // subviews
 }
 
-- (void)invalidate
-{
-  _controller = nil;
-  [_sheetsScrollView removeObserver:self forKeyPath:@"bounds" context:nil];
-}
 #endif
 
 @end
@@ -1864,6 +1911,7 @@ RCT_EXPORT_VIEW_PROPERTY(sheetAllowedDetents, NSArray<NSNumber *> *);
 RCT_EXPORT_VIEW_PROPERTY(sheetLargestUndimmedDetent, NSNumber *);
 RCT_EXPORT_VIEW_PROPERTY(sheetGrabberVisible, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(sheetCornerRadius, CGFloat);
+RCT_EXPORT_VIEW_PROPERTY(sheetInitialDetent, NSInteger);
 RCT_EXPORT_VIEW_PROPERTY(sheetExpandsWhenScrolledToEdge, BOOL);
 #endif
 
@@ -1936,7 +1984,6 @@ RCT_ENUM_CONVERTER(
       @"slide_from_bottom" : @(RNSScreenStackAnimationSlideFromBottom),
       @"slide_from_right" : @(RNSScreenStackAnimationDefault),
       @"slide_from_left" : @(RNSScreenStackAnimationSlideFromLeft),
-      @"ios" : @(RNSScreenStackAnimationDefault),
       @"ios_from_right" : @(RNSScreenStackAnimationDefault),
       @"ios_from_left" : @(RNSScreenStackAnimationSlideFromLeft),
     }),

package/ios/RNSScreenStack.mm

@@ -25,6 +25,7 @@
 #import "RNSScreenStackAnimator.h"
 #import "RNSScreenStackHeaderConfig.h"
 #import "RNSScreenWindowTraits.h"
+#import "utils/UINavigationBar+RNSUtility.h"
 
 #import "UIView+RNSUtility.h"
 
@@ -82,6 +83,8 @@ namespace react = facebook::react;
     if (![screenController hasNestedStack] && isNotDismissingModal) {
       [screenController calculateAndNotifyHeaderHeightChangeIsModal:NO];
     }
+
+    [self maybeUpdateHeaderInsetsInShadowTreeForScreen:screenController];
   }
 }
 
@@ -94,6 +97,35 @@ namespace react = facebook::react;
 {
   return [self topViewController];
 }
+
+- (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenController
+{
+  // This might happen e.g. if there is only native title present in navigation bar.
+  if (self.navigationBar.subviews.count < 2) {
+    return;
+  }
+
+  auto headerConfig = screenController.screenView.findHeaderConfig;
+  if (headerConfig == nil || !headerConfig.shouldHeaderBeVisible) {
+    return;
+  }
+
+  NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
+  NSDirectionalEdgeInsets navBarContentMargins =
+      [self.navigationBar.rnscreens_findContentView directionalLayoutMargins];
+
+  BOOL isDisplayingBackButton = [headerConfig shouldBackButtonBeVisibleInNavigationBar:self.navigationBar];
+
+  // 44.0 is just "closed eyes default". It is so on device I've tested with, nothing more.
+  UIView *barButtonView = isDisplayingBackButton ? self.navigationBar.rnscreens_findBackButtonWrapperView : nil;
+  CGFloat platformBackButtonWidth = barButtonView != nil ? barButtonView.frame.size.width : 44.0f;
+
+  [headerConfig updateHeaderInsetsInShadowTreeTo:NSDirectionalEdgeInsets{
+                                                     .leading = navBarMargins.leading + navBarContentMargins.leading +
+                                                         (isDisplayingBackButton ? platformBackButtonWidth : 0),
+                                                     .trailing = navBarMargins.trailing + navBarContentMargins.trailing,
+                                                 }];
+}
 #endif
 
 @end
@@ -120,6 +152,13 @@ namespace react = facebook::react;
   UIPercentDrivenInteractiveTransition *_interactionController;
   __weak RNSScreenStackManager *_manager;
   BOOL _updateScheduled;
+#ifdef RCT_NEW_ARCH_ENABLED
+  /// Screens that are subject of `ShadowViewMutation::Type::Delete` mutation
+  /// in current transaction. This vector should be populated when we receive notification via
+  /// `RCTMountingObserving` protocol, that a transaction will be performed, and should
+  /// be cleaned up when we're notified that the transaction has been completed.
+  std::vector<__strong RNSScreenView *> _toBeDeletedScreens;
+#endif // RCT_NEW_ARCH_ENABLED
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -641,7 +680,7 @@ namespace react = facebook::react;
   NSMutableArray<UIViewController *> *pushControllers = [NSMutableArray new];
   NSMutableArray<UIViewController *> *modalControllers = [NSMutableArray new];
   for (RNSScreenView *screen in _reactSubviews) {
-    if (!screen.dismissed && screen.controller != nil) {
+    if (!screen.dismissed && screen.controller != nil && screen.activityState != RNSActivityStateInactive) {
       if (pushControllers.count == 0) {
         // first screen on the list needs to be places as "push controller"
         [pushControllers addObject:screen.controller];
@@ -914,7 +953,8 @@ namespace react = facebook::react;
 
 - (void)markChildUpdated
 {
-  // do nothing
+  // In native stack this should be called only for `preload` purposes.
+  [self updateContainer];
 }
 
 - (void)didUpdateChildren
@@ -1118,6 +1158,16 @@ namespace react = facebook::react;
   // `- [RNSScreenStackView mountingTransactionDidMount: withSurfaceTelemetry:]`
 }
 
+- (nullable RNSScreenView *)childScreenForTag:(react::Tag)tag
+{
+  for (RNSScreenView *child in _reactSubviews) {
+    if (child.tag == tag) {
+      return child;
+    }
+  }
+  return nil;
+}
+
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
   RNSScreenView *screenChildComponent = (RNSScreenView *)childComponentView;
@@ -1151,6 +1201,20 @@ namespace react = facebook::react;
   [screenChildComponent removeFromSuperview];
 }
 
+- (void)mountingTransactionWillMount:(const facebook::react::MountingTransaction &)transaction
+                withSurfaceTelemetry:(const facebook::react::SurfaceTelemetry &)surfaceTelemetry
+{
+  for (const auto &mutation : transaction.getMutations()) {
+    if (mutation.type == react::ShadowViewMutation::Delete) {
+      RNSScreenView *_Nullable toBeRemovedChild = [self childScreenForTag:mutation.oldChildShadowView.tag];
+      if (toBeRemovedChild != nil) {
+        [toBeRemovedChild willBeUnmountedInUpcomingTransaction];
+        _toBeDeletedScreens.push_back(toBeRemovedChild);
+      }
+    }
+  }
+}
+
 - (void)mountingTransactionDidMount:(const facebook::react::MountingTransaction &)transaction
                withSurfaceTelemetry:(const facebook::react::SurfaceTelemetry &)surfaceTelemetry
 {
@@ -1167,6 +1231,21 @@ namespace react = facebook::react;
       break;
     }
   }
+
+  if (!self->_toBeDeletedScreens.empty()) {
+    __weak RNSScreenStackView *weakSelf = self;
+    // We want to run after container updates are performed (transitions etc.)
+    dispatch_async(dispatch_get_main_queue(), ^{
+      RNSScreenStackView *_Nullable strongSelf = weakSelf;
+      if (strongSelf == nil) {
+        return;
+      }
+      for (RNSScreenView *screenRef : strongSelf->_toBeDeletedScreens) {
+        [screenRef invalidate];
+      }
+      strongSelf->_toBeDeletedScreens.clear();
+    });
+  }
 }
 
 - (void)prepareForRecycle

package/ios/RNSScreenStackHeaderConfig.h

@@ -1,6 +1,7 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
 #else
+#import <React/RCTShadowView.h>
 #import <React/RCTViewManager.h>
 #endif
 
@@ -61,12 +62,74 @@
                       animated:(BOOL)animated
                     withConfig:(RNSScreenStackHeaderConfig *)config;
 
+/**
+ * Allows to send information with insets to the corresponding node in shadow tree.
+ * Currently only horizontal insets are send through. Vertical ones are filtered out.
+ */
+- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets;
+
+/**
+ * Returns true iff subview of given `type` is present.
+ *
+ *  **Please note that the subviews are not mounted under the header config in HostTree**
+ * This method should serve only to check whether given subview type has been rendered.
+ */
+- (BOOL)hasSubviewOfType:(RNSScreenStackHeaderSubviewType)type;
+
+/**
+ * Returns `true` iff subview of type `left` is present.
+ *
+ *  **Please note that the subviews are not mounted under the header config in HostTree**
+ * This method should serve only to check whether given subview type has been rendered.
+ */
+- (BOOL)hasSubviewLeft;
+
+/**
+ * Returns
+ * - `YES` on Paper, when `self.hide == NO`
+ * - `YES` on Fabric, when `self.show == YES`
+ * - `NO` otherwise.
+ *
+ * Convenience method, so that we do not need ifdefs in every callsite.
+ */
+- (BOOL)shouldHeaderBeVisible;
+
+/**
+ * @returns`true` iff the applying this header config instance to a view controller will
+ * result in visible back button if feasible.
+ */
+- (BOOL)shouldBackButtonBeVisibleInNavigationBar:(nullable UINavigationBar *)navBar;
+
 @end
 
 @interface RNSScreenStackHeaderConfigManager : RCTViewManager
 
 @end
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+
+/**
+ * Used as local data send to shadow view on Paper. This helps us to provide Yoga
+ * with knowledge of native insets in the navigation bar.
+ */
+@interface RNSHeaderConfigInsetsPayload : NSObject
+
+@property (nonatomic) NSDirectionalEdgeInsets insets;
+
+- (instancetype)initWithInsets:(NSDirectionalEdgeInsets)insets NS_DESIGNATED_INITIALIZER;
+
+@end
+
+/**
+ * Custom shadow view for header config. This is used on Paper to provide Yoga
+ * with knowledge of native header insets (horizontal padding).
+ */
+@interface RNSScreenStackHeaderConfigShadowView : RCTShadowView
+
+@end
+#endif
+
 @interface RCTConvert (RNSScreenStackHeader)
 
 + (UIBlurEffectStyle)UIBlurEffectStyle:(id)json;