[4.19.0] iOS custom header component weird positioning

[efstathiosntonas]

Description

After upgrading to 4.19.0 the custom header component appears to be mis-positioned to the bottom right. Both on iOS 26.1 and 18.5 simulators.

const NavigationHeader = ({
  color,
  component: Component,
  isWhite,
  text
}: {
  color?: string;
  component?: ComponentType<Record<string, never>> | null;
  isWhite?: boolean;
  text: string;
}) => {
  const { styles } = useStyles(stylesheet);

  if (Component) {
    return <Component />;
  }

  return (
    <CustomHeader
      hx="h5"
      style={styles.text(text.length, isWhite, color)}
      testID="navigation-header"
      weight="b"
    >
      {text}
    </CustomHeader>
  );
};

const stylesheet = createStyleSheet((theme) => ({
  text: (textLength: number, isWhite?: boolean, color?: string) => ({
    color: color || (isWhite ? '#FFFFFF' : theme.colors.neutrals_1100),
    fontSize: fontSize(textLength > 22 ? 16 : 20)
  })
}));

export default NavigationHeader;

  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <BackButtonHeader
          disabled={logoutLoading || profileDeleteLoading}
          onPress={() => navigation.goBack()}
        />
      ),

      headerTitle: () => (
        <NavigationHeader
          text={t({ message: 'Settings', context: 'navigation_header' })}
        />
      )
    });
  }, [t, profileDeleteLoading, logoutLoading, navigation]);

   <IndexStack.Screen
          getComponent={() => Settings}
          name="Settings"
          options={{
            headerBackButtonDisplayMode: 'minimal',
            headerBackVisible: false,
            headerLeft: undefined,
            headerStyle: { backgroundColor: theme.colors.neutrals_0 },
            headerTitleAlign: 'center',
            title: ''
          }}
        />

If i do not use the useLayoutEffect and add title and BackButtonHeader on the stack options everything is fine:

   <IndexStack.Screen
          getComponent={() => Settings}
          name="Settings"
          options={{
            headerBackButtonDisplayMode: 'minimal',
            headerBackVisible: false,
            headerLeft: () => <BackButtonHeader />,
            headerStyle: { backgroundColor: theme.colors.neutrals_0 },
            headerTitleAlign: 'center',
            title: 'Settings'
          }}
        />

Steps to reproduce

read above

Snack or a link to a repository

sorry,no snack but it's very easy to reproduce

Screens version

4.19.0

React Native version

0.81.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[efstathiosntonas]

This is the culprit: #3449

cc: @kligarski

[kkafar]

Yeah, this looks like a bug. Thank you for the report. We'll look into this.

[kligarski]

Hi, @efstathiosntonas. Thank you for the report!
I created a PR with a fix: #3489. If you can, please check if it works for you and let us know.

[efstathiosntonas]

@kligarski hi, tested the PR on iOS Simulator 18.5 and 26.1 and works as a charm on both. Thank you for the quick fix.

Click for patch from #3489

react-native-screens+4.19.0+001.ios-header-positioning.patch

diff --git a/node_modules/react-native-screens/ios/RNSScreenStackHeaderSubview.mm b/node_modules/react-native-screens/ios/RNSScreenStackHeaderSubview.mm
index 869a8a2..24b07e5 100644
--- a/node_modules/react-native-screens/ios/RNSScreenStackHeaderSubview.mm
+++ b/node_modules/react-native-screens/ios/RNSScreenStackHeaderSubview.mm
@@ -174,14 +174,22 @@ RNS_IGNORE_SUPER_CALL_BEGIN
         self);
   } else {
 #if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
-    BOOL sizeHasChanged = _layoutMetrics.frame.size != layoutMetrics.frame.size;
-    _layoutMetrics = layoutMetrics;
-    if (sizeHasChanged) {
-      [self invalidateIntrinsicContentSize];
+    BOOL needsAutoLayout = NO;
+    if (@available(iOS 26.0, *)) {
+      needsAutoLayout = _type == RNSScreenStackHeaderSubviewTypeLeft || _type == RNSScreenStackHeaderSubviewTypeRight;
     }
-#else // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
-    self.bounds = CGRect{CGPointZero, frame.size};
+
+    if (needsAutoLayout) {
+      BOOL sizeHasChanged = _layoutMetrics.frame.size != layoutMetrics.frame.size;
+      _layoutMetrics = layoutMetrics;
+      if (sizeHasChanged) {
+        [self invalidateIntrinsicContentSize];
+      }
+    } else
 #endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+    {
+      self.bounds = CGRect{CGPointZero, frame.size};
+    }
     [self layoutNavigationBar];
   }
 }
@@ -206,11 +214,19 @@ RNS_IGNORE_SUPER_CALL_END
   // makes UINavigationBar the only one to control the position of header content.
   if (!CGSizeEqualToSize(frame.size, self.frame.size)) {
 #if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
-    _lastReactFrameSize = frame.size;
-    [self invalidateIntrinsicContentSize];
-#else // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
-    [super reactSetFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
+    BOOL needsAutoLayout = NO;
+    if (@available(iOS 26.0, *)) {
+      needsAutoLayout = _type == RNSScreenStackHeaderSubviewTypeLeft || _type == RNSScreenStackHeaderSubviewTypeRight;
+    }
+
+    if (needsAutoLayout) {
+      _lastReactFrameSize = frame.size;
+      [self invalidateIntrinsicContentSize];
+    } else
 #endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+    {
+      [super reactSetFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
+    }
     [self layoutNavigationBar];
   }
 }
@@ -221,41 +237,48 @@ RNS_IGNORE_SUPER_CALL_END
 
 - (UIBarButtonItem *)getUIBarButtonItem
 {
+  RCTAssert(
+      _type == RNSScreenStackHeaderSubviewTypeLeft || _type == RNSScreenStackHeaderSubviewTypeRight,
+      @"[RNScreens] Unexpected subview type.");
+
   if (_barButtonItem == nil) {
 #if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
-    // Starting from iOS 26, UIBarButtonItem's customView is streched to have at least 36 width.
-    // Stretching RNSScreenStackHeaderSubview means that its subviews are aligned to left instead
-    // of the center. To mitigate this, we add a wrapper view that will center
-    // RNSScreenStackHeaderSubview inside of itself.
-    UIView *wrapperView = [UIView new];
-    wrapperView.translatesAutoresizingMaskIntoConstraints = NO;
-
-    self.translatesAutoresizingMaskIntoConstraints = NO;
-    [wrapperView addSubview:self];
-
-    [self.centerXAnchor constraintEqualToAnchor:wrapperView.centerXAnchor].active = YES;
-    [self.centerYAnchor constraintEqualToAnchor:wrapperView.centerYAnchor].active = YES;
-
-    // To prevent UIKit from stretching subviews to all available width, we need to:
-    // 1. Set width of wrapperView to match RNSScreenStackHeaderSubview BUT when
-    //    RNSScreenStackHeaderSubview's width is smaller that minimal required 36 width, it breaks
-    //    UIKit's constraint. That's why we need to lower the priority of the constraint.
-    NSLayoutConstraint *widthEqual = [wrapperView.widthAnchor constraintEqualToAnchor:self.widthAnchor];
-    widthEqual.priority = UILayoutPriorityDefaultHigh;
-    widthEqual.active = YES;
-
-    NSLayoutConstraint *heightEqual = [wrapperView.heightAnchor constraintEqualToAnchor:self.heightAnchor];
-    heightEqual.priority = UILayoutPriorityDefaultHigh;
-    heightEqual.active = YES;
-
-    // 2. Set content hugging priority for RNSScreenStackHeaderSubview.
-    [self setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
-    [self setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];
-
-    _barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:wrapperView];
-#else // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
-    _barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self];
+    if (@available(iOS 26.0, *)) {
+      // Starting from iOS 26, UIBarButtonItem's customView is streched to have at least 36 width.
+      // Stretching RNSScreenStackHeaderSubview means that its subviews are aligned to left instead
+      // of the center. To mitigate this, we add a wrapper view that will center
+      // RNSScreenStackHeaderSubview inside of itself.
+      UIView *wrapperView = [UIView new];
+      wrapperView.translatesAutoresizingMaskIntoConstraints = NO;
+
+      self.translatesAutoresizingMaskIntoConstraints = NO;
+      [wrapperView addSubview:self];
+
+      [self.centerXAnchor constraintEqualToAnchor:wrapperView.centerXAnchor].active = YES;
+      [self.centerYAnchor constraintEqualToAnchor:wrapperView.centerYAnchor].active = YES;
+
+      // To prevent UIKit from stretching subviews to all available width, we need to:
+      // 1. Set width of wrapperView to match RNSScreenStackHeaderSubview BUT when
+      //    RNSScreenStackHeaderSubview's width is smaller that minimal required 36 width, it breaks
+      //    UIKit's constraint. That's why we need to lower the priority of the constraint.
+      NSLayoutConstraint *widthEqual = [wrapperView.widthAnchor constraintEqualToAnchor:self.widthAnchor];
+      widthEqual.priority = UILayoutPriorityDefaultHigh;
+      widthEqual.active = YES;
+
+      NSLayoutConstraint *heightEqual = [wrapperView.heightAnchor constraintEqualToAnchor:self.heightAnchor];
+      heightEqual.priority = UILayoutPriorityDefaultHigh;
+      heightEqual.active = YES;
+
+      // 2. Set content hugging priority for RNSScreenStackHeaderSubview.
+      [self setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
+      [self setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];
+
+      _barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:wrapperView];
+    } else
 #endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+    {
+      _barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self];
+    }
     [self configureBarButtonItem];
   }
 
@@ -281,7 +304,7 @@ RNS_IGNORE_SUPER_CALL_END
       [_barButtonItem setHidesSharedBackground:_hidesSharedBackground];
     }
   }
-#endif
+#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
 }
 
 - (void)setHidesSharedBackground:(BOOL)hidesSharedBackground

[kligarski]

Great! Thank you for checking.