Skip to content

Commit 3a28716

Browse files
feat(ios): add tintColor option to bottomTabs
Expose `UITabBar.tintColor` via a new `tintColor` property on `OptionsBottomTabs`. This controls the color of the selected tab's icon, which is especially useful for overriding the default system blue on tabs created with `bottomTab.role` (UITabBarSystemItem). Applied in both `applyOptions` (initial render) and `mergeOptions` (dynamic updates). iOS only; no Android changes. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent bb96e3f commit 3a28716

4 files changed

Lines changed: 24 additions & 0 deletions

File tree

ios/BottomTabsBasePresenter.mm

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ - (void)applyOptions:(RNNNavigationOptions *)options {
3535
translucent:[withDefault.bottomTabs.translucent withDefault:NO]];
3636
[self applyTabBarBorder:withDefault.bottomTabs];
3737
[self applyTabBarShadow:withDefault.bottomTabs.shadow];
38+
39+
UIColor *tintColor = [withDefault.bottomTabs.tintColor withDefault:nil];
40+
if (tintColor) {
41+
self.tabBar.tintColor = tintColor;
42+
}
3843
}
3944

4045
- (void)mergeOptions:(RNNNavigationOptions *)mergeOptions
@@ -94,6 +99,10 @@ - (void)mergeOptions:(RNNNavigationOptions *)mergeOptions
9499
if (mergeOptions.bottomTabs.shadow.hasValue) {
95100
[self applyTabBarShadow:withDefault.bottomTabs.shadow];
96101
}
102+
103+
if (mergeOptions.bottomTabs.tintColor.hasValue) {
104+
self.tabBar.tintColor = mergeOptions.bottomTabs.tintColor.get;
105+
}
97106
}
98107

99108
- (RNNBottomTabsController *)tabBarController {

ios/RNNBottomTabsOptions.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
@property(nonatomic, strong) Number *borderWidth;
2424
@property(nonatomic, strong) RNNShadowOptions *shadow;
2525
@property(nonatomic, strong) BottomTabsAttachMode *tabsAttachMode;
26+
@property(nonatomic, strong) Color *tintColor;
2627

2728
- (BOOL)shouldDrawBehind;
2829

ios/RNNBottomTabsOptions.mm

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
2626
self.borderColor = [ColorParser parse:dict key:@"borderColor"];
2727
self.borderWidth = [NumberParser parse:dict key:@"borderWidth"];
2828
self.shadow = [[RNNShadowOptions alloc] initWithDict:dict[@"shadow"]];
29+
self.tintColor = [ColorParser parse:dict key:@"tintColor"];
2930

3031
return self;
3132
}
@@ -68,6 +69,9 @@ - (void)mergeOptions:(RNNBottomTabsOptions *)options {
6869
if (options.borderWidth.hasValue)
6970
self.borderWidth = options.borderWidth;
7071

72+
if (options.tintColor.hasValue)
73+
self.tintColor = options.tintColor;
74+
7175
[self.shadow mergeOptions:options.shadow];
7276
}
7377

src/interfaces/Options.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -999,6 +999,16 @@ export interface OptionsBottomTabs {
999999
* Control the shadow of the Bottom tabs bar
10001000
*/
10011001
shadow?: ShadowOptions;
1002+
/**
1003+
* Set the tint color applied to the selected tab's icon
1004+
* and system-provided items. Maps to `UITabBar.tintColor`.
1005+
*
1006+
* Useful for overriding the default blue tint on system
1007+
* items created via `bottomTab.role`.
1008+
*
1009+
* #### (iOS specific)
1010+
*/
1011+
tintColor?: Color;
10021012
}
10031013

10041014
export interface ShadowOptions {

0 commit comments

Comments
 (0)