react-native-screens 4.5.0 → 4.6.0-beta.1

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

@@ -5,6 +5,18 @@ namespace facebook::react {
 extern const char RNSScreenStackHeaderConfigComponentName[] =
     "RNSScreenStackHeaderConfig";
 
+void RNSScreenStackHeaderConfigShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+  applyFrameCorrections();
+}
+
+void RNSScreenStackHeaderConfigShadowNode::applyFrameCorrections() {
+  ensureUnsealed();
+
+  const auto &stateData = getStateData();
+  layoutMetrics_.frame.origin.y = -stateData.frameSize.height;
+}
+
 #if !defined(ANDROID) && !defined(NDEBUG)
 void RNSScreenStackHeaderConfigShadowNode::setImageLoader(
     std::weak_ptr<void> imageLoader) {

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

@@ -25,13 +25,17 @@ class JSI_EXPORT RNSScreenStackHeaderConfigShadowNode final
   using StateData = ConcreteViewShadowNode::ConcreteStateData;
 
 #pragma mark - ShadowNode overrides
+  void layout(LayoutContext layoutContext) override;
 
 #pragma mark - Custom interface
+
 #if !defined(ANDROID) && !defined(NDEBUG)
   void setImageLoader(std::weak_ptr<void> imageLoader);
 #endif // !ANDROID && !NDEBUG
 
  private:
+  void applyFrameCorrections();
+
 #if !defined(ANDROID) && !defined(NDEBUG)
   StateData &getStateDataMutable();
 #endif // !ANDROID && !NDEBUG

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

@@ -1,3 +1,4 @@
+
 #include "RNSScreenStackHeaderConfigState.h"
 
 namespace facebook {
@@ -5,8 +6,9 @@ namespace react {
 
 #ifdef ANDROID
 folly::dynamic RNSScreenStackHeaderConfigState::getDynamic() const {
-  return folly::dynamic::object("paddingStart", paddingStart_)(
-      "paddingEnd_", paddingEnd_);
+  return folly::dynamic::object("frameWidth", frameSize.width)(
+      "frameHeight", frameSize.height)("paddingStart", paddingStart)(
+      "paddingEnd", paddingEnd);
 }
 #else // ANDROID
 #ifndef NDEBUG
@@ -22,13 +24,5 @@ std::weak_ptr<void> RNSScreenStackHeaderConfigState::getImageLoader()
 #endif // !NDEBUG
 #endif // ANDROID
 
-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

@@ -17,15 +17,20 @@ class JSI_EXPORT RNSScreenStackHeaderConfigState final {
 
   RNSScreenStackHeaderConfigState() = default;
 
-  RNSScreenStackHeaderConfigState(Float paddingStart, Float paddingEnd)
-      : paddingStart_{paddingStart}, paddingEnd_{paddingEnd} {}
+  // Used in iOS code
+  RNSScreenStackHeaderConfigState(Size frameSize_) : frameSize{frameSize_} {}
 
 #ifdef ANDROID
   RNSScreenStackHeaderConfigState(
       RNSScreenStackHeaderConfigState const &previousState,
       folly::dynamic data)
-      : paddingStart_{static_cast<Float>(data["paddingStart"].getDouble())},
-        paddingEnd_{static_cast<Float>(data["paddingEnd"].getDouble())} {}
+      : frameSize{
+          static_cast<Float>(data["frameWidth"].getDouble()),
+          static_cast<Float>(data["frameHeight"].getDouble())
+        },
+        paddingStart{static_cast<Float>(data["paddingStart"].getDouble())},
+        paddingEnd{static_cast<Float>(data["paddingEnd"].getDouble())}
+        {}
 #endif
 
 #ifdef ANDROID
@@ -40,15 +45,16 @@ class JSI_EXPORT RNSScreenStackHeaderConfigState final {
 #endif // !NDEBUG
 #endif // ANDROID
 
-#pragma mark - Getters
+  const Size frameSize{};
 
-  [[nodiscard]] Float getPaddingStart() const noexcept;
+#ifdef ANDROID
+  Float paddingStart{0.f};
+  Float paddingEnd{0.f};
+#endif // ANDROID
 
-  [[nodiscard]] Float getPaddingEnd() const noexcept;
+#pragma mark - Getters
 
  private:
-  Float paddingStart_{0.f};
-  Float paddingEnd_{0.f};
 #if !defined(ANDROID) && !defined(NDEBUG)
   std::weak_ptr<void> imageLoader_;
 #endif // !ANDROID && !NDEBUG

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

@@ -20,6 +20,26 @@ class RNSScreenStackHeaderSubviewComponentDescriptor final
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
   void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(
+        dynamic_cast<RNSScreenStackHeaderSubviewShadowNode *>(&shadowNode));
+    auto &subviewShadowNode =
+        static_cast<RNSScreenStackHeaderSubviewShadowNode &>(shadowNode);
+
+    react_native_assert(
+        dynamic_cast<YogaLayoutableShadowNode *>(&subviewShadowNode));
+    auto &layoutableShadowNode =
+        dynamic_cast<YogaLayoutableShadowNode &>(subviewShadowNode);
+
+    auto state = std::static_pointer_cast<
+        const RNSScreenStackHeaderSubviewShadowNode::ConcreteState>(
+        shadowNode.getState());
+    auto stateData = state->getData();
+
+    if (stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
+      layoutableShadowNode.setSize(
+          Size{stateData.frameSize.width, stateData.frameSize.height});
+    }
+
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
 };

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

@@ -5,4 +5,18 @@ namespace facebook::react {
 extern const char RNSScreenStackHeaderSubviewComponentName[] =
     "RNSScreenStackHeaderSubview";
 
+void RNSScreenStackHeaderSubviewShadowNode::layout(
+    LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+  applyFrameCorrections();
+}
+
+void RNSScreenStackHeaderSubviewShadowNode::applyFrameCorrections() {
+  ensureUnsealed();
+
+  const auto &stateData = getStateData();
+  layoutMetrics_.frame.origin.x = stateData.contentOffset.x;
+  layoutMetrics_.frame.origin.y = stateData.contentOffset.y;
+}
+
 } // namespace facebook::react

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

@@ -24,8 +24,10 @@ class JSI_EXPORT RNSScreenStackHeaderSubviewShadowNode final
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
   using StateData = ConcreteViewShadowNode::ConcreteStateData;
 #pragma mark - ShadowNode overrides
+  void layout(LayoutContext layoutContext) override;
 
 #pragma mark - Custom interface
+  void applyFrameCorrections();
 };
 
 } // namespace facebook::react

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

@@ -7,7 +7,9 @@ using namespace rnscreens;
 
 #ifdef ANDROID
 folly::dynamic RNSScreenStackHeaderSubviewState::getDynamic() const {
-  return folly::dynamic::object();
+  return folly::dynamic::object("frameWidth", frameSize.width)(
+      "frameHeight", frameSize.height)("contentOffsetX", contentOffset.x)(
+      "contentOffsetY", contentOffset.y);
 }
 #endif // ANDROID
 

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

@@ -21,18 +21,32 @@ class JSI_EXPORT RNSScreenStackHeaderSubviewState final {
 
   RNSScreenStackHeaderSubviewState() = default;
 
+  RNSScreenStackHeaderSubviewState(Size frameSize_, Point contentOffset_)
+      : frameSize(frameSize_), contentOffset(contentOffset_){};
+
 #ifdef ANDROID
   RNSScreenStackHeaderSubviewState(
       RNSScreenStackHeaderSubviewState const &previousState,
-      folly::dynamic data) {}
-#endif
+      folly::dynamic data)
+      : frameSize(Size{
+            (Float)data["frameWidth"].getDouble(),
+            (Float)data["frameHeight"].getDouble()}),
+        contentOffset(Point{
+            (Float)data["contentOffsetX"].getDouble(),
+            (Float)data["contentOffsetY"].getDouble()}) {}
+#endif // ANDROID
 
 #ifdef ANDROID
   folly::dynamic getDynamic() const;
   MapBuffer getMapBuffer() const {
     return MapBufferBuilder::EMPTY();
   };
+
 #endif // ANDROID
+
+  const Size frameSize{};
+  Point contentOffset{};
+
 #pragma mark - Getters
 };
 

package/ios/RNSFullWindowOverlay.mm

@@ -10,6 +10,7 @@
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
+#import <rnscreens/RNSFullWindowOverlayComponentDescriptor.h>
 #else
 #import <React/RCTTouchHandler.h>
 #endif // RCT_NEW_ARCH_ENABLED
@@ -205,9 +206,18 @@ RNS_IGNORE_SUPER_CALL_BEGIN
            oldLayoutMetrics:(react::LayoutMetrics const &)oldLayoutMetrics
 {
   CGRect frame = RCTCGRectFromRect(layoutMetrics.frame);
+
+  // Due to view flattening on new architecture there are situations
+  // when we receive frames with origin different from (0, 0).
+  // We account for this frame manipulation in shadow node by setting
+  // RootNodeKind trait for the shadow node making state consistent
+  // between Host & Shadow Tree
+  frame.origin = CGPointZero;
+
   _reactFrame = frame;
   [_container setFrame:frame];
 }
+
 RNS_IGNORE_SUPER_CALL_END
 
 #else

package/ios/RNSScreenStack.mm

@@ -86,7 +86,7 @@ namespace react = facebook::react;
       [screenController calculateAndNotifyHeaderHeightChangeIsModal:NO];
     }
 
-    [self maybeUpdateHeaderInsetsInShadowTreeForScreen:screenController];
+    [self maybeUpdateHeaderLayoutInfoInShadowTree:screenController];
   }
 }
 
@@ -100,7 +100,7 @@ namespace react = facebook::react;
   return [self topViewController];
 }
 
-- (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenController
+- (void)maybeUpdateHeaderLayoutInfoInShadowTree:(RNSScreen *)screenController
 {
   // This might happen e.g. if there is only native title present in navigation bar.
   if (self.navigationBar.subviews.count < 2) {
@@ -112,6 +112,9 @@ namespace react = facebook::react;
     return;
   }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+  [headerConfig updateHeaderStateInShadowTreeInContextOfNavigationBar:self.navigationBar];
+#else
   NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
   NSDirectionalEdgeInsets navBarContentMargins =
       [self.navigationBar.rnscreens_findContentView directionalLayoutMargins];
@@ -122,11 +125,12 @@ namespace react = facebook::react;
   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,
-                                                 }];
+  [headerConfig updateHeaderConfigState:NSDirectionalEdgeInsets{
+                                            .leading = navBarMargins.leading + navBarContentMargins.leading +
+                                                (isDisplayingBackButton ? platformBackButtonWidth : 0),
+                                            .trailing = navBarMargins.trailing + navBarContentMargins.trailing,
+                                        }];
+#endif // RCT_NEW_ARCH_ENABLED
 }
 #endif
 

package/ios/RNSScreenStackHeaderConfig.h

@@ -66,12 +66,6 @@ NS_ASSUME_NONNULL_END
                       animated:(BOOL)animated
                     withConfig:(nonnull 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.
  *
@@ -99,11 +93,31 @@ NS_ASSUME_NONNULL_END
 - (BOOL)shouldHeaderBeVisible;
 
 /**
- * @returns`true` iff the applying this header config instance to a view controller will
+ * 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;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+/**
+ * Allows to send information with size to the corresponding node in shadow tree.
+ * This method updates state of header config shadow node only.
+ */
+- (void)updateHeaderConfigState:(CGSize)size;
+
+/**
+ * Updates state of header config shadow node and all subview shadow nodes in context of given UINavigationBar.
+ * When `navBar == nil` this method does nothing.
+ */
+- (void)updateHeaderStateInShadowTreeInContextOfNavigationBar:(nullable UINavigationBar *)navBar;
+#else
+/**
+ * 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)updateHeaderConfigState:(NSDirectionalEdgeInsets)insets;
+#endif
+
 @end
 
 @interface RNSScreenStackHeaderConfigManager : RCTViewManager

package/ios/RNSScreenStackHeaderConfig.mm

@@ -2,6 +2,7 @@
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
 #import <React/RCTImageComponentView.h>
+#import <React/RCTMountingTransactionObserving.h>
 #import <React/UIView+React.h>
 #import <react/renderer/components/image/ImageProps.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
@@ -58,16 +59,26 @@ namespace react = facebook::react;
 
 @end
 
+#ifdef RCT_NEW_ARCH_ENABLED
+@interface RNSScreenStackHeaderConfig () <RCTMountingTransactionObserving>
+@end
+#endif // RCT_NEW_ARCH_ENABLED
+
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
-  NSDirectionalEdgeInsets _lastHeaderInsets;
 #ifdef RCT_NEW_ARCH_ENABLED
   BOOL _initialPropsSet;
+  CGSize _lastSize;
   react::RNSScreenStackHeaderConfigShadowNode::ConcreteState::Shared _state;
+
+  /// Whether a react subview has been added / removed in current transaction. This flag is reset after each react
+  /// transaction via RCTMountingTransactionObserving protocol.
+  bool _addedReactSubviewsInCurrentTransaction;
 #ifndef NDEBUG
   RCTImageLoader *imageLoader;
 #endif // !NDEBUG
 #else
+  NSDirectionalEdgeInsets _lastHeaderInsets;
   __weak RCTBridge *_bridge;
 #endif
 }
@@ -87,6 +98,7 @@ namespace react = facebook::react;
     _props = defaultProps;
     _show = YES;
     _translucent = NO;
+    _addedReactSubviewsInCurrentTransaction = false;
     [self initProps];
   }
   return self;
@@ -145,15 +157,18 @@ RNS_IGNORE_SUPER_CALL_END
   for (RNSScreenStackHeaderSubview *subview in _reactSubviews) {
     if (subview.type == RNSScreenStackHeaderSubviewTypeLeft || subview.type == RNSScreenStackHeaderSubviewTypeRight) {
       // we wrap the headerLeft/Right component in a UIBarButtonItem
-      // so we need to use the only subview of it to retrieve the correct view
-      UIView *headerComponent = subview.subviews.firstObject;
-      // we convert the point to RNSScreenStackView since it always contains the header inside it
-      CGPoint convertedPoint = [_screenView.reactSuperview convertPoint:point toView:headerComponent];
-
-      UIView *hitTestResult = [headerComponent hitTest:convertedPoint withEvent:event];
-      if (hitTestResult != nil) {
-        return hitTestResult;
+      // so we need to hit test subviews from left to right, because of the view flattening
+      UIView *headerComponent = nil;
+      for (UIView *headerComponentSubview in subview.subviews) {
+        CGPoint convertedPoint = [self convertPoint:point toView:headerComponentSubview];
+        UIView *hitTestResult = [headerComponentSubview hitTest:convertedPoint withEvent:event];
+
+        if (hitTestResult != nil) {
+          headerComponent = hitTestResult;
+        }
       }
+
+      return headerComponent;
     }
   }
   return nil;
@@ -195,19 +210,37 @@ RNS_IGNORE_SUPER_CALL_END
   [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};
+- (void)updateHeaderConfigState:(CGSize)size
+{
+  if (!CGSizeEqualToSize(size, _lastSize)) {
+    auto newState = react::RNSScreenStackHeaderConfigState(RCTSizeFromCGSize(size));
     _state->updateState(std::move(newState));
-    _lastHeaderInsets = std::move(insets);
+    _lastSize = size;
+  }
+}
+
+- (void)updateHeaderStateInShadowTreeInContextOfNavigationBar:(nullable UINavigationBar *)navigationBar
+{
+  if (!navigationBar) {
+    return;
+  }
+
+  [self updateHeaderConfigState:navigationBar.frame.size];
+  for (RNSScreenStackHeaderSubview *subview in self.reactSubviews) {
+    CGRect frameInNavBarCoordinates = [subview convertRect:subview.frame toView:navigationBar];
+    [subview updateHeaderSubviewFrameInShadowTree:frameInNavBarCoordinates];
+  }
+}
 #else
+- (void)updateHeaderConfigState:(NSDirectionalEdgeInsets)insets
+{
+  if (_lastHeaderInsets.leading != insets.leading || _lastHeaderInsets.trailing != insets.trailing) {
     [_bridge.uiManager setLocalData:[[RNSHeaderConfigInsetsPayload alloc] initWithInsets:insets] forView:self];
     _lastHeaderInsets = std::move(insets);
-#endif // RCT_NEW_ARCH_ENABLED
   }
 }
+#endif // RCT_NEW_ARCH_ENABLED
 
 - (BOOL)hasSubviewOfType:(RNSScreenStackHeaderSubviewType)type
 {
@@ -849,25 +882,47 @@ RNS_IGNORE_SUPER_CALL_BEGIN
   //  [_reactSubviews insertObject:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
   [self insertReactSubview:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
 
-  // TODO: This could be called only once per transaction.
-  [self updateViewControllerIfNeeded];
+  _addedReactSubviewsInCurrentTransaction = true;
 }
 
 - (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)mountingTransactionDidMount:(const facebook::react::MountingTransaction &)transaction
+               withSurfaceTelemetry:(const facebook::react::SurfaceTelemetry &)surfaceTelemetry
+{
+  if (_addedReactSubviewsInCurrentTransaction) {
+    [self updateViewControllerIfNeeded];
+
+    // This call is made for the sake of https://github.com/software-mansion/react-native-screens/pull/2466.
+    // In case header subview is added **after initial screen render** the system positions it correctly,
+    // however `viewDidLayoutSubviews` is not called on `RNSNavigationController` and updated frame sizes of the
+    // subviews are not sent to ShadowTree leading to issues with pressables.
+    // Sending state update to ShadowTree from here is not enough, because native layout has not yet
+    // happened after the child had been added. Requesting layout on navigation bar does not trigger layout callbacks
+    // either, however doing so on main view of navigation controller does the trick.
+    if (self.shouldHeaderBeVisible) {
+      [self layoutNavigationControllerView];
+    }
+  }
+  _addedReactSubviewsInCurrentTransaction = false;
+}
+
 - (void)replaceNavigationBarViewsWithSnapshotOfSubview:(RNSScreenStackHeaderSubview *)childComponentView
 {
   if (childComponentView.window != nil) {
@@ -938,7 +993,12 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
 {
   [super prepareForRecycle];
   _initialPropsSet = NO;
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  _lastSize = CGSizeZero;
+#else
   _lastHeaderInsets = NSDirectionalEdgeInsets{};
+#endif
 }
 
 - (NSNumber *)getFontSizePropValue:(int)value

package/ios/RNSScreenStackHeaderSubview.h

@@ -20,6 +20,10 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, weak) UIView *reactSuperview;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateHeaderSubviewFrameInShadowTree:(CGRect)frame;
+#endif
+
 @end
 
 @interface RNSScreenStackHeaderSubviewManager : RCTViewManager

package/ios/RNSScreenStackHeaderSubview.mm

@@ -18,7 +18,12 @@
 namespace react = facebook::react;
 #endif // RCT_NEW_ARCH_ENABLED
 
-@implementation RNSScreenStackHeaderSubview
+@implementation RNSScreenStackHeaderSubview {
+#ifdef RCT_NEW_ARCH_ENABLED
+  react::RNSScreenStackHeaderSubviewShadowNode::ConcreteState::Shared _state;
+  CGRect _lastScheduledFrame;
+#endif
+}
 
 #pragma mark - Common
 
@@ -74,6 +79,7 @@ namespace react = facebook::react;
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const react::RNSScreenStackHeaderSubviewProps>();
     _props = defaultProps;
+    _lastScheduledFrame = CGRectZero;
   }
 
   return self;
@@ -127,6 +133,25 @@ RNS_IGNORE_SUPER_CALL_BEGIN
   return NO;
 }
 
+- (void)updateState:(const facebook::react::State::Shared &)state
+           oldState:(const facebook::react::State::Shared &)oldState
+{
+  _state = std::static_pointer_cast<const react::RNSScreenStackHeaderSubviewShadowNode::ConcreteState>(state);
+}
+
+- (void)updateHeaderSubviewFrameInShadowTree:(CGRect)frame
+{
+  if (_state == nullptr) {
+    return;
+  }
+
+  if (!CGRectEqualToRect(frame, _lastScheduledFrame)) {
+    auto newState =
+        react::RNSScreenStackHeaderSubviewState(RCTSizeFromCGSize(frame.size), RCTPointFromCGPoint(frame.origin));
+    _state->updateState(std::move(newState));
+    _lastScheduledFrame = frame;
+  }
+}
 #else // RCT_NEW_ARCH_ENABLED
 #pragma mark - Paper specific
 

package/lib/commonjs/components/ScreenStackHeaderConfig.js

@@ -78,7 +78,6 @@ const styles = _reactNative.StyleSheet.create({
   },
   headerConfig: {
     position: 'absolute',
-    top: '-100%',
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',

package/lib/commonjs/components/ScreenStackHeaderConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["Object","defineProperty","exports","value","ScreenStackHeaderSubview","ScreenStackHeaderSearchBarView","ScreenStackHeaderRightView","ScreenStackHeaderLeftView","ScreenStackHeaderConfig","ScreenStackHeaderCenterView","ScreenStackHeaderBackButtonImage","_react","_interopRequireDefault","require","_reactNative","_ScreenStackHeaderConfigNativeComponent","_ScreenStackHeaderSubviewNativeComponent","e","__esModule","default","_extends","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","ScreenStackHeaderSubviewNativeComponent","React","forwardRef","props","ref","createElement","style","styles","headerConfig","pointerEvents","displayName","type","headerSubview","Image","resizeMode","fadeDuration","rest","headerSubviewCenter","StyleSheet","create","flexDirection","alignItems","justifyContent","flexShrink","position","top","width","Platform","OS","undefined"],"sourceRoot":"../../../src","sources":["components/ScreenStackHeaderConfig.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Object","defineProperty","exports","value","ScreenStackHeaderSubview","ScreenStackHeaderSearchBarView","ScreenStackHeaderRightView","ScreenStackHeaderLeftView","ScreenStackHeaderConfig","ScreenStackHeaderCenterView","ScreenStackHeaderBackButtonImage","_react","_interopRequireDefault","require","_reactNative","_ScreenStackHeaderConfigNativeComponent","_ScreenStackHeaderSubviewNativeComponent","e","__esModule","default","_extends","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","ScreenStackHeaderSubviewNativeComponent","React","forwardRef","props","ref","createElement","style","styles","headerConfig","pointerEvents","displayName","type","headerSubview","Image","resizeMode","fadeDuration","rest","headerSubviewCenter","StyleSheet","create","flexDirection","alignItems","justifyContent","flexShrink","position","width","Platform","OS","undefined"],"sourceRoot":"../../../src","sources":["components/ScreenStackHeaderConfig.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/fabric/FullWindowOverlayNativeComponent.js

@@ -7,5 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = (0, _codegenNativeComponent.default)('RNSFullWindowOverlay', {});
+var _default = exports.default = (0, _codegenNativeComponent.default)('RNSFullWindowOverlay', {
+  interfaceOnly: true
+});
 //# sourceMappingURL=FullWindowOverlayNativeComponent.js.map

package/lib/commonjs/fabric/FullWindowOverlayNativeComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["Object","defineProperty","exports","value","default","_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","_default","codegenNativeComponent"],"sourceRoot":"../../../src","sources":["fabric/FullWindowOverlayNativeComponent.ts"],"mappings":";AAAA,YAAY;;AAACA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AAEb,IAAAC,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAJ,OAAA,EAAAI,CAAA;AAAA,IAAAE,QAAA,GAAAR,OAAA,CAAAE,OAAA,GAK9E,IAAAO,+BAAsB,EAAc,sBAAsB,EAAE,CAAC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Object","defineProperty","exports","value","default","_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","_default","codegenNativeComponent","interfaceOnly"],"sourceRoot":"../../../src","sources":["fabric/FullWindowOverlayNativeComponent.ts"],"mappings":";AAAA,YAAY;;AAACA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AAEb,IAAAC,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAJ,OAAA,EAAAI,CAAA;AAAA,IAAAE,QAAA,GAAAR,OAAA,CAAAE,OAAA,GAK9E,IAAAO,+BAAsB,EAAc,sBAAsB,EAAE;EACzEC,aAAa,EAAE;AACjB,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/gesture-handler/ScreenGestureDetector.js

@@ -129,6 +129,12 @@ const ScreenGestureDetector = ({
       return;
     }
     transitionConfig.screenDimensions = screenSize;
+    // Gesture Handler added `pointerType` to event payload back in 2.16.0,
+    // see: https://github.com/software-mansion/react-native-gesture-handler/pull/2760
+    // and this causes type errors here. Proper solution would be to patch parameter types
+    // of this function in reanimated. This should not cause runtime errors as the payload
+    // has correct shape, only the types are incorrect.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (0, _reactNativeReanimated.startScreenTransition)(transitionConfig);
     canPerformUpdates.value = true;
   }
@@ -162,6 +168,12 @@ const ScreenGestureDetector = ({
       _RNScreensTurboModule.RNScreensTurboModule.finishTransition(stackTag, isTransitionCanceled);
     };
     screenTransitionConfig.value.isTransitionCanceled = isTransitionCanceled;
+    // Gesture Handler added `pointerType` to event payload back in 2.16.0,
+    // see: https://github.com/software-mansion/react-native-gesture-handler/pull/2760
+    // and this causes type errors here. Proper solution would be to patch parameter types
+    // of this function in reanimated. This should not cause runtime errors as the payload
+    // has correct shape, only the types are incorrect.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (0, _reactNativeReanimated.finishScreenTransition)(screenTransitionConfig.value);
   }
   let panGesture = _reactNativeGestureHandler.Gesture.Pan().onStart(onStart).onUpdate(onUpdate).onEnd(onEnd);