Skip to content

Commit 70207b6

Browse files
feat(ios): add backgroundColor prop to top bar buttons
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 <cursoragent@cursor.com>
1 parent db70f4c commit 70207b6

3 files changed

Lines changed: 29 additions & 0 deletions

File tree

ios/RNNButtonOptions.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
@property(nonatomic, strong) RNNIconBackgroundOptions *iconBackground;
2525
@property(nonatomic, strong) Bool *disableIconTint;
2626
@property(nonatomic, strong) Bool *hideSharedBackground;
27+
@property(nonatomic, strong) Color *backgroundColor;
2728

2829
- (RNNButtonOptions *)withDefault:(RNNButtonOptions *)defaultOptions;
2930

ios/RNNReactButtonView.mm

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,15 @@ - (void)updateConstraintsToFitSize {
6363
}
6464
}
6565

66+
- (void)didMoveToWindow {
67+
[super didMoveToWindow];
68+
if (@available(iOS 26.0, *)) {
69+
if (![self designRequiresCompatibility] && self.window) {
70+
[self syncButtonBackground];
71+
}
72+
}
73+
}
74+
6675
- (void)layoutSubviews {
6776
[super layoutSubviews];
6877
if (@available(iOS 26.0, *)) {
@@ -76,9 +85,21 @@ - (void)layoutSubviews {
7685
self.layer.affineTransform = CGAffineTransformMakeTranslation(tx, 0);
7786
}
7887
}
88+
[self syncButtonBackground];
7989
}
8090
}
8191

92+
- (void)syncButtonBackground {
93+
if (!_buttonBackgroundColor) return;
94+
95+
UIView *target = self.superview.superview.superview;
96+
if (!target || target.bounds.size.height <= 0) return;
97+
98+
target.backgroundColor = _buttonBackgroundColor;
99+
target.layer.cornerRadius = target.bounds.size.height / 2.0;
100+
target.clipsToBounds = YES;
101+
}
102+
82103
- (NSString *)componentType {
83104
return ComponentTypeButton;
84105
}

src/interfaces/Options.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -658,6 +658,13 @@ export interface OptionsTopBarButton {
658658
* @see {@link https://developer.android.com/guide/topics/resources/menu-resource|Android developer guide: Menu resource}
659659
*/
660660
showAsAction?: 'ifRoom' | 'withText' | 'always' | 'never';
661+
/**
662+
* (iOS 26+ only) Set a solid background color on the circular Liquid Glass
663+
* platter behind the button. Ignored when UIDesignRequiresCompatibility is
664+
* enabled or on iOS < 26.
665+
* #### (iOS specific)
666+
*/
667+
backgroundColor?: Color;
661668
}
662669

663670
export interface OptionsSearchBar {

0 commit comments

Comments
 (0)