From fd43bcc8c42961d17b65f7fe6a1f9421d47f40a8 Mon Sep 17 00:00:00 2001 From: Isaac Israel Date: Wed, 13 May 2026 18:44:02 +0300 Subject: [PATCH 1/3] fix(ios): add Auto Layout constraints to RNNReactButtonView on iOS 26 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On iOS 26 the Liquid Glass navigation bar wraps custom-view bar button items in several internal layout containers. Without explicit size constraints the wrapper views can collapse to zero height after a pop → tab-switch → tab-switch → push cycle, making the React button invisible. - Guard all new logic behind @available(iOS 26.0, *) AND a runtime check for UIDesignRequiresCompatibility (compatibility mode disables Liquid Glass and uses the legacy view hierarchy) - Set translatesAutoresizingMaskIntoConstraints = NO - Add width/height constraints at UILayoutPriorityDefaultHigh - Update constraints in didMountComponentsWithRootTag: after sizeToFit Co-authored-by: Cursor --- ios/RNNReactButtonView.mm | 43 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/ios/RNNReactButtonView.mm b/ios/RNNReactButtonView.mm index 607d91286bf..1da4c2735b4 100644 --- a/ios/RNNReactButtonView.mm +++ b/ios/RNNReactButtonView.mm @@ -1,6 +1,10 @@ #import "RNNReactButtonView.h" +#import -@implementation RNNReactButtonView +@implementation RNNReactButtonView { + NSLayoutConstraint *_widthConstraint; + NSLayoutConstraint *_heightConstraint; +} - (instancetype)initWithHost:(RCTHost *)host moduleName:(NSString *)moduleName @@ -10,15 +14,50 @@ - (instancetype)initWithHost:(RCTHost *)host reactViewReadyBlock:(RNNReactViewReadyCompletionBlock)reactViewReadyBlock { self = [super initWithHost:host moduleName:moduleName initialProperties:initialProperties eventEmitter:eventEmitter sizeMeasureMode:convertToSurfaceSizeMeasureMode(RCTRootViewSizeFlexibilityWidthAndHeight) reactViewReadyBlock:reactViewReadyBlock]; [host.surfacePresenter addObserver:self]; - self.backgroundColor = UIColor.clearColor; + self.backgroundColor = [UIColor clearColor]; + + if (@available(iOS 26.0, *)) { + if (![self designRequiresCompatibility]) { + self.translatesAutoresizingMaskIntoConstraints = NO; + _widthConstraint = [self.widthAnchor constraintEqualToConstant:0]; + _heightConstraint = [self.heightAnchor constraintEqualToConstant:0]; + _widthConstraint.priority = UILayoutPriorityDefaultHigh; + _heightConstraint.priority = UILayoutPriorityDefaultHigh; + _widthConstraint.active = YES; + _heightConstraint.active = YES; + } + } return self; } +- (BOOL)designRequiresCompatibility { + static BOOL checked = NO; + static BOOL result = NO; + if (!checked) { + checked = YES; + result = [[[NSBundle mainBundle] objectForInfoDictionaryKey:@"UIDesignRequiresCompatibility"] boolValue]; + } + return result; +} + - (void)didMountComponentsWithRootTag:(NSInteger)rootTag { if (self.surface.rootTag == rootTag) { [super didMountComponentsWithRootTag:rootTag]; [self sizeToFit]; + if (@available(iOS 26.0, *)) { + if (![self designRequiresCompatibility]) { + [self updateConstraintsToFitSize]; + } + } + } +} + +- (void)updateConstraintsToFitSize { + CGSize size = self.frame.size; + if (size.width > 0 && size.height > 0) { + _widthConstraint.constant = size.width; + _heightConstraint.constant = size.height; } } From db70f4c3088267ef9590aaf5289695fbbeb281d0 Mon Sep 17 00:00:00 2001 From: Isaac Israel Date: Wed, 13 May 2026 19:05:28 +0300 Subject: [PATCH 2/3] fix(ios): center RNNReactButtonView inside navigation bar platter On iOS 26 the internal _UITAMICAdaptorView wrapper is wider than the React button content and UIKit pins the custom view to the leading edge. Apply a one-time horizontal CGAffineTransform in layoutSubviews to center the view. Guarded by @available(iOS 26.0, *) and UIDesignRequiresCompatibility check. Co-authored-by: Cursor --- ios/RNNReactButtonView.mm | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ios/RNNReactButtonView.mm b/ios/RNNReactButtonView.mm index 1da4c2735b4..8f466fcd275 100644 --- a/ios/RNNReactButtonView.mm +++ b/ios/RNNReactButtonView.mm @@ -4,6 +4,7 @@ @implementation RNNReactButtonView { NSLayoutConstraint *_widthConstraint; NSLayoutConstraint *_heightConstraint; + BOOL _didCenter; } - (instancetype)initWithHost:(RCTHost *)host @@ -25,6 +26,7 @@ - (instancetype)initWithHost:(RCTHost *)host _heightConstraint.priority = UILayoutPriorityDefaultHigh; _widthConstraint.active = YES; _heightConstraint.active = YES; + _didCenter = NO; } } @@ -61,6 +63,22 @@ - (void)updateConstraintsToFitSize { } } +- (void)layoutSubviews { + [super layoutSubviews]; + if (@available(iOS 26.0, *)) { + if ([self designRequiresCompatibility]) return; + if (!_didCenter && self.superview && self.frame.size.width > 0) { + CGFloat wrapperWidth = self.superview.bounds.size.width; + CGFloat selfWidth = self.frame.size.width; + if (wrapperWidth > selfWidth) { + _didCenter = YES; + CGFloat tx = (wrapperWidth - selfWidth) / 2.0; + self.layer.affineTransform = CGAffineTransformMakeTranslation(tx, 0); + } + } + } +} + - (NSString *)componentType { return ComponentTypeButton; } From 70207b6790641951ae1e4ed16321e33d05edcb80 Mon Sep 17 00:00:00 2001 From: Isaac Israel Date: Wed, 13 May 2026 19:09:42 +0300 Subject: [PATCH 3/3] feat(ios): add backgroundColor prop to top bar buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a new `backgroundColor` option to `OptionsTopBarButton` that sets a solid color on the iOS 26 Liquid Glass circular platter behind React component bar buttons. All logic is guarded by @available(iOS 26.0, *) and a runtime check for UIDesignRequiresCompatibility — when compatibility mode is enabled the prop is ignored and the button renders as before. Co-authored-by: Cursor --- ios/RNNButtonOptions.h | 1 + ios/RNNReactButtonView.mm | 21 +++++++++++++++++++++ src/interfaces/Options.ts | 7 +++++++ 3 files changed, 29 insertions(+) diff --git a/ios/RNNButtonOptions.h b/ios/RNNButtonOptions.h index 753cc49f95e..cebe7a4e8ff 100644 --- a/ios/RNNButtonOptions.h +++ b/ios/RNNButtonOptions.h @@ -24,6 +24,7 @@ @property(nonatomic, strong) RNNIconBackgroundOptions *iconBackground; @property(nonatomic, strong) Bool *disableIconTint; @property(nonatomic, strong) Bool *hideSharedBackground; +@property(nonatomic, strong) Color *backgroundColor; - (RNNButtonOptions *)withDefault:(RNNButtonOptions *)defaultOptions; diff --git a/ios/RNNReactButtonView.mm b/ios/RNNReactButtonView.mm index 8f466fcd275..59e76a7bcf3 100644 --- a/ios/RNNReactButtonView.mm +++ b/ios/RNNReactButtonView.mm @@ -63,6 +63,15 @@ - (void)updateConstraintsToFitSize { } } +- (void)didMoveToWindow { + [super didMoveToWindow]; + if (@available(iOS 26.0, *)) { + if (![self designRequiresCompatibility] && self.window) { + [self syncButtonBackground]; + } + } +} + - (void)layoutSubviews { [super layoutSubviews]; if (@available(iOS 26.0, *)) { @@ -76,9 +85,21 @@ - (void)layoutSubviews { self.layer.affineTransform = CGAffineTransformMakeTranslation(tx, 0); } } + [self syncButtonBackground]; } } +- (void)syncButtonBackground { + if (!_buttonBackgroundColor) return; + + UIView *target = self.superview.superview.superview; + if (!target || target.bounds.size.height <= 0) return; + + target.backgroundColor = _buttonBackgroundColor; + target.layer.cornerRadius = target.bounds.size.height / 2.0; + target.clipsToBounds = YES; +} + - (NSString *)componentType { return ComponentTypeButton; } diff --git a/src/interfaces/Options.ts b/src/interfaces/Options.ts index bebca9b8ab5..081463ac2fe 100644 --- a/src/interfaces/Options.ts +++ b/src/interfaces/Options.ts @@ -658,6 +658,13 @@ export interface OptionsTopBarButton { * @see {@link https://developer.android.com/guide/topics/resources/menu-resource|Android developer guide: Menu resource} */ showAsAction?: 'ifRoom' | 'withText' | 'always' | 'never'; + /** + * (iOS 26+ only) Set a solid background color on the circular Liquid Glass + * platter behind the button. Ignored when UIDesignRequiresCompatibility is + * enabled or on iOS < 26. + * #### (iOS specific) + */ + backgroundColor?: Color; } export interface OptionsSearchBar {