Enable intercepting and preventing native tab presses for custom navigation behavior

[focux]

There’s a pattern emerging with the new iOS tab design where a tab is given a "search" role to make it visually prominent and keep it visible even when the tab bar collapses. Instead of navigating to a standard tab screen, tapping this tab intercepts the action and presents a different screen (usually full-screen and without tabs).

You can see this pattern in several apps, including the GitHub app.

My question is: would you be open to accepting a PR that introduces an API allowing a tab press to not trigger navigation while still emitting the onChange event?

This would make it possible to support this pattern natively instead of relying on patches or workarounds. Would that be something you’d consider accepting?

Here is the patch that I made to support this on my app.

diff --git a/ios/bottom-tabs/RNSBottomTabsHostComponentView.h b/ios/bottom-tabs/RNSBottomTabsHostComponentView.h
index 04eb070b32898c4e2fd2272d69d5d9a06b94d94a..e4b7fe7ceafc0bfaad644de6ce739e775134b6bc 100644
--- a/ios/bottom-tabs/RNSBottomTabsHostComponentView.h
+++ b/ios/bottom-tabs/RNSBottomTabsHostComponentView.h
@@ -68,7 +68,8 @@ NS_ASSUME_NONNULL_BEGIN
  */
 - (nonnull RNSBottomTabsHostEventEmitter *)reactEventEmitter;
 
-- (BOOL)emitOnNativeFocusChangeRequestSelectedTabScreen:(nonnull RNSBottomTabsScreenComponentView *)tabScreen;
+- (BOOL)emitOnNativeFocusChangeRequestSelectedTabScreen:(nonnull RNSBottomTabsScreenComponentView *)tabScreen
+                                               prevented:(BOOL)prevented;
 
 #if !RCT_NEW_ARCH_ENABLED
 #pragma mark - LEGACY Event blocks
diff --git a/ios/bottom-tabs/RNSBottomTabsHostComponentView.mm b/ios/bottom-tabs/RNSBottomTabsHostComponentView.mm
index e5b111d9961d26ab08715e6e776a23c19e34e04a..8afd612e88c6dda035583ed921975d15c7715138 100644
--- a/ios/bottom-tabs/RNSBottomTabsHostComponentView.mm
+++ b/ios/bottom-tabs/RNSBottomTabsHostComponentView.mm
@@ -203,8 +203,9 @@ - (nonnull RNSBottomTabsHostEventEmitter *)reactEventEmitter
 }
 
 - (BOOL)emitOnNativeFocusChangeRequestSelectedTabScreen:(RNSBottomTabsScreenComponentView *)tabScreen
+                                               prevented:(BOOL)prevented
 {
-  return [_reactEventEmitter emitOnNativeFocusChange:OnNativeFocusChangePayload{.tabKey = tabScreen.tabKey}];
+  return [_reactEventEmitter emitOnNativeFocusChange:OnNativeFocusChangePayload{.tabKey = tabScreen.tabKey, .prevented = prevented}];
 }
 
 #pragma mark - RCTViewComponentViewProtocol
diff --git a/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.h b/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.h
index 8aa4c35dfb29bc9a3883720528bf85d2af698365..bd61f8816aaca167decf388ea68c4c36ad51b0e2 100644
--- a/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.h
+++ b/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.h
@@ -16,10 +16,12 @@ NS_ASSUME_NONNULL_BEGIN
 #if defined(__cplusplus)
 struct OnNativeFocusChangePayload {
   NSString *_Nonnull tabKey;
+  BOOL prevented;
 };
 #else
 typedef struct {
   NSString *_Nonnull tabKey;
+  BOOL prevented;
 } OnNativeFocusChangePayload;
 #endif
 
diff --git a/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.mm b/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.mm
index bf68c5334d78acf56ad88e70ab36561b94fa2ad0..4f3a76993aa25bc4134d202a7a788b05464bbe59 100644
--- a/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.mm
+++ b/ios/bottom-tabs/RNSBottomTabsHostEventEmitter.mm
@@ -37,7 +37,9 @@ - (BOOL)emitOnNativeFocusChange:(OnNativeFocusChangePayload)payload
 {
 #if RCT_NEW_ARCH_ENABLED
   if (_reactEventEmitter != nullptr) {
-    _reactEventEmitter->onNativeFocusChange({.tabKey = RCTStringFromNSString(payload.tabKey)});
+    _reactEventEmitter->onNativeFocusChange({
+        .tabKey = RCTStringFromNSString(payload.tabKey),
+        .prevented = static_cast<bool>(payload.prevented)});
     return YES;
   } else {
     RCTLogWarn(@"[RNScreens] Skipped OnNativeFocusChange event emission due to nullish emitter");
@@ -45,7 +47,7 @@ - (BOOL)emitOnNativeFocusChange:(OnNativeFocusChangePayload)payload
   }
 #else
   if (self.onNativeFocusChange) {
-    self.onNativeFocusChange(@{@"tabKey" : payload.tabKey});
+    self.onNativeFocusChange(@{@"tabKey" : payload.tabKey, @"prevented" : @(payload.prevented)});
     return YES;
   } else {
     RCTLogWarn(@"[RNScreens] Skipped OnNativeFocusChange event emission due to nullish emitter");
diff --git a/ios/bottom-tabs/RNSBottomTabsScreenComponentView.h b/ios/bottom-tabs/RNSBottomTabsScreenComponentView.h
index 48f1f708815747eff46ee15c362df218a849251a..c2b58d2b743748f1ab18b0809b0884db08dea936 100644
--- a/ios/bottom-tabs/RNSBottomTabsScreenComponentView.h
+++ b/ios/bottom-tabs/RNSBottomTabsScreenComponentView.h
@@ -61,6 +61,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) BOOL isSelectedScreen;
 @property (nonatomic, nullable) NSString *tabKey;
 @property (nonatomic, nullable) NSString *badgeValue;
+@property (nonatomic) BOOL preventNavigation;
 
 @property (nonatomic, readonly) RNSBottomTabsIconType iconType;
 
diff --git a/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm b/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
index b8ec8a2010b136c82f4cc891f2c668e2c0374da2..1660dd81421996d782411f39c481f197286acbec 100644
--- a/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
+++ b/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
@@ -83,6 +83,7 @@ - (void)resetProps
 {
   _isSelectedScreen = NO;
   _badgeValue = nil;
+  _preventNavigation = NO;
   _title = nil;
   _orientation = RNSOrientationInherit;
 
@@ -254,6 +255,10 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     _tabKey = RCTNSStringFromString(newComponentProps.tabKey);
   }
 
+  if (newComponentProps.preventNavigation != oldComponentProps.preventNavigation) {
+    _preventNavigation = newComponentProps.preventNavigation;
+  }
+
   if (newComponentProps.isFocused != oldComponentProps.isFocused) {
     _isSelectedScreen = newComponentProps.isFocused;
     [_controller tabScreenFocusHasChanged];
@@ -505,6 +510,11 @@ - (void)setTabKey:(NSString *)tabKey
   _tabKey = tabKey;
 }
 
+- (void)setPreventNavigation:(BOOL)preventNavigation
+{
+  _preventNavigation = preventNavigation;
+}
+
 - (void)setTitle:(NSString *)title
 {
   _title = title;
diff --git a/ios/bottom-tabs/RNSBottomTabsScreenComponentViewManager.mm b/ios/bottom-tabs/RNSBottomTabsScreenComponentViewManager.mm
index 248a1681aeb34a100f63d59112fdc092241f5359..b6a213a4f0bb9b8be36253334faeb4e35187cc27 100644
--- a/ios/bottom-tabs/RNSBottomTabsScreenComponentViewManager.mm
+++ b/ios/bottom-tabs/RNSBottomTabsScreenComponentViewManager.mm
@@ -18,6 +18,7 @@ - (UIView *)view
 }
 
 RCT_EXPORT_VIEW_PROPERTY(tabKey, NSString);
+RCT_EXPORT_VIEW_PROPERTY(preventNavigation, BOOL);
 
 RCT_REMAP_VIEW_PROPERTY(isFocused, isSelectedScreen, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(title, NSString);
diff --git a/ios/bottom-tabs/RNSTabBarControllerDelegate.mm b/ios/bottom-tabs/RNSTabBarControllerDelegate.mm
index bf98c97176bc90096670f9b086e2a3b0e42ccf86..01c87699df0521825efb47d5062f1a155f662d2a 100644
--- a/ios/bottom-tabs/RNSTabBarControllerDelegate.mm
+++ b/ios/bottom-tabs/RNSTabBarControllerDelegate.mm
@@ -23,6 +23,15 @@ - (BOOL)tabBarController:(UITabBarController *)tabBarController
   RNSTabBarController *tabBarCtrl = static_cast<RNSTabBarController *>(tabBarController);
   RNSTabsScreenViewController *tabScreenCtrl = static_cast<RNSTabsScreenViewController *>(viewController);
 
+  // Check if navigation to this tab should be prevented
+  if ([viewController isKindOfClass:RNSTabsScreenViewController.class] &&
+      tabScreenCtrl.tabScreenComponentView.preventNavigation) {
+    [tabBarCtrl.tabsHostComponentView
+        emitOnNativeFocusChangeRequestSelectedTabScreen:tabScreenCtrl.tabScreenComponentView
+                                              prevented:YES];
+    return NO;
+  }
+
 #if !TARGET_OS_TV
   // When the moreNavigationController is selected, we want to show it
   // TODO: this solution only works for uncontrolled mode. Add support for controlled mode as well.
@@ -42,7 +51,8 @@ - (BOOL)tabBarController:(UITabBarController *)tabBarController
   // TODO: send an event with information about event being handled natively
   if (!repeatedSelectionHandledNatively) {
     [tabBarCtrl.tabsHostComponentView
-        emitOnNativeFocusChangeRequestSelectedTabScreen:tabScreenCtrl.tabScreenComponentView];
+        emitOnNativeFocusChangeRequestSelectedTabScreen:tabScreenCtrl.tabScreenComponentView
+                                              prevented:NO];
 
     // TODO: handle overrideScrollViewBehaviorInFirstDescendantChainIfNeeded for natively-driven tabs
     return ![self shouldPreventNativeTabChangeWithinTabBarController:tabBarCtrl];
diff --git a/src/components/bottom-tabs/BottomTabs.types.ts b/src/components/bottom-tabs/BottomTabs.types.ts
index d19d438cac867aa88f9189577426931c57cfb7a3..64ecc78ff6d5c25ebeacdac36af711b918815795 100644
--- a/src/components/bottom-tabs/BottomTabs.types.ts
+++ b/src/components/bottom-tabs/BottomTabs.types.ts
@@ -7,6 +7,7 @@ import type {
 
 export type NativeFocusChangeEvent = {
   tabKey: string;
+  prevented?: boolean;
 };
 
 // Android-specific
diff --git a/src/components/bottom-tabs/BottomTabsScreen.types.ts b/src/components/bottom-tabs/BottomTabsScreen.types.ts
index 358c9e2e5c3a3e48dd3654f51bb0af1b6e1a043e..fd495eeebf9e65085fdab05d80bd2c7bd042a13d 100644
--- a/src/components/bottom-tabs/BottomTabsScreen.types.ts
+++ b/src/components/bottom-tabs/BottomTabsScreen.types.ts
@@ -282,6 +282,16 @@ export interface BottomTabsScreenProps {
    * @platform android, ios
    */
   tabKey: string;
+  /**
+   * @summary When true, prevents native navigation to this tab when selected.
+   *
+   * The tab can still be selected programmatically via isFocused prop.
+   *
+   * @default false
+   *
+   * @platform ios
+   */
+  preventNavigation?: boolean;
   // #endregion
 
   // #region General
diff --git a/src/fabric/bottom-tabs/BottomTabsNativeComponent.ts b/src/fabric/bottom-tabs/BottomTabsNativeComponent.ts
index a20e74fc3fd5a5d0ddd4b900eb719d6e642976f5..771215f7a2083b0a49bab4344a6aecc5762e0fbb 100644
--- a/src/fabric/bottom-tabs/BottomTabsNativeComponent.ts
+++ b/src/fabric/bottom-tabs/BottomTabsNativeComponent.ts
@@ -18,6 +18,7 @@ import type {
 
 type NativeFocusChangeEvent = {
   tabKey: string;
+  prevented?: boolean;
 };
 
 type TabBarItemLabelVisibilityMode =
diff --git a/src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts b/src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts
index f7f396df45a360760aab8a9c2330c2df42f11f27..08f6f8f346fdbca0e9f88dc554705187a500f63e 100644
--- a/src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts
+++ b/src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts
@@ -122,6 +122,7 @@ export interface NativeProps extends ViewProps {
   // Control
   isFocused?: boolean;
   tabKey: string;
+  preventNavigation?: boolean;
 
   // General
   title?: string | undefined | null;

References

https://x.com/Foocux/status/1993466414649450889?s=20
https://x.com/Dimillian/status/1932359777084174575?s=20

[kkafar]

Hey @focux,

thanks for the input. Honest answer is: I'm not sure. We have plans for "preventDefault" mechanism, but we're still in talks on how to design it & implement it. With that in place the effect you desire would be achievable, right? If so, then we need couple more weeks to open a PR where we'll be able to discuss the proposed solution in public.

[kkafar]

Surely, if you open the PR now we won't land it immediately, because we focus now on release of 4.19.0 and have possibly conflicting features in mind.

Therefore, my advice would be to give us a bit more time, and maybe ping us for progress update from time to time.

[focux]

Hey @kkafar, thanks for your response!

If I understand correctly, a preventDefault mechanism would allow blocking the navigation while still executing a custom action instead. Is the idea to call preventDefault inside the onTabChange callback (or something similar)?

Currently, my implementation uses a preventNavigation prop, but I still emit the onChange event with a { prevented: true } flag so an action can run when the tab is tapped. If I’m understanding you correctly, your proposed preventDefault approach would achieve the same result in a cleaner and more idiomatic way.

Let me know if I’ve got that right!

[kkafar]

We won't be able to make web-like API due to asynchronous nature of React Native event system. Most likely you'll need to specify beforehand whether you can navigate to given tab or not (prop controlled), and if navigation is prevented we'll emit an event to which you can react (do whatever). But there are few details we want to sort out with downstream maintainers (react-navigation & expo-router) before we start implementation here.

[focux]

Got it, that makes sense. Thanks for your input, and I’m looking forward to this feature!