fix(iOS): buggy search bar / large title behaviour on Fabric

FabricTestExample/src/Test1097.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as React from 'react';
 import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
 import {
@@ -91,10 +90,8 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
         onPress={() => searchBarRef.current?.focus()}
       />
       {items
-        .filter(
-          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
-        )
-        .map((item) => (
+        .filter(item => item.toLowerCase().indexOf(search.toLowerCase()) !== -1)
+        .map(item => (
           <Button
             title={item}
             key={item}

TestsExample/src/Test1097.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
 import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
 import {

ios/RNSScreen.h

@@ -40,6 +40,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
+@class RNSScreenStackHeaderConfig;
+
 @interface RNSScreenView :
 #ifdef RCT_NEW_ARCH_ENABLED
     RCTViewComponentView
@@ -88,7 +90,8 @@ NS_ASSUME_NONNULL_BEGIN
 // we recreate the behavior of `reactSetFrame` on new architecture
 @property (nonatomic) facebook::react::LayoutMetrics oldLayoutMetrics;
 @property (nonatomic) facebook::react::LayoutMetrics newLayoutMetrics;
-@property (weak, nonatomic) UIView *config;
+@property (weak, nonatomic) RNSScreenStackHeaderConfig *config;
+@property (nonatomic, readonly) BOOL hasHeaderConfig;
 #else
 @property (nonatomic, copy) RCTDirectEventBlock onAppear;
 @property (nonatomic, copy) RCTDirectEventBlock onDisappear;
@@ -109,12 +112,16 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)notifyDisappear;
 - (void)updateBounds;
 - (void)notifyDismissedWithCount:(int)dismissCount;
+- (instancetype)initWithFrame:(CGRect)frame;
 #endif
 
 - (void)notifyTransitionProgress:(double)progress closing:(BOOL)closing goingForward:(BOOL)goingForward;
 - (void)notifyDismissCancelledWithDismissCount:(int)dismissCount;
 - (BOOL)isModal;
 
+/// Looks for header configuration in instance's `reactSubviews` and returns it. If not present returns `nil`.
+- (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig;
+
 @end
 
 @interface UIView (RNSScreen)

ios/RNSScreen.mm

@@ -54,7 +54,6 @@ - (instancetype)initWithFrame:(CGRect)frame
     _reactSubviews = [NSMutableArray new];
     [self initCommonProps];
   }
-
   return self;
 }
 #endif // RCT_NEW_ARCH_ENABLED
@@ -531,6 +530,16 @@ - (BOOL)isModal
   return self.stackPresentation != RNSScreenStackPresentationPush;
 }
 
+- (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig
+{
+  for (UIView *view in self.reactSubviews) {
+    if ([view isKindOfClass:RNSScreenStackHeaderConfig.class]) {
+      return (RNSScreenStackHeaderConfig *)view;
+    }
+  }
+  return nil;
+}
+
 #if !TARGET_OS_TV
 /**
  * Updates settings for sheet presentation controller.
@@ -588,19 +597,24 @@ - (void)updatePresentationStyle
 #pragma mark - Fabric specific
 #ifdef RCT_NEW_ARCH_ENABLED
 
+- (BOOL)hasHeaderConfig
+{
+  return _config != nil;
+}
+
 + (facebook::react::ComponentDescriptorProvider)componentDescriptorProvider
 {
   return facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSScreenComponentDescriptor>();
 }
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
-  [super mountChildComponentView:childComponentView index:index];
   if ([childComponentView isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
-    _config = childComponentView;
-    ((RNSScreenStackHeaderConfig *)childComponentView).screenView = self;
+    _config = (RNSScreenStackHeaderConfig *)childComponentView;
+    _config.screenView = self;
   }
   [_reactSubviews insertObject:childComponentView atIndex:index];
+  [super mountChildComponentView:childComponentView index:index];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
@@ -1194,12 +1208,10 @@ - (void)hideHeaderIfNecessary
 
     // we need to check whether reactSubviews array is empty, because on Fabric child nodes are unmounted first ->
     // reactSubviews array may be empty
-    if (currentIndex > 0 && [self.screenView.reactSubviews count] > 0 &&
-        [self.screenView.reactSubviews[0] isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
+    RNSScreenStackHeaderConfig *config = [self.screenView findHeaderConfig];
+    if (currentIndex > 0 && config != nil) {
       UINavigationItem *prevNavigationItem =
           [self.navigationController.viewControllers objectAtIndex:currentIndex - 1].navigationItem;
-      RNSScreenStackHeaderConfig *config = ((RNSScreenStackHeaderConfig *)self.screenView.reactSubviews[0]);
-
       BOOL wasSearchBarActive = prevNavigationItem.searchController.active;
 
 #ifdef RCT_NEW_ARCH_ENABLED

ios/RNSScreenStack.mm

@@ -1,14 +1,12 @@
 #ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTFabricComponentsPlugins.h>
 #import <React/RCTMountingTransactionObserving.h>
 #import <React/RCTSurfaceTouchHandler.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 <React/RCTFabricComponentsPlugins.h>
-
 #else
 #import <React/RCTBridge.h>
 #import <React/RCTRootContentView.h>

src/native-stack/views/NativeStackView.tsx

@@ -100,6 +100,10 @@ const MaybeNestedStack = ({
       ]}
       // @ts-ignore Wrong props passed to View
       stackPresentation={stackPresentation}
+      // This view must *not* be flattened.
+      // See https://github.com/software-mansion/react-native-screens/pull/1825
+      // for detailed explanation.
+      collapsable={false}
     >
       {children}
     </Container>
@@ -331,14 +335,17 @@ const RouteView = ({
           isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
         }
       >
-        <HeaderConfig {...options} route={route} headerShown={isHeaderInPush} />
         <MaybeNestedStack
           options={options}
           route={route}
           stackPresentation={stackPresentation}
         >
           {renderScene()}
         </MaybeNestedStack>
+        {/* HeaderConfig must not be first child of a Screen. 
+           See https://github.com/software-mansion/react-native-screens/pull/1825
+           for detailed explanation */}
+        <HeaderConfig {...options} route={route} headerShown={isHeaderInPush} />
       </HeaderHeightContext.Provider>
     </Screen>
   );