Disabling a specific tab in expo-router/unstable-native-tabs
A
Andrew
Summary
Currently, expo-router/unstable-native-tabs (experimental) does not provide a built-in way to disable a specific tab. I am proposing a new prop (e.g., disabled) for the Tabs.Screen component that would make a tab non-interactive while keeping it visible in the tab bar.
Problem Statement
In many real-world applications, certain tabs need to be visible but inaccessible based on the user's state (e.g., a "Premium" feature tab that is locked, or a "Drafts" tab that is empty).
Currently, there is no straightforward way to:
- Prevent the user from switching to a specific tab;
- Intercept the press event on a native tab to show a custom message (like an alert) instead of navigating.
Using a custom tab bar is a workaround, but it defeats the purpose of using native tabs for that fluid, platform-authentic feel.
Proposed Solution
I suggest adding a disabled property to the options object of Tabs.Screen.
Example Usage:
<NativeTabs.Trigger
name="benefits"
disableScrollToTop
disabled={!isBenefitsAvailable} // <- New Prop
>
{!isBenefitsAvailable && <NativeTabs.Trigger.Badge>Soon</NativeTabs.Trigger.Badge>}
<NativeTabs.Trigger.Label>{t`Benefits`}</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon
src={<VectorIcon family={FontFamily} name="heart-handshake" />}
/>
</NativeTabs.Trigger>
Expected Behavior:
• Visuals: The tab remains visible. Ideally, its opacity could be reduced automatically, or the developer could handle styling via tabBarIcon;
• Interaction: Tapping the tab does nothing (no haptic feedback, no screen switch);
• Optional: An onDisabledPress callback would be even better, allowing developers to trigger a "Subscription required" logic.
Core Implementation Thoughts
Since this uses native navigation:
• iOS: Should probably map to UITabBarItem.isEnabled = false;
• Android: Should handle interaction via MenuItem.setEnabled(false) or by intercepting the OnItemSelectedListener.
Photo Viewer
View photos in a modal