feat: allow for hiding the tab bar

Author: okwasniewski

ios/Fabric/RCTTabViewComponentView.mm

@@ -142,19 +142,19 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   if (oldViewProps.inactiveTintColor != newViewProps.inactiveTintColor) {
     _tabViewProvider.inactiveTintColor = RCTUIColorFromSharedColor(newViewProps.inactiveTintColor);
   }
-  
+
   if (oldViewProps.hapticFeedbackEnabled != newViewProps.hapticFeedbackEnabled) {
     _tabViewProvider.hapticFeedbackEnabled = newViewProps.hapticFeedbackEnabled;
   }
-  
+
   if (oldViewProps.fontSize != newViewProps.fontSize) {
     _tabViewProvider.fontSize = [NSNumber numberWithInt:newViewProps.fontSize];
   }
-  
+
   if (oldViewProps.fontWeight != newViewProps.fontWeight) {
     _tabViewProvider.fontWeigth = RCTNSStringFromStringNilIfEmpty(newViewProps.fontWeight);
   }
-  
+
   if (oldViewProps.fontFamily != newViewProps.fontFamily) {
     _tabViewProvider.fontFamily = RCTNSStringFromStringNilIfEmpty(newViewProps.fontFamily);
   }
@@ -168,7 +168,8 @@ bool areTabItemsEqual(const RNCTabViewItemsStruct& lhs, const RNCTabViewItemsStr
   lhs.sfSymbol == rhs.sfSymbol &&
   lhs.badge == rhs.badge &&
   lhs.activeTintColor == rhs.activeTintColor &&
-  lhs.hidden == rhs.hidden;
+  lhs.hidden == rhs.hidden &&
+  lhs.tabBarHidden == rhs.tabBarHidden;
 }
 
 bool haveTabItemsChanged(const std::vector<RNCTabViewItemsStruct>& oldItems,
@@ -196,7 +197,8 @@ bool haveTabItemsChanged(const std::vector<RNCTabViewItemsStruct>& oldItems,
                                           badge:RCTNSStringFromStringNilIfEmpty(item.badge)
                                        sfSymbol:RCTNSStringFromStringNilIfEmpty(item.sfSymbol)
                                 activeTintColor:RCTUIColorFromSharedColor(item.activeTintColor)
-                                         hidden:item.hidden];
+                                         hidden:item.hidden
+                                   tabBarHidden:item.tabBarHidden];
 
     [result addObject:tabInfo];
   }

ios/TabViewImpl.swift

@@ -35,6 +35,12 @@ class TabViewProps: ObservableObject {
 
     return activeTintColor
   }
+  
+  var filteredItems: [TabInfo] {
+    items.filter({
+      !$0.hidden || $0.key == selectedPage
+    })
+  }
 }
 
 /**
@@ -68,10 +74,10 @@ struct TabViewImpl: View {
     }
 #if !os(tvOS)
     .onTabItemEvent({ index, isLongPress in
-      guard let key = props.items.filter({
-        !$0.hidden || $0.key == props.selectedPage
-      })[safe: index]?.key else { return }
-
+      let item = props.filteredItems[safe: index]
+      guard let key = item?.key else { return }
+     
+      
       if isLongPress {
         onLongPress(key)
         emitHapticFeedback(longPress: true)
@@ -86,6 +92,7 @@ struct TabViewImpl: View {
     })
     .onChange(of: tabBar) { newValue in
       updateTabBarAppearance(props: props, tabBar: tabBar)
+      hideTabBarIfNeeded()
     }
     .configureAppearance(props: props, tabBar: tabBar)
     .tintColor(props.selectedActiveTintColor)
@@ -100,6 +107,7 @@ struct TabViewImpl: View {
 #if os(tvOS)
       onSelect(newValue)
 #endif
+      hideTabBarIfNeeded()
     }
   }
 
@@ -152,6 +160,12 @@ struct TabViewImpl: View {
     }
 #endif
   }
+  
+  func hideTabBarIfNeeded() {
+    let item = props.filteredItems.first {$0.key == props.selectedPage}
+    let tabBarHidden = item?.tabBarHidden ?? false
+    tabBar?.isHidden = tabBarHidden
+  }
 }
 
 struct TabItem: View {

ios/TabViewProvider.swift

@@ -9,22 +9,25 @@ import React
   @objc public let sfSymbol: String
   @objc public let activeTintColor: UIColor?
   @objc public let hidden: Bool
-  
+  @objc public let tabBarHidden: Bool
+
   @objc
   public init(
     key: String,
     title: String,
     badge: String,
     sfSymbol: String,
     activeTintColor: UIColor?,
-    hidden: Bool
+    hidden: Bool,
+    tabBarHidden: Bool
   ) {
     self.key = key
     self.title = title
     self.badge = badge
     self.sfSymbol = sfSymbol
     self.activeTintColor = activeTintColor
     self.hidden = hidden
+    self.tabBarHidden = tabBarHidden
     super.init()
   }
 }
@@ -232,7 +235,8 @@ import React
             badge: itemDict["badge"] as? String ?? "",
             sfSymbol: itemDict["sfSymbol"] as? String ?? "",
             activeTintColor: RCTConvert.uiColor(itemDict["activeTintColor"] as? NSNumber),
-            hidden: itemDict["hidden"] as? Bool ?? false
+            hidden: itemDict["hidden"] as? Bool ?? false,
+            tabBarHidden: itemDict["tabBarHidden"] as? Bool ?? false
           )
         )
       }

src/TabView.tsx

@@ -223,6 +223,7 @@ const TabView = <Route extends BaseRoute>({
           badge: getBadge?.({ route }),
           activeTintColor: processColor(getActiveTintColor({ route })),
           hidden: getHidden?.({ route }),
+          tabBarHidden: route.tabBarHidden,
         };
       }),
     [

src/TabViewAdapter.android.tsx

@@ -3,10 +3,17 @@ import type { TabViewProps } from './TabViewNativeComponent';
 import { StyleSheet, View } from 'react-native';
 
 const TabViewAdapter = ({ children, style: _, ...props }: TabViewProps) => {
+  const hidesTabBar = props.items.find(
+    (item) => item.key === props.selectedPage
+  )?.tabBarHidden;
+
   return (
     <>
       <View style={styles.content}>{children}</View>
-      <NativeTabView {...props} />
+      <NativeTabView
+        {...props}
+        style={{ display: hidesTabBar ? 'none' : 'flex' }}
+      />
     </>
   );
 };

src/TabViewNativeComponent.ts

@@ -19,6 +19,7 @@ export type TabViewItems = ReadonlyArray<{
   badge?: string;
   activeTintColor?: ProcessedColorValue | null;
   hidden?: boolean;
+  tabBarHidden?: boolean;
 }>;
 
 export interface TabViewProps extends ViewProps {

src/types.ts

@@ -14,6 +14,7 @@ export type BaseRoute = {
   unfocusedIcon?: ImageSourcePropType | AppleIcon;
   activeTintColor?: string;
   hidden?: boolean;
+  tabBarHidden?: boolean;
 };
 
 export type NavigationState<Route extends BaseRoute> = {