From 462f613da049368720860674b5f181bfafe7694d Mon Sep 17 00:00:00 2001 From: Yarchik Date: Fri, 29 May 2026 23:54:04 +0100 Subject: [PATCH 1/5] fix(TabView): respect user-supplied tabBarHidden The native side wired tabBarHidden into the SwiftUI tab bar via #76, but the JS wrapper hardcoded tabBarHidden={!!renderCustomTabBar} after the {...props} spread, so any value the caller passed was overwritten before it reached NativeTabView. The prop was also absent from the TabView Props interface so it never type-checked at all. Add tabBarHidden to Props, destructure it explicitly, and keep the renderCustomTabBar default only as a fallback when the caller does not supply a value. Closes #521 --- .changeset/respect-user-tab-bar-hidden.md | 5 +++++ packages/react-native-bottom-tabs/src/TabView.tsx | 11 ++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/respect-user-tab-bar-hidden.md diff --git a/.changeset/respect-user-tab-bar-hidden.md b/.changeset/respect-user-tab-bar-hidden.md new file mode 100644 index 00000000..e20781f0 --- /dev/null +++ b/.changeset/respect-user-tab-bar-hidden.md @@ -0,0 +1,5 @@ +--- +'react-native-bottom-tabs': patch +--- + +Respect user-supplied `tabBarHidden` on `TabView`. The prop was wired natively but the JS wrapper hardcoded `tabBarHidden={!!renderCustomTabBar}` after the `{...props}` spread, so any user value was silently overwritten. The prop is now declared on the public `TabView` API and only falls back to the custom-tab-bar default when the caller omits it, which lets iOS 26+ users hide the SwiftUI-backed tab bar from JS again. diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 4e93f090..c968add6 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -212,6 +212,14 @@ interface Props { * @default 'locale' */ layoutDirection?: LayoutDirection; + /** + * Whether to hide the native tab bar. Defaults to `true` when a custom + * `tabBar` is provided (so the native bar does not stack on top of the + * custom one), otherwise `false`. Set explicitly to override the default, + * which is required on iOS 26+ where `UITabBar.isHidden` workarounds from + * outside React Native no longer reach the SwiftUI-backed tab bar. + */ + tabBarHidden?: boolean; } const ANDROID_MAX_TABS = 100; @@ -247,6 +255,7 @@ const TabView = ({ labeled = Platform.OS !== 'android' ? true : undefined, getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur, tabBar: renderCustomTabBar, + tabBarHidden, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, @@ -404,7 +413,7 @@ const TabView = ({ // When rendering a custom tab bar, icons can be React elements, which will not be properly resolved. icons={renderCustomTabBar ? undefined : resolvedIconAssets} selectedPage={focusedKey} - tabBarHidden={!!renderCustomTabBar} + tabBarHidden={tabBarHidden ?? !!renderCustomTabBar} onTabLongPress={handleTabLongPress} onPageSelected={handlePageSelected} onTabBarMeasured={handleTabBarMeasured} From 8d4517140d754807e6840150e025d7cbeb9ccc58 Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Wed, 10 Jun 2026 09:16:09 +0100 Subject: [PATCH 2/5] chore: address PR comments --- .changeset/respect-user-tab-bar-hidden.md | 2 +- packages/react-native-bottom-tabs/src/TabView.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/.changeset/respect-user-tab-bar-hidden.md b/.changeset/respect-user-tab-bar-hidden.md index e20781f0..a7fef8c2 100644 --- a/.changeset/respect-user-tab-bar-hidden.md +++ b/.changeset/respect-user-tab-bar-hidden.md @@ -2,4 +2,4 @@ 'react-native-bottom-tabs': patch --- -Respect user-supplied `tabBarHidden` on `TabView`. The prop was wired natively but the JS wrapper hardcoded `tabBarHidden={!!renderCustomTabBar}` after the `{...props}` spread, so any user value was silently overwritten. The prop is now declared on the public `TabView` API and only falls back to the custom-tab-bar default when the caller omits it, which lets iOS 26+ users hide the SwiftUI-backed tab bar from JS again. +Respect user-supplied `tabBarHidden` on `TabView`. diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index c968add6..b2bb3fbb 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -213,11 +213,7 @@ interface Props { */ layoutDirection?: LayoutDirection; /** - * Whether to hide the native tab bar. Defaults to `true` when a custom - * `tabBar` is provided (so the native bar does not stack on top of the - * custom one), otherwise `false`. Set explicitly to override the default, - * which is required on iOS 26+ where `UITabBar.isHidden` workarounds from - * outside React Native no longer reach the SwiftUI-backed tab bar. + * Whether to hide the native tab bar. */ tabBarHidden?: boolean; } @@ -255,7 +251,7 @@ const TabView = ({ labeled = Platform.OS !== 'android' ? true : undefined, getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur, tabBar: renderCustomTabBar, - tabBarHidden, + tabBarHidden = false, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, From ed4e467bc5255297044d8e13832de57791491411 Mon Sep 17 00:00:00 2001 From: Thiago Brezinski Date: Wed, 10 Jun 2026 09:59:02 +0100 Subject: [PATCH 3/5] chore: add tabBarHidden examples --- apps/example/src/App.tsx | 10 ++ .../Examples/NativeBottomTabsTabBarHidden.tsx | 93 +++++++++++++++++++ apps/example/src/Examples/TabBarHidden.tsx | 81 ++++++++++++++++ 3 files changed, 184 insertions(+) create mode 100644 apps/example/src/Examples/NativeBottomTabsTabBarHidden.tsx create mode 100644 apps/example/src/Examples/TabBarHidden.tsx diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index d789517d..09b13131 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -38,6 +38,8 @@ import NativeBottomTabsFreezeOnBlur from './Examples/NativeBottomTabsFreezeOnBlu import NativeBottomTabsScreenLayout from './Examples/NativeBottomTabsScreenLayout'; import NativeBottomTabsLazy from './Examples/NativeBottomTabsLazy'; import BottomAccessoryView from './Examples/BottomAccessoryView'; +import TabBarHidden from './Examples/TabBarHidden'; +import NativeBottomTabsTabBarHidden from './Examples/NativeBottomTabsTabBarHidden'; import { useLogger } from '@react-navigation/devtools'; import LazyTabs from './Examples/LazyTabs'; import { LogBox } from 'react-native'; @@ -103,6 +105,10 @@ const examples = [ screenOptions: { headerShown: false }, }, { component: LazyTabs, name: 'Lazy Tabs' }, + { + component: TabBarHidden, + name: 'Tab Bar Hidden', + }, { component: FourTabsRippleColor, name: 'Four Tabs with ripple Color', @@ -167,6 +173,10 @@ const examples = [ component: NativeBottomTabsLazy, name: 'Native Bottom Tabs with Lazy', }, + { + component: NativeBottomTabsTabBarHidden, + name: 'Native Bottom Tabs with tabBarHidden', + }, { component: NativeBottomTabs, name: 'Native Bottom Tabs' }, { component: JSBottomTabs, name: 'JS Bottom Tabs' }, { diff --git a/apps/example/src/Examples/NativeBottomTabsTabBarHidden.tsx b/apps/example/src/Examples/NativeBottomTabsTabBarHidden.tsx new file mode 100644 index 00000000..7a09a446 --- /dev/null +++ b/apps/example/src/Examples/NativeBottomTabsTabBarHidden.tsx @@ -0,0 +1,93 @@ +import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'; +import { useState } from 'react'; +import { Button, StyleSheet, Text, View } from 'react-native'; + +const Tab = createNativeBottomTabNavigator(); + +type TabBarHiddenScreenProps = { + title: string; + tabBarHidden: boolean; + onToggleTabBarHidden: () => void; +}; + +function TabBarHiddenScreen({ + title, + tabBarHidden, + onToggleTabBarHidden, +}: TabBarHiddenScreenProps) { + return ( + + {title} +