react-native-navigation 8.8.6 → 8.8.7

package/ios/RNNBottomTabsController.mm

@@ -1,7 +1,10 @@
 #import "RNNBottomTabsController.h"
+#import "RNNBottomTabsCustomRow.h"
+#import "RNNCustomTabBarItemView.h"
 #import "RNNTabBarItemCreator.h"
 #import "UITabBarController+RNNOptions.h"
 #import "UITabBarController+RNNUtils.h"
+#import <React/RCTLog.h>
 
 @interface RNNBottomTabsController ()
 @property(nonatomic, strong) BottomTabPresenter *bottomTabPresenter;
@@ -21,6 +24,10 @@
     BOOL _didFinishSetup;
     BOOL _rnnDidApplyInitialTabBarSelectionFix;
     BOOL _rnnSuppressTabSelectionEvents;
+    RNNReactComponentRegistry *_componentRegistry;
+    NSMutableArray<RNNCustomTabBarItemView *> *_customTabItemViews;
+    BOOL _useCustomItemViews;
+    RNNBottomTabsCustomRow *_customRow;
 }
 
 - (instancetype)initWithLayoutInfo:(RNNLayoutInfo *)layoutInfo
@@ -30,14 +37,18 @@
                          presenter:(RNNBasePresenter *)presenter
                 bottomTabPresenter:(BottomTabPresenter *)bottomTabPresenter
              dotIndicatorPresenter:(RNNDotIndicatorPresenter *)dotIndicatorPresenter
+                 componentRegistry:(RNNReactComponentRegistry *)componentRegistry
                       eventEmitter:(RNNEventEmitter *)eventEmitter
               childViewControllers:(NSArray *)childViewControllers
                 bottomTabsAttacher:(BottomTabsBaseAttacher *)bottomTabsAttacher {
     _bottomTabsAttacher = bottomTabsAttacher;
     _bottomTabPresenter = bottomTabPresenter;
     _dotIndicatorPresenter = dotIndicatorPresenter;
+    _componentRegistry = componentRegistry;
     _options = options;
     _didFinishSetup = NO;
+    _customTabItemViews = [NSMutableArray new];
+    _useCustomItemViews = NO;
 
     IntNumber *currentTabIndex = options.bottomTabs.currentTabIndex;
     if ([currentTabIndex hasValue]) {
@@ -88,14 +99,20 @@
         [selectedChild pushViewController: [UIViewController new] animated:NO];
         [selectedChild popViewControllerAnimated:NO];
     }
+
+    if (_useCustomItemViews) {
+        [self ensureCustomRowAttached];
+        [self layoutCustomRow];
+    }
 }
 
 - (void)viewDidAppear:(BOOL)animated {
     [super viewDidAppear:animated];
     // iOS 26: first layout can misplace tab item titles; cycling selection (then restoring) forces a
     // correct layout without user interaction. Defer so all tab children are in the hierarchy.
+    // Skipped when custom item views are active — the native tab bar visuals are hidden anyway.
     if (@available(iOS 26.0, *)) {
-        if (!_rnnDidApplyInitialTabBarSelectionFix) {
+        if (!_useCustomItemViews && !_rnnDidApplyInitialTabBarSelectionFix) {
             _rnnDidApplyInitialTabBarSelectionFix = YES;
             __weak RNNBottomTabsController *weakSelf = self;
             dispatch_async(dispatch_get_main_queue(), ^{
@@ -128,13 +145,182 @@
 
 - (void)createTabBarItems:(NSArray<UIViewController *> *)childViewControllers {
     _bottomTabPresenter.tabCreator.searchRoleUsed = NO;
+    [self resolveCustomItemViewMode:childViewControllers];
+    _bottomTabPresenter.useCustomItemViews = _useCustomItemViews;
     for (UIViewController *child in childViewControllers) {
         [_bottomTabPresenter applyOptions:child.resolveOptions child:child];
     }
 
+    if (_useCustomItemViews) {
+        [self buildCustomTabItemViews:childViewControllers];
+        [self applyCustomItemViewsTabBarConfiguration];
+        [self ensureCustomRowAttached];
+    }
+
     [self syncTabBarItemTestIDs];
 }
 
+- (void)applyCustomItemViewsTabBarConfiguration {
+    // Hide the native tab bar visuals so our custom row is the only thing
+    // shown. The bar itself stays in the view hierarchy so that
+    // `UITabBarController` keeps reserving the bottom safe-area inset for
+    // the selected child controller and exposes the right frame for the
+    // row to match.
+    for (UIView *subview in self.tabBar.subviews) {
+        subview.hidden = YES;
+    }
+    self.tabBar.tintColor = UIColor.clearColor;
+    self.tabBar.unselectedItemTintColor = UIColor.clearColor;
+    self.tabBar.backgroundColor = UIColor.clearColor;
+}
+
+- (void)resolveCustomItemViewMode:(NSArray<UIViewController *> *)childViewControllers {
+    if (childViewControllers.count == 0) {
+        _useCustomItemViews = NO;
+        return;
+    }
+
+    NSUInteger withComponent = 0;
+    for (UIViewController *child in childViewControllers) {
+        RNNNavigationOptions *resolved = child.resolveOptions;
+        if (resolved.bottomTab.component.name.hasValue) {
+            withComponent++;
+        }
+    }
+
+    if (withComponent == 0) {
+        _useCustomItemViews = NO;
+        return;
+    }
+
+    if (withComponent != childViewControllers.count) {
+        RCTLogWarn(
+            @"[RNN] Mixed bottomTab.component usage detected (%lu of %lu tabs). All tabs must "
+            @"declare a component or none — falling back to native rendering for all tabs.",
+            (unsigned long)withComponent, (unsigned long)childViewControllers.count);
+        _useCustomItemViews = NO;
+        return;
+    }
+
+    _useCustomItemViews = YES;
+}
+
+- (void)buildCustomTabItemViews:(NSArray<UIViewController *> *)childViewControllers {
+    [self destroyCustomTabItemViews];
+
+    NSString *parentComponentId = self.layoutInfo.componentId;
+    for (NSUInteger i = 0; i < childViewControllers.count; i++) {
+        UIViewController *child = childViewControllers[i];
+        RNNNavigationOptions *resolved = child.resolveOptions;
+        RNNComponentOptions *componentOptions = resolved.bottomTab.component;
+
+        RNNReactView *reactView =
+            [_componentRegistry createComponentIfNotExists:componentOptions
+                                         parentComponentId:parentComponentId
+                                             componentType:RNNComponentTypeBottomTabItem
+                                       reactViewReadyBlock:nil];
+
+        NSString *badge = [resolved.bottomTab.badge withDefault:nil];
+        RNNCustomTabBarItemView *itemView =
+            [[RNNCustomTabBarItemView alloc] initWithReactView:reactView
+                                                      tabIndex:i
+                                                      selected:(i == _currentTabIndex)
+                                                         badge:badge];
+        [_customTabItemViews addObject:itemView];
+    }
+}
+
+- (void)destroyCustomTabItemViews {
+    for (RNNCustomTabBarItemView *itemView in _customTabItemViews) {
+        [itemView removeFromSuperview];
+    }
+    [_customTabItemViews removeAllObjects];
+    [_customRow removeFromSuperview];
+    _customRow = nil;
+}
+
+- (void)ensureCustomRowAttached {
+    if (!_useCustomItemViews) {
+        return;
+    }
+    if (!_customRow) {
+        _customRow = [[RNNBottomTabsCustomRow alloc] initWithFrame:CGRectZero];
+        __weak RNNBottomTabsController *weakSelf = self;
+        _customRow.onTapAtIndex = ^(NSUInteger index) {
+            [weakSelf handleCustomRowTapAtIndex:index];
+        };
+    }
+    [_customRow setItemViews:_customTabItemViews];
+    [_customRow applyOptions:_options.bottomTabs.customRow];
+    if (_customRow.superview != self.view) {
+        [self.view addSubview:_customRow];
+    } else {
+        [self.view bringSubviewToFront:_customRow];
+    }
+}
+
+- (void)layoutCustomRow {
+    if (!_useCustomItemViews || !_customRow) {
+        return;
+    }
+    CGRect tabBarFrame = self.tabBar.frame;
+    if (CGRectIsEmpty(tabBarFrame)) {
+        return;
+    }
+    CGRect tabBarInView = [self.view convertRect:tabBarFrame fromView:self.tabBar.superview];
+
+    CGFloat desiredHeight = [_customRow
+        desiredRowHeightForNativeTabBarHeight:tabBarInView.size.height
+                                   safeBottom:0];
+
+    CGFloat bottomMargin = [_customRow effectiveBottomMargin];
+    CGFloat rowBottom;
+    UIWindow *window = self.view.window;
+    if (window) {
+        // Map the window's safe-area bottom into this controller's view — reliable
+        // for modals where `self.view.safeAreaInsets` is often zero.
+        CGFloat yInWindow = CGRectGetHeight(window.bounds) - window.safeAreaInsets.bottom;
+        CGPoint pInView = [self.view convertPoint:CGPointMake(0, yInWindow) fromView:window];
+        rowBottom = pInView.y - bottomMargin;
+    } else {
+        rowBottom = CGRectGetMaxY(self.view.safeAreaLayoutGuide.layoutFrame) - bottomMargin;
+    }
+
+    CGRect rowFrame = CGRectMake(tabBarInView.origin.x, rowBottom - desiredHeight,
+                                 tabBarInView.size.width, desiredHeight);
+
+    _customRow.frame = rowFrame;
+    _customRow.hidden = self.tabBar.hidden;
+    [_customRow setSelectedIndex:_currentTabIndex];
+}
+
+- (void)handleCustomRowTapAtIndex:(NSUInteger)index {
+    if (index >= self.childViewControllers.count) {
+        return;
+    }
+    UIViewController *target = self.childViewControllers[index];
+    [self.eventEmitter sendBottomTabPressed:@(index)];
+    BOOL select = [[target resolveOptions].bottomTab.selectTabOnPress withDefault:YES];
+    if (!select) {
+        return;
+    }
+    NSUInteger previous = _currentTabIndex;
+    [self setSelectedIndex:index];
+    if (!_rnnSuppressTabSelectionEvents) {
+        [self.eventEmitter sendBottomTabSelected:@(index) unselected:@(previous)];
+    }
+}
+
+- (void)updateCustomTabItemSelection {
+    if (!_useCustomItemViews) {
+        return;
+    }
+    for (NSUInteger i = 0; i < _customTabItemViews.count; i++) {
+        [_customTabItemViews[i] setSelected:(i == _currentTabIndex)];
+    }
+    [_customRow setSelectedIndex:_currentTabIndex];
+}
+
 - (void)mergeChildOptions:(RNNNavigationOptions *)options child:(UIViewController *)child {
     [super mergeChildOptions:options child:child];
     UIViewController *childViewController = [self findViewController:child];
@@ -145,6 +331,13 @@
                          resolvedOptions:childViewController.resolveOptions
                                    child:childViewController];
 
+    if (_useCustomItemViews && options.bottomTab.badge.hasValue) {
+        NSUInteger index = [self.childViewControllers indexOfObject:childViewController];
+        if (index != NSNotFound && index < _customTabItemViews.count) {
+            [_customTabItemViews[index] setBadge:[options.bottomTab.badge withDefault:nil]];
+        }
+    }
+
     [self syncTabBarItemTestIDs];
 }
 
@@ -161,6 +354,12 @@
     [self syncTabBarItemTestIDs];
     [self.presenter viewDidLayoutSubviews];
     [_dotIndicatorPresenter bottomTabsDidLayoutSubviews:self];
+    if (_useCustomItemViews) {
+        // Re-hide native subviews; UIKit recreates them on bounds changes.
+        [self applyCustomItemViewsTabBarConfiguration];
+        [self ensureCustomRowAttached];
+        [self layoutCustomRow];
+    }
 }
 
 - (UIViewController *)getCurrentChild {
@@ -195,6 +394,7 @@
     }
 
     [super setSelectedIndex:_currentTabIndex];
+    [self updateCustomTabItemSelection];
 }
 
 - (UIViewController *)selectedViewController {
@@ -205,6 +405,7 @@
     _previousTabIndex = _currentTabIndex;
     _currentTabIndex = [self.childViewControllers indexOfObject:selectedViewController];
     [super setSelectedViewController:selectedViewController];
+    [self updateCustomTabItemSelection];
 }
 
 - (void)setTabBarVisible:(BOOL)visible animated:(BOOL)animated {
@@ -283,4 +484,11 @@
     return [self.presenter hidesBottomBarWhenPushed];
 }
 
+- (void)dealloc {
+    [self destroyCustomTabItemViews];
+    if (_componentRegistry && self.layoutInfo.componentId) {
+        [_componentRegistry clearComponentsForParentId:self.layoutInfo.componentId];
+    }
+}
+
 @end

package/ios/RNNBottomTabsCustomRow.h

@@ -0,0 +1,57 @@
+#import "RNNBottomTabsCustomRowOptions.h"
+#import "RNNCustomTabBarItemView.h"
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Replaces the visual content of `UITabBar` when `bottomTab.component` is
+ * declared on every tab. Hosts the React-rendered cell views in equal-width
+ * slots and dispatches taps back to the bottom-tabs controller.
+ *
+ * The native `UITabBar` is kept (with its visuals hidden) so that
+ * `UITabBarController` keeps managing the bottom safe-area inset for the
+ * selected child controller — this row is laid out on top of it.
+ *
+ * Visual chrome (height, background, corner radius, margins) is configured
+ * via `RNNBottomTabsCustomRowOptions` and pushed in by the controller.
+ */
+@interface RNNBottomTabsCustomRow : UIView
+
+/**
+ * Block invoked when the user taps a cell. The argument is the 0-based index
+ * of the tapped cell.
+ */
+@property(nonatomic, copy, nullable) void (^onTapAtIndex)(NSUInteger index);
+
+/**
+ * Replaces the cells displayed by this row. The previously held views are
+ * removed from the hierarchy. Each cell is rendered at equal width inside
+ * the content rect (safe area is reserved in the row frame, not inset here).
+ */
+- (void)setItemViews:(NSArray<RNNCustomTabBarItemView *> *)itemViews;
+
+/**
+ * Forwards the selected state to each hosted item view.
+ */
+- (void)setSelectedIndex:(NSUInteger)selectedIndex;
+
+/**
+ * Applies user-supplied chrome options (background, corner radius, margins).
+ * Pass `nil` (or an options instance with no values) to use defaults.
+ */
+- (void)applyOptions:(nullable RNNBottomTabsCustomRowOptions *)options;
+
+/**
+ * Returns the chrome height (plus bottom margin). The controller positions
+ * the row above the home-indicator safe area.
+ */
+- (CGFloat)desiredRowHeightForNativeTabBarHeight:(CGFloat)nativeTabBarHeight
+                                       safeBottom:(CGFloat)safeBottom;
+
+/** User `bottomMargin` option, or 0. */
+- (CGFloat)effectiveBottomMargin;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RNNBottomTabsCustomRow.mm

@@ -0,0 +1,252 @@
+#import "RNNBottomTabsCustomRow.h"
+
+@interface RNNBottomTabsCustomRowCell : UIControl
+@property(nonatomic, strong, nullable) RNNCustomTabBarItemView *itemView;
+@property(nonatomic, assign) NSUInteger index;
+@end
+
+@implementation RNNBottomTabsCustomRowCell
+
+- (void)setItemView:(RNNCustomTabBarItemView *)itemView {
+    if (_itemView == itemView) {
+        return;
+    }
+    [_itemView removeFromSuperview];
+    _itemView = itemView;
+    if (itemView) {
+        itemView.translatesAutoresizingMaskIntoConstraints = YES;
+        itemView.autoresizingMask =
+            UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+        itemView.frame = self.bounds;
+        [self addSubview:itemView];
+    }
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    self.itemView.frame = self.bounds;
+}
+
+@end
+
+@interface RNNBottomTabsCustomRow ()
+@property(nonatomic, strong) NSMutableArray<RNNBottomTabsCustomRowCell *> *cells;
+@property(nonatomic, strong) UIVisualEffectView *backgroundEffectView;
+@property(nonatomic, strong) UIView *backgroundColorView;
+@property(nonatomic, strong) RNNBottomTabsCustomRowOptions *options;
+@end
+
+@implementation RNNBottomTabsCustomRow
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    self = [super initWithFrame:frame];
+    if (self) {
+        _cells = [NSMutableArray new];
+        self.backgroundColor = UIColor.clearColor;
+
+        // Solid background layer (only made visible if user sets backgroundColor).
+        _backgroundColorView = [[UIView alloc] init];
+        _backgroundColorView.hidden = YES;
+        _backgroundColorView.clipsToBounds = YES;
+        if (@available(iOS 13.0, *)) {
+            _backgroundColorView.layer.cornerCurve = kCACornerCurveContinuous;
+        }
+        [self addSubview:_backgroundColorView];
+
+        // Visual effect (blur / glass) layer. Default depends on iOS version.
+        UIVisualEffect *effect = [RNNBottomTabsCustomRow defaultBackgroundEffect];
+        _backgroundEffectView = [[UIVisualEffectView alloc] initWithEffect:effect];
+        _backgroundEffectView.clipsToBounds = YES;
+        if (@available(iOS 13.0, *)) {
+            _backgroundEffectView.layer.cornerCurve = kCACornerCurveContinuous;
+        }
+        if (@available(iOS 26.0, *)) {
+            _backgroundEffectView.layer.cornerRadius = 28.0;
+        }
+        [self addSubview:_backgroundEffectView];
+    }
+    return self;
+}
+
+// `UIGlassEffect` is a new visual effect introduced in iOS 26. Reference it
+// at runtime so this file still compiles against older SDKs and so we get a
+// usable fallback on older OS versions.
++ (UIVisualEffect *)defaultBackgroundEffect {
+    Class glassClass = NSClassFromString(@"UIGlassEffect");
+    if (glassClass) {
+        UIVisualEffect *glass = [[glassClass alloc] init];
+        if (glass) {
+            return glass;
+        }
+    }
+    if (@available(iOS 13.0, *)) {
+        return [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemChromeMaterial];
+    }
+    return [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
+}
+
++ (UIVisualEffect *)blurBackgroundEffect {
+    if (@available(iOS 13.0, *)) {
+        return [UIBlurEffect effectWithStyle:UIBlurEffectStyleSystemChromeMaterial];
+    }
+    return [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
+}
+
+- (void)applyOptions:(RNNBottomTabsCustomRowOptions *)options {
+    self.options = options;
+
+    UIColor *solidColor =
+        options.backgroundColor.hasValue ? options.backgroundColor.get : nil;
+    NSString *effectName =
+        options.backgroundEffect.hasValue ? options.backgroundEffect.get : nil;
+
+    BOOL useSolidColor = solidColor != nil;
+    self.backgroundColorView.hidden = !useSolidColor;
+    if (useSolidColor) {
+        self.backgroundColorView.backgroundColor = solidColor;
+    }
+
+    // Effect view stays unless explicitly disabled or overridden by solid color.
+    BOOL hideEffect = useSolidColor || [effectName isEqualToString:@"none"];
+    self.backgroundEffectView.hidden = hideEffect;
+    if (!hideEffect) {
+        if ([effectName isEqualToString:@"blur"]) {
+            self.backgroundEffectView.effect = [RNNBottomTabsCustomRow blurBackgroundEffect];
+        } else if ([effectName isEqualToString:@"glass"]) {
+            self.backgroundEffectView.effect = [RNNBottomTabsCustomRow defaultBackgroundEffect];
+        }
+    }
+
+    [self setNeedsLayout];
+}
+
+- (CGFloat)effectiveCornerRadius {
+    if (self.options.cornerRadius.hasValue) {
+        return [self.options.cornerRadius.get doubleValue];
+    }
+    if (@available(iOS 26.0, *)) {
+        return 28.0;
+    }
+    return 0.0;
+}
+
+- (CGFloat)effectiveHorizontalMargin {
+    if (self.options.horizontalMargin.hasValue) {
+        return [self.options.horizontalMargin.get doubleValue];
+    }
+    if (@available(iOS 26.0, *)) {
+        return 16.0;
+    }
+    return 0.0;
+}
+
+- (CGFloat)effectiveBottomMargin {
+    if (self.options.bottomMargin.hasValue) {
+        return [self.options.bottomMargin.get doubleValue];
+    }
+    return 0.0;
+}
+
+- (CGFloat)desiredRowHeightForNativeTabBarHeight:(CGFloat)nativeTabBarHeight
+                                       safeBottom:(CGFloat)safeBottom {
+    (void)safeBottom;
+    CGFloat contentHeight = nativeTabBarHeight;
+    if (@available(iOS 26.0, *)) {
+        contentHeight += 18.0;  // default extra for iOS 26 floating bar look
+    }
+    if (self.options.height.hasValue) {
+        contentHeight = [self.options.height.get doubleValue];
+    }
+  // Safe area is applied by the controller when positioning the row frame.
+    return contentHeight + [self effectiveBottomMargin];
+}
+
+- (void)setItemViews:(NSArray<RNNCustomTabBarItemView *> *)itemViews {
+    for (RNNBottomTabsCustomRowCell *cell in self.cells) {
+        [cell removeFromSuperview];
+    }
+    [self.cells removeAllObjects];
+
+    UIView *cellContainer = self.backgroundEffectView.contentView;
+    for (NSUInteger i = 0; i < itemViews.count; i++) {
+        RNNBottomTabsCustomRowCell *cell = [[RNNBottomTabsCustomRowCell alloc] init];
+        cell.index = i;
+        cell.itemView = itemViews[i];
+        [cell addTarget:self
+                 action:@selector(handleCellTap:)
+       forControlEvents:UIControlEventTouchUpInside];
+        [cellContainer addSubview:cell];
+        [self.cells addObject:cell];
+    }
+    [self setNeedsLayout];
+}
+
+- (void)setSelectedIndex:(NSUInteger)selectedIndex {
+    for (NSUInteger i = 0; i < self.cells.count; i++) {
+        RNNCustomTabBarItemView *itemView = self.cells[i].itemView;
+        [itemView setSelected:(i == selectedIndex)];
+    }
+}
+
+- (void)handleCellTap:(RNNBottomTabsCustomRowCell *)cell {
+    if (self.onTapAtIndex) {
+        self.onTapAtIndex(cell.index);
+    }
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+
+    // Bottom safe area is already included in the row frame height via
+    // `desiredRowHeightForNativeTabBarHeight:safeBottom:` — do not inset it
+    // again here or the chrome shrinks by ~home-indicator height.
+    CGFloat bottomInset = [self effectiveBottomMargin];
+    CGRect content =
+        UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(0, 0, bottomInset, 0));
+
+    CGFloat horizontalMargin = [self effectiveHorizontalMargin];
+    if (horizontalMargin > 0) {
+        content = CGRectInset(content, horizontalMargin, 0);
+    }
+
+    CGFloat cornerRadius = [self effectiveCornerRadius];
+    self.backgroundEffectView.layer.cornerRadius = cornerRadius;
+    self.backgroundColorView.layer.cornerRadius = cornerRadius;
+
+    self.backgroundEffectView.frame = content;
+    self.backgroundColorView.frame = content;
+
+    if (self.cells.count == 0) {
+        return;
+    }
+
+    // Cells are subviews of the effect view's contentView (so the rounded
+    // mask clips them); their frames are relative to the effect view's
+    // bounds. The solid color layer sits behind and doesn't host cells.
+    UIView *cellContainer = self.backgroundColorView.hidden
+                                ? self.backgroundEffectView.contentView
+                                : self.backgroundColorView;
+    // Make sure cells live in the visible container.
+    if (self.cells.firstObject.superview != cellContainer) {
+        for (RNNBottomTabsCustomRowCell *cell in self.cells) {
+            [cell removeFromSuperview];
+            [cellContainer addSubview:cell];
+        }
+    }
+
+    CGFloat totalWidth = content.size.width;
+    CGFloat totalHeight = content.size.height;
+    CGFloat width = totalWidth / (CGFloat)self.cells.count;
+    for (NSUInteger i = 0; i < self.cells.count; i++) {
+        CGFloat x = floor((CGFloat)i * width);
+        CGFloat nextX = floor((CGFloat)(i + 1) * width);
+        self.cells[i].frame = CGRectMake(x, 0, nextX - x, totalHeight);
+    }
+}
+
+- (void)safeAreaInsetsDidChange {
+    [super safeAreaInsetsDidChange];
+    [self setNeedsLayout];
+}
+
+@end

package/ios/RNNBottomTabsCustomRowOptions.h

@@ -0,0 +1,42 @@
+#import "RNNOptions.h"
+
+/**
+ * Visual options for the floating row that hosts custom-component bottom tab
+ * cells. Applies only when every tab declares `bottomTab.component`. All
+ * fields are optional; if omitted the row uses sensible defaults (iOS 26
+ * glass pill on iOS 26+, blur with no inset on older versions).
+ *
+ * The same option keys are exposed in JS as `bottomTabs.customRow` on both
+ * platforms. Android applies them via `RNNBottomTabsCustomRowModule`.
+ */
+@interface RNNBottomTabsCustomRowOptions : RNNOptions
+
+/**
+ * Override the row's content height. The native tab bar (and its safe-area
+ * inset) is preserved underneath — this only changes how tall the visible
+ * floating row appears. Defaults to the native tab bar content height (+18pt
+ * on iOS 26+ to match the larger native floating bar).
+ */
+@property(nonatomic, strong) Number *height;
+
+/** Solid background color for the row. When set, overrides `backgroundEffect`. */
+@property(nonatomic, strong) Color *backgroundColor;
+
+/**
+ * Visual effect for the row background. Values: `glass` | `blur` | `none`.
+ * Default: `glass` on iOS 26+, `blur` on older versions.
+ */
+@property(nonatomic, strong) Text *backgroundEffect;
+
+/** Corner radius of the row. Default: 28 on iOS 26+, 0 below. */
+@property(nonatomic, strong) Number *cornerRadius;
+
+/** Horizontal inset of the row from the screen edges. Default: 16 on iOS 26+, 0 below. */
+@property(nonatomic, strong) Number *horizontalMargin;
+
+/** Distance between the row's bottom edge and the safe-area bottom. Default: 0. */
+@property(nonatomic, strong) Number *bottomMargin;
+
+- (BOOL)hasValue;
+
+@end

package/ios/RNNBottomTabsCustomRowOptions.mm

@@ -0,0 +1,37 @@
+#import "RNNBottomTabsCustomRowOptions.h"
+
+@implementation RNNBottomTabsCustomRowOptions
+
+- (instancetype)initWithDict:(NSDictionary *)dict {
+    self = [super initWithDict:dict];
+    self.height = [NumberParser parse:dict key:@"height"];
+    self.backgroundColor = [ColorParser parse:dict key:@"backgroundColor"];
+    self.backgroundEffect = [TextParser parse:dict key:@"backgroundEffect"];
+    self.cornerRadius = [NumberParser parse:dict key:@"cornerRadius"];
+    self.horizontalMargin = [NumberParser parse:dict key:@"horizontalMargin"];
+    self.bottomMargin = [NumberParser parse:dict key:@"bottomMargin"];
+    return self;
+}
+
+- (void)mergeOptions:(RNNBottomTabsCustomRowOptions *)options {
+    if (options.height.hasValue)
+        self.height = options.height;
+    if (options.backgroundColor.hasValue)
+        self.backgroundColor = options.backgroundColor;
+    if (options.backgroundEffect.hasValue)
+        self.backgroundEffect = options.backgroundEffect;
+    if (options.cornerRadius.hasValue)
+        self.cornerRadius = options.cornerRadius;
+    if (options.horizontalMargin.hasValue)
+        self.horizontalMargin = options.horizontalMargin;
+    if (options.bottomMargin.hasValue)
+        self.bottomMargin = options.bottomMargin;
+}
+
+- (BOOL)hasValue {
+    return self.height.hasValue || self.backgroundColor.hasValue ||
+           self.backgroundEffect.hasValue || self.cornerRadius.hasValue ||
+           self.horizontalMargin.hasValue || self.bottomMargin.hasValue;
+}
+
+@end

package/ios/RNNBottomTabsOptions.h

@@ -1,4 +1,5 @@
 #import "BottomTabsAttachMode.h"
+#import "RNNBottomTabsCustomRowOptions.h"
 #import "RNNOptions.h"
 #import "RNNShadowOptions.h"
 
@@ -22,6 +23,7 @@
 @property(nonatomic, strong) Color *borderColor;
 @property(nonatomic, strong) Number *borderWidth;
 @property(nonatomic, strong) RNNShadowOptions *shadow;
+@property(nonatomic, strong) RNNBottomTabsCustomRowOptions *customRow;
 @property(nonatomic, strong) BottomTabsAttachMode *tabsAttachMode;
 
 - (BOOL)shouldDrawBehind;