fix for mis-alignment on iOS 26

Author: markdevocht

ios/RNNReactTitleView.mm

@@ -1,5 +1,7 @@
 #import "RNNReactTitleView.h"
 
+static const CGFloat kTitleViewDefaultHeight = 44.0;
+
 @implementation RNNReactTitleView {
     BOOL _fillParent;
     CGFloat _expectedHeight;
@@ -11,19 +13,30 @@ - (NSString *)componentType {
 
 - (CGSize)intrinsicContentSize {
     if (_fillParent) {
-        return CGSizeMake(UILayoutFittingExpandedSize.width, _expectedHeight > 0 ? _expectedHeight : 44);
-    } else {
-        return [super intrinsicContentSize];
+        return CGSizeMake(UILayoutFittingExpandedSize.width,
+                          _expectedHeight > 0 ? _expectedHeight : kTitleViewDefaultHeight);
     }
+    return [super intrinsicContentSize];
+}
+
+- (CGSize)sizeThatFits:(CGSize)size {
+    if (_fillParent) {
+        return size;
+    }
+    return [super sizeThatFits:size];
 }
 
 - (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame {
     if ([alignment isEqualToString:@"fill"]) {
         _fillParent = YES;
-        _expectedHeight = frame.size.height;
-        self.translatesAutoresizingMaskIntoConstraints = NO;
+        _expectedHeight = frame.size.height > 0 ? frame.size.height : kTitleViewDefaultHeight;
+        self.frame = frame;
+        self.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin |
+                                UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight;
         self.sizeFlexibility = RCTRootViewSizeFlexibilityNone;
     } else {
+        _fillParent = NO;
+        self.autoresizingMask = UIViewAutoresizingNone;
         self.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
         __weak RNNReactView *weakSelf = self;
         [self setRootViewDidChangeIntrinsicSize:^(CGSize intrinsicSize) {
@@ -32,6 +45,14 @@ - (void)setAlignment:(NSString *)alignment inFrame:(CGRect)frame {
     }
 }
 
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    if (_fillParent && self.bounds.size.height > 0 && _expectedHeight != self.bounds.size.height) {
+        _expectedHeight = self.bounds.size.height;
+        [self invalidateIntrinsicContentSize];
+    }
+}
+
 - (void)setRootViewDidChangeIntrinsicSize:(void (^)(CGSize))rootViewDidChangeIntrinsicSize {
     _rootViewDidChangeIntrinsicSize = rootViewDidChangeIntrinsicSize;
     self.delegate = self;

ios/TopBarTitlePresenter.mm

@@ -83,12 +83,26 @@ - (void)setCustomNavigationTitleView:(RNNTopBarOptions *)options
                    reactViewReadyBlock:readyBlock];
         _customTitleView.backgroundColor = UIColor.clearColor;
         NSString *alignment = [options.title.component.alignment withDefault:@""];
-        [_customTitleView setAlignment:alignment
-                               inFrame:viewController.navigationController.navigationBar.frame];
+        UINavigationBar *navigationBar = viewController.navigationController.navigationBar;
+        CGRect barBounds = navigationBar.bounds;
+        [_customTitleView setAlignment:alignment inFrame:barBounds];
         [_customTitleView layoutIfNeeded];
 
         viewController.navigationItem.titleView = nil;
         viewController.navigationItem.titleView = _customTitleView;
+
+        __weak RNNReactTitleView *weakTitleView = _customTitleView;
+        __weak UIViewController *weakViewController = viewController;
+        dispatch_async(dispatch_get_main_queue(), ^{
+            UINavigationController *navigationController = weakViewController.navigationController;
+            if (!navigationController || !weakTitleView) {
+                return;
+            }
+            [weakTitleView setAlignment:alignment inFrame:navigationController.navigationBar.bounds];
+            weakViewController.navigationItem.titleView = weakTitleView;
+            [weakTitleView setNeedsLayout];
+            [weakTitleView layoutIfNeeded];
+        });
         [_customTitleView componentWillAppear];
         [_customTitleView componentDidAppear];
     } else {

playground/src/screens/CustomTopBar.tsx

@@ -25,10 +25,10 @@ export default class CustomTopBar extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   container: {
-    alignSelf: 'baseline',
+    flex: 1,
+    justifyContent: 'center',
   },
   text: {
-    alignSelf: 'flex-start',
     color: 'black',
     fontSize: 16,
   },

playground/src/screens/TopBarTitleTestScreen.tsx

@@ -18,8 +18,8 @@ const {
 // TopBar title component WITH subtitle
 function TopBarWithSubtitle() {
     return (
-        <View style={{ flex: 1 }}>
-            <View style={{ flexDirection: 'row' }}>
+        <View style={{ flex: 1, justifyContent: 'center' }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                 <View
                     testID={TOPBAR_TITLE_AVATAR}
                     style={{ alignSelf: 'center', marginRight: 20, width: 10, height: 10, backgroundColor: 'red' }}
@@ -38,8 +38,8 @@ function TopBarWithSubtitle() {
 // TopBar title component WITHOUT subtitle - this triggers the bug on Android
 function TopBarWithoutSubtitle() {
     return (
-        <View style={{ flex: 1 }}>
-            <View style={{ flexDirection: 'row' }}>
+        <View style={{ flex: 1, justifyContent: 'center' }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                 <View
                     testID={TOPBAR_TITLE_AVATAR}
                     style={{ alignSelf: 'center', marginRight: 20, width: 10, height: 10, backgroundColor: 'red' }}