feat!: remove ignoresTopSafeArea

Author: okwasniewski

.changeset/twelve-rules-study.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': minor
+---
+
+feat!: remove ignoresTopSafeArea prop, safe area handling is now automatic

apps/example/src/App.tsx

@@ -31,10 +31,6 @@ import NativeBottomTabsUnmounting from './Examples/NativeBottomTabsUnmounting';
 import NativeBottomTabsCustomTabBar from './Examples/NativeBottomTabsCustomTabBar';
 import NativeBottomTabsFreezeOnBlur from './Examples/NativeBottomTabsFreezeOnBlur';
 
-const FourTabsIgnoreSafeArea = () => {
-  return <FourTabs ignoresTopSafeArea />;
-};
-
 const HiddenTab = () => {
   return <FourTabs hideOneTab />;
 };
@@ -89,12 +85,6 @@ const examples = [
     name: 'Embedded stacks',
     screenOptions: { headerShown: false },
   },
-  {
-    component: FourTabsIgnoreSafeArea,
-    name: 'Four Tabs - No header',
-    platform: 'ios',
-    screenOptions: { headerShown: false },
-  },
   {
     component: FourTabsRippleColor,
     name: 'Four Tabs with ripple Color',

apps/example/src/Examples/FourTabs.tsx

@@ -7,7 +7,6 @@ import { Chat } from '../Screens/Chat';
 import type { ColorValue } from 'react-native';
 
 interface Props {
-  ignoresTopSafeArea?: boolean;
   disablePageAnimations?: boolean;
   scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
   backgroundColor?: ColorValue;
@@ -18,7 +17,6 @@ interface Props {
 }
 
 export default function FourTabs({
-  ignoresTopSafeArea = false,
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
   backgroundColor,
@@ -64,7 +62,6 @@ export default function FourTabs({
 
   return (
     <TabView
-      ignoresTopSafeArea={ignoresTopSafeArea}
       sidebarAdaptable
       disablePageAnimations={disablePageAnimations}
       scrollEdgeAppearance={scrollEdgeAppearance}

docs/docs/docs/guides/standalone-usage.md

@@ -118,11 +118,6 @@ A tab bar style that adapts to each platform:
 - macOS/tvOS: Sidebar
 - visionOS: Ornament with sidebar for secondary tabs
 
-#### `ignoresTopSafeArea` <Badge text="iOS" type="info" />
-
-Whether to ignore the top safe area.
-- Type: `boolean`
-
 #### `disablePageAnimations` <Badge text="iOS" type="info" />
 
 Whether to disable animations between tabs.

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -73,10 +73,6 @@ Optional unique ID for the navigator. This can be used with `navigation.getParen
 
 The name of the route to render on first load of the navigator.
 
-#### `ignoresTopSafeArea` <Badge text="iOS" type="info" />
-
-Whether to ignore the top safe area. Defaults to `true`.
-
 #### `screenOptions`
 
 Default options to use for the screens in the navigator.

docs/docs/docs/guides/usage-with-vector-icons.md

@@ -21,7 +21,7 @@ const Tabs = createNativeBottomTabNavigator();
 
 function NativeBottomTabs() {
   return (
-    <Tabs.Navigator ignoresTopSafeArea>
+    <Tabs.Navigator>
         <Tabs.Screen
           name="Home"
           component={HomeScreen}

packages/react-native-bottom-tabs/android/src/oldarch/RCTTabViewManager.kt

@@ -137,10 +137,6 @@ class RCTTabViewManager(context: ReactApplicationContext) : ViewGroupManager<Rea
   fun setSidebarAdaptable(view: ReactBottomNavigationView, flag: Boolean) {
   }
 
-  @ReactProp(name = "ignoresTopSafeArea")
-  fun setIgnoresTopSafeArea(view: ReactBottomNavigationView, flag: Boolean) {
-  }
-
   @ReactProp(name = "hapticFeedbackEnabled")
   fun setHapticFeedbackEnabled(view: ReactBottomNavigationView, value: Boolean) {
       tabViewImpl.setHapticFeedbackEnabled(view, value)

packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm

@@ -119,10 +119,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _tabViewProvider.labeled = newViewProps.labeled;
   }
 
-  if (oldViewProps.ignoresTopSafeArea != newViewProps.ignoresTopSafeArea) {
-    _tabViewProvider.ignoresTopSafeArea = newViewProps.ignoresTopSafeArea;
-  }
-
   if (oldViewProps.selectedPage != newViewProps.selectedPage) {
     _tabViewProvider.selectedPage = RCTNSStringFromString(newViewProps.selectedPage);
   }
@@ -162,7 +158,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   if (oldViewProps.fontFamily != newViewProps.fontFamily) {
     _tabViewProvider.fontFamily = RCTNSStringFromStringNilIfEmpty(newViewProps.fontFamily);
   }
-  
+
   if (oldViewProps.tabBarHidden != newViewProps.tabBarHidden) {
     _tabViewProvider.tabBarHidden = newViewProps.tabBarHidden;
   }

packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm

@@ -32,7 +32,6 @@ @implementation RCTTabView
 RCT_EXPORT_VIEW_PROPERTY(icons, NSArray<RCTImageSource *>);
 RCT_EXPORT_VIEW_PROPERTY(sidebarAdaptable, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(labeled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(ignoresTopSafeArea, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(disablePageAnimations, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(scrollEdgeAppearance, NSString)
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)

packages/react-native-bottom-tabs/ios/TabViewImpl.swift

@@ -86,9 +86,7 @@ struct TabViewImpl: View {
       let icon = props.icons[index]
 
       RepresentableView(view: child)
-        .ignoresTopSafeArea(
-          props.ignoresTopSafeArea
-        )
+        .ignoresSafeArea(.all, edges: .all)
         .tabItem {
           TabItem(
             title: tabData?.title,
@@ -290,19 +288,6 @@ extension View {
     }
   }
 
-  @ViewBuilder
-  func ignoresTopSafeArea(
-    _ flag: Bool
-  ) -> some View {
-    if flag {
-      self
-        .ignoresSafeArea(.container, edges: .all)
-    } else {
-      self
-        .ignoresSafeArea(.container, edges: .bottom)
-    }
-  }
-
 #if !os(macOS)
   @ViewBuilder
   func configureAppearance(props: TabViewProps, tabBar: UITabBar?) -> some View {

packages/react-native-bottom-tabs/ios/TabViewProps.swift

@@ -15,7 +15,6 @@ class TabViewProps: ObservableObject {
   @Published var activeTintColor: PlatformColor?
   @Published var inactiveTintColor: PlatformColor?
   @Published var translucent: Bool = true
-  @Published var ignoresTopSafeArea: Bool = true
   @Published var disablePageAnimations: Bool = false
   @Published var hapticFeedbackEnabled: Bool = false
   @Published var fontSize: Int?

packages/react-native-bottom-tabs/ios/TabViewProvider.swift

@@ -85,12 +85,6 @@ public final class TabInfo: NSObject {
     }
   }
 
-  @objc public var ignoresTopSafeArea: Bool = true {
-    didSet {
-      props.ignoresTopSafeArea = ignoresTopSafeArea
-    }
-  }
-
   @objc public var selectedPage: NSString? {
     didSet {
       props.selectedPage = selectedPage as? String
@@ -156,7 +150,7 @@ public final class TabInfo: NSObject {
       props.fontSize = fontSize as? Int
     }
   }
-  
+
   @objc public var tabBarHidden: Bool = false {
     didSet {
       props.tabBarHidden = tabBarHidden

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -36,10 +36,6 @@ interface Props<Route extends BaseRoute> {
    * - visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`.
    */
   sidebarAdaptable?: boolean;
-  /**
-   * Whether to ignore the top safe area. (iOS only)
-   */
-  ignoresTopSafeArea?: boolean;
   /**
    * Whether to disable page animations between tabs. (iOS only) Defaults to `false`.
    */

packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts

@@ -49,7 +49,6 @@ export interface TabViewProps extends ViewProps {
   rippleColor?: ColorValue;
   activeTintColor?: ColorValue;
   inactiveTintColor?: ColorValue;
-  ignoresTopSafeArea?: WithDefault<boolean, true>;
   disablePageAnimations?: boolean;
   activeIndicatorColor?: ColorValue;
   hapticFeedbackEnabled?: boolean;