react-native-navigation 8.8.5 → 8.8.6-snapshot.2571

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;

package/ios/RNNBottomTabsOptions.mm

@@ -26,6 +26,7 @@
     self.borderColor = [ColorParser parse:dict key:@"borderColor"];
     self.borderWidth = [NumberParser parse:dict key:@"borderWidth"];
     self.shadow = [[RNNShadowOptions alloc] initWithDict:dict[@"shadow"]];
+    self.customRow = [[RNNBottomTabsCustomRowOptions alloc] initWithDict:dict[@"customRow"]];
 
     return self;
 }
@@ -69,6 +70,7 @@
         self.borderWidth = options.borderWidth;
 
     [self.shadow mergeOptions:options.shadow];
+    [self.customRow mergeOptions:options.customRow];
 }
 
 - (BOOL)shouldDrawBehind {

package/ios/RNNComponentViewCreator.h

@@ -9,7 +9,8 @@ typedef enum RNNComponentType {
     RNNComponentTypeComponent,
     RNNComponentTypeTopBarTitle,
     RNNComponentTypeTopBarButton,
-    RNNComponentTypeTopBarBackground
+    RNNComponentTypeTopBarBackground,
+    RNNComponentTypeBottomTabItem
 } RNNComponentType;
 
 @protocol RNNComponentViewCreator

package/ios/RNNCustomTabBarItemView.h

@@ -0,0 +1,26 @@
+#import "RNNReactView.h"
+#import <UIKit/UIKit.h>
+
+/**
+ * Hosts an `RNNReactView` that renders a user-supplied React component as a
+ * bottom tab item. The view is laid out on top of the underlying
+ * `UITabBarButton` and forwards touches to it so native selection,
+ * accessibility focus and `selectTabOnPress: false` keep working.
+ *
+ * The hosted component receives `componentId`, `tabIndex`, `selected` and
+ * `badge` props. Selected state is updated via `setSelected:`.
+ */
+@interface RNNCustomTabBarItemView : UIView
+
+@property(nonatomic, readonly, strong) RNNReactView *reactView;
+
+- (instancetype)initWithReactView:(RNNReactView *)reactView
+                         tabIndex:(NSUInteger)tabIndex
+                         selected:(BOOL)selected
+                            badge:(NSString *)badge;
+
+- (void)setSelected:(BOOL)selected;
+
+- (void)setBadge:(NSString *)badge;
+
+@end

package/ios/RNNCustomTabBarItemView.mm

@@ -0,0 +1,83 @@
+#import "RNNCustomTabBarItemView.h"
+
+@interface RNNCustomTabBarItemView ()
+
+@property(nonatomic, readwrite, strong) RNNReactView *reactView;
+@property(nonatomic, assign) NSUInteger tabIndex;
+@property(nonatomic, assign) BOOL isSelected;
+@property(nonatomic, copy) NSString *badge;
+
+@end
+
+@implementation RNNCustomTabBarItemView
+
+- (instancetype)initWithReactView:(RNNReactView *)reactView
+                         tabIndex:(NSUInteger)tabIndex
+                         selected:(BOOL)selected
+                            badge:(NSString *)badge {
+    self = [super initWithFrame:CGRectZero];
+    if (self) {
+        _reactView = reactView;
+        _tabIndex = tabIndex;
+        _isSelected = selected;
+        _badge = [badge copy];
+
+        self.backgroundColor = [UIColor clearColor];
+        self.userInteractionEnabled = NO;
+
+        _reactView.backgroundColor = [UIColor clearColor];
+        _reactView.userInteractionEnabled = NO;
+        [self addSubview:_reactView];
+
+        [self updateProps];
+    }
+    return self;
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    self.reactView.frame = self.bounds;
+}
+
+- (CGSize)sizeThatFits:(CGSize)size {
+    return size;
+}
+
+- (void)setSelected:(BOOL)selected {
+    if (self.isSelected == selected) {
+        return;
+    }
+    self.isSelected = selected;
+    [self updateProps];
+}
+
+- (void)setBadge:(NSString *)badge {
+    if (badge == _badge || [badge isEqualToString:_badge]) {
+        return;
+    }
+    _badge = [badge copy];
+    [self updateProps];
+}
+
+- (void)updateProps {
+    NSMutableDictionary *props = [NSMutableDictionary dictionary];
+#ifdef RCT_NEW_ARCH_ENABLED
+    // RNNReactView's `properties` setter is a no-op on Fabric (it writes to
+    // the auto-synthesized ivar instead of the underlying surface). Update
+    // the React tree by writing directly to the surface so prop changes
+    // propagate to JS.
+    [props addEntriesFromDictionary:(self.reactView.surface.properties ?: @{})];
+#else
+    [props addEntriesFromDictionary:(self.reactView.appProperties ?: @{})];
+#endif
+    props[@"tabIndex"] = @(self.tabIndex);
+    props[@"selected"] = @(self.isSelected);
+    props[@"badge"] = self.badge ?: [NSNull null];
+#ifdef RCT_NEW_ARCH_ENABLED
+    self.reactView.surface.properties = props;
+#else
+    self.reactView.appProperties = props;
+#endif
+}
+
+@end

package/ios/RNNReactRootViewCreator.mm

@@ -71,6 +71,7 @@
         return RNNReactButtonView.class;
     case RNNComponentTypeTopBarBackground:
         return RNNReactBackgroundView.class;
+    case RNNComponentTypeBottomTabItem:
     case RNNComponentTypeComponent:
     default:
         return RNNComponentRootView.class;

package/ios/RNNViewControllerFactory.mm

@@ -234,6 +234,7 @@
                                                      presenter:presenter
                                             bottomTabPresenter:bottomTabPresenter
                                          dotIndicatorPresenter:dotIndicatorPresenter
+                                             componentRegistry:_componentRegistry
                                                   eventEmitter:_eventEmitter
                                           childViewControllers:childViewControllers
                                             bottomTabsAttacher:bottomTabsAttacher];

package/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -73,6 +73,12 @@
 		5012242B217372B3000F5F98 /* ImageParser.mm in Sources */ = {isa = PBXBuildFile; fileRef = 50122429217372B3000F5F98 /* ImageParser.mm */; };
 		5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */ = {isa = PBXBuildFile; fileRef = 5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */; };
 		5016E8F020209690009D4F7C /* RNNCustomTitleView.mm in Sources */ = {isa = PBXBuildFile; fileRef = 5016E8EE2020968F009D4F7C /* RNNCustomTitleView.mm */; };
+		EE4A5C0001000000ABCD0001 /* RNNCustomTabBarItemView.h in Headers */ = {isa = PBXBuildFile; fileRef = EE4A5C0001000000ABCD0003 /* RNNCustomTabBarItemView.h */; };
+		EE4A5C0001000000ABCD0002 /* RNNCustomTabBarItemView.mm in Sources */ = {isa = PBXBuildFile; fileRef = EE4A5C0001000000ABCD0004 /* RNNCustomTabBarItemView.mm */; };
+		EE4A5C0001000000ABCD0011 /* RNNBottomTabsCustomRow.h in Headers */ = {isa = PBXBuildFile; fileRef = EE4A5C0001000000ABCD0013 /* RNNBottomTabsCustomRow.h */; };
+		EE4A5C0001000000ABCD0012 /* RNNBottomTabsCustomRow.mm in Sources */ = {isa = PBXBuildFile; fileRef = EE4A5C0001000000ABCD0014 /* RNNBottomTabsCustomRow.mm */; };
+		EE4A5C0001000000ABCD0021 /* RNNBottomTabsCustomRowOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = EE4A5C0001000000ABCD0023 /* RNNBottomTabsCustomRowOptions.h */; };
+		EE4A5C0001000000ABCD0022 /* RNNBottomTabsCustomRowOptions.mm in Sources */ = {isa = PBXBuildFile; fileRef = EE4A5C0001000000ABCD0024 /* RNNBottomTabsCustomRowOptions.mm */; };
 		50175CD1207A2AA1004FE91B /* RNNComponentOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */; };
 		50175CD2207A2AA1004FE91B /* RNNComponentOptions.mm in Sources */ = {isa = PBXBuildFile; fileRef = 50175CD0207A2AA1004FE91B /* RNNComponentOptions.mm */; };
 		5017D9E1239D2C6C00B74047 /* BottomTabsAttachModeFactory.h in Headers */ = {isa = PBXBuildFile; fileRef = 5017D9DF239D2C6C00B74047 /* BottomTabsAttachModeFactory.h */; };
@@ -568,6 +574,12 @@
 		50122429217372B3000F5F98 /* ImageParser.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ImageParser.mm; sourceTree = "<group>"; };
 		5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNCustomTitleView.h; sourceTree = "<group>"; };
 		5016E8EE2020968F009D4F7C /* RNNCustomTitleView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNCustomTitleView.mm; sourceTree = "<group>"; };
+		EE4A5C0001000000ABCD0003 /* RNNCustomTabBarItemView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNCustomTabBarItemView.h; sourceTree = "<group>"; };
+		EE4A5C0001000000ABCD0004 /* RNNCustomTabBarItemView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNCustomTabBarItemView.mm; sourceTree = "<group>"; };
+		EE4A5C0001000000ABCD0013 /* RNNBottomTabsCustomRow.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNBottomTabsCustomRow.h; sourceTree = "<group>"; };
+		EE4A5C0001000000ABCD0014 /* RNNBottomTabsCustomRow.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNBottomTabsCustomRow.mm; sourceTree = "<group>"; };
+		EE4A5C0001000000ABCD0023 /* RNNBottomTabsCustomRowOptions.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNBottomTabsCustomRowOptions.h; sourceTree = "<group>"; };
+		EE4A5C0001000000ABCD0024 /* RNNBottomTabsCustomRowOptions.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNBottomTabsCustomRowOptions.mm; sourceTree = "<group>"; };
 		50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNComponentOptions.h; sourceTree = "<group>"; };
 		50175CD0207A2AA1004FE91B /* RNNComponentOptions.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNComponentOptions.mm; sourceTree = "<group>"; };
 		5017D9DF239D2C6C00B74047 /* BottomTabsAttachModeFactory.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = BottomTabsAttachModeFactory.h; sourceTree = "<group>"; };
@@ -1663,6 +1675,12 @@
 			children = (
 				5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */,
 				5016E8EE2020968F009D4F7C /* RNNCustomTitleView.mm */,
+				EE4A5C0001000000ABCD0003 /* RNNCustomTabBarItemView.h */,
+				EE4A5C0001000000ABCD0004 /* RNNCustomTabBarItemView.mm */,
+				EE4A5C0001000000ABCD0013 /* RNNBottomTabsCustomRow.h */,
+				EE4A5C0001000000ABCD0014 /* RNNBottomTabsCustomRow.mm */,
+				EE4A5C0001000000ABCD0023 /* RNNBottomTabsCustomRowOptions.h */,
+				EE4A5C0001000000ABCD0024 /* RNNBottomTabsCustomRowOptions.mm */,
 				E8A5CD601F49114F00E89D0D /* RNNElement.h */,
 				E8A5CD611F49114F00E89D0D /* RNNElement.mm */,
 				E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */,
@@ -1737,6 +1755,9 @@
 				E5F6C3A422DB4D0F0093C2CE /* UIColor+RNNUtils.h in Headers */,
 				5038A3C1216E1E66009280BC /* RNNFontAttributesCreator.h in Headers */,
 				5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */,
+				EE4A5C0001000000ABCD0001 /* RNNCustomTabBarItemView.h in Headers */,
+				EE4A5C0001000000ABCD0011 /* RNNBottomTabsCustomRow.h in Headers */,
+				EE4A5C0001000000ABCD0021 /* RNNBottomTabsCustomRowOptions.h in Headers */,
 				500623A525B7003A0086AB39 /* RNNShadowOptions.h in Headers */,
 				50415CBA20553B8E00BB682E /* RNNScreenTransition.h in Headers */,
 				5039558B2174829400B0A663 /* IntNumberParser.h in Headers */,
@@ -2042,6 +2063,9 @@
 				50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.mm in Sources */,
 				503A8A0623BB850A0094D1C4 /* TimeInterval.mm in Sources */,
 				5016E8F020209690009D4F7C /* RNNCustomTitleView.mm in Sources */,
+				EE4A5C0001000000ABCD0002 /* RNNCustomTabBarItemView.mm in Sources */,
+				EE4A5C0001000000ABCD0012 /* RNNBottomTabsCustomRow.mm in Sources */,
+				EE4A5C0001000000ABCD0022 /* RNNBottomTabsCustomRowOptions.mm in Sources */,
 				5061B6C823D48449008B9827 /* VerticalRotationTransition.mm in Sources */,
 				5022EDB62405224B00852BA6 /* BottomTabPresenter.mm in Sources */,
 				503955982174864E00B0A663 /* NullDouble.mm in Sources */,

package/lib/module/ARCHITECTURE.md

@@ -18,6 +18,7 @@ src/
 ├── components/              # React component management
 ├── events/                  # Event system
 ├── interfaces/              # TypeScript type definitions
+├── linking/                 # Deep-linking framework (URL → command)
 └── processors/              # Extensibility hooks
 ```
 
@@ -207,6 +208,35 @@ Notifies listeners of command lifecycle (start, complete).
 | `RNN.PreviewCompleted` | 3D Touch preview completed |
 | `RNN.CommandCompleted` | Navigation command finished |
 
+## Linking Layer
+
+Implements URL-to-screen routing on top of the standard command pipeline. The whole feature is JS-only; it consumes URLs from RN's `Linking` module and dispatches `showModal` (or a user-supplied command) when a match is found.
+
+**Public surface** (proxied through `NavigationDelegate`):
+- `Navigation.setLinking(config)` — configure prefixes, screen map, and customization hooks
+- `Navigation.handleDeepLink(url)` — manually feed a URL (push notifications, branch.io, App Clips)
+- `Navigation.setLinkingReady(ready)` — user-controlled gate for deferred deep links
+
+**Internal modules** (`src/linking/`):
+
+| File | Purpose |
+|------|---------|
+| `LinkingHandler.ts` | Orchestrator. Subscribes to `Linking.url`/`getInitialURL`, drives the queue, dispatches matches. Instantiated by `NavigationRoot`. |
+| `URLParser.ts` | Strips prefix (longest match), removes fragment, decodes path segments + query params. |
+| `RouteMatcher.ts` | Compiles `ScreensConfig` into a `RouteNode` tree; matches paths to screen chains with parameter extraction. |
+| `DeferredLinkQueue.ts` | FIFO queue. Holds URLs until both gates open (root-ready + user-ready). |
+| `ModalLayoutBuilder.ts` | Default presentation: wraps the matched chain in a `stack`, merges params into `passProps`, filters React-reserved keys (`ref`, `key`). |
+| `types.ts` | Public types: `LinkingConfig`, `RouteMatch`, `ScreensConfig`, etc. (re-exported via `src/index.ts`). |
+
+**Readiness gates** — a URL is dispatched only when both are true:
+1. **Root-ready** (automatic): the first `Navigation.setRoot()` has resolved. `NavigationRoot.setRoot` calls `linkingHandler.setRootReady()` after the promise resolves.
+2. **User-ready** (optional): `config.isReady()` returns `true`, or `setLinkingReady(true)` was called.
+
+**Resolution priority** when a match is found:
+1. `config.onLink(match)` — full escape hatch, RNN does nothing else
+2. `config.getModal(match)` — custom modal layout
+3. Default `ModalLayoutBuilder` output
+
 ## Processors Layer
 
 ### OptionProcessorsStore

package/lib/module/Navigation.js

@@ -21,6 +21,7 @@ import { Deprecations } from "./commands/Deprecations.js";
 import { LayoutProcessor } from "./processors/LayoutProcessor.js";
 import { LayoutProcessorsStore } from "./processors/LayoutProcessorsStore.js";
 import { OptionsCrawler } from "./commands/OptionsCrawler.js";
+import { LinkingHandler } from "./linking/LinkingHandler.js";
 export class NavigationRoot {
   TouchablePreview = TouchablePreview;
   constructor(nativeCommandsSender, nativeEventsReceiver, appRegistryService) {
@@ -42,6 +43,7 @@ export class NavigationRoot {
     this.optionsCrawler = new OptionsCrawler(this.store, this.uniqueIdProvider);
     this.commands = new Commands(this.store, this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler, this.commandsObserver, this.uniqueIdProvider, optionsProcessor, layoutProcessor, this.optionsCrawler);
     this.eventsRegistry = new EventsRegistry(this.nativeEventsReceiver, this.commandsObserver, this.componentEventsObserver);
+    this.linkingHandler = new LinkingHandler(layout => this.commands.showModal(layout));
     this.componentEventsObserver.registerOnceForAllComponentEvents();
   }
 
@@ -84,7 +86,9 @@ export class NavigationRoot {
    * Reset the app to a new layout
    */
   setRoot(layout) {
-    return this.commands.setRoot(layout);
+    const result = this.commands.setRoot(layout);
+    result.then(() => this.linkingHandler.setRootReady()).catch(() => {});
+    return result;
   }
 
   /**
@@ -193,6 +197,35 @@ export class NavigationRoot {
     return this.commands.getLaunchArgs();
   }
 
+  /**
+   * Configure deep link handling. Maps URL prefixes and path patterns to
+   * RNN components. By default each matched link is presented as a modal
+   * (wrapped in a stack so a topBar close button can be configured); supply
+   * `getModal` to customize the modal layout or `onLink` to bypass the
+   * default behavior entirely.
+   */
+  setLinking(config) {
+    this.linkingHandler.configure(config);
+  }
+
+  /**
+   * Manually run a URL through the deep link pipeline as if it had been
+   * delivered by the OS. Useful for URLs received from push notifications
+   * or other non-`Linking` sources.
+   */
+  handleDeepLink(url) {
+    this.linkingHandler.handleURL(url);
+  }
+
+  /**
+   * Signal that the app is ready to process deep links (e.g. after the
+   * user has authenticated). When set to `true`, any links that were
+   * queued while not ready are replayed in order.
+   */
+  setLinkingReady(ready) {
+    this.linkingHandler.setLinkingReady(ready);
+  }
+
   /**
    * Obtain the events registry instance
    */