diff --git a/.changeset/twelve-rules-study.md b/.changeset/twelve-rules-study.md new file mode 100644 index 00000000..3a37b249 --- /dev/null +++ b/.changeset/twelve-rules-study.md @@ -0,0 +1,5 @@ +--- +'react-native-bottom-tabs': minor +--- + +feat!: remove ignoresTopSafeArea prop, safe area handling is now automatic diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index 100b97e4..49227429 100644 --- a/apps/example/src/App.tsx +++ b/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 ; -}; - const HiddenTab = () => { return ; }; @@ -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', diff --git a/apps/example/src/Examples/FourTabs.tsx b/apps/example/src/Examples/FourTabs.tsx index 6c2fc4f8..44802668 100644 --- a/apps/example/src/Examples/FourTabs.tsx +++ b/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 ( - -Whether to ignore the top safe area. -- Type: `boolean` - #### `disablePageAnimations` Whether to disable animations between tabs. diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index c9907d48..4c92ce3d 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/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` - -Whether to ignore the top safe area. Defaults to `true`. - #### `screenOptions` Default options to use for the screens in the navigator. diff --git a/docs/docs/docs/guides/usage-with-vector-icons.md b/docs/docs/docs/guides/usage-with-vector-icons.md index 86e5168f..0f427351 100644 --- a/docs/docs/docs/guides/usage-with-vector-icons.md +++ b/docs/docs/docs/guides/usage-with-vector-icons.md @@ -21,7 +21,7 @@ const Tabs = createNativeBottomTabNavigator(); function NativeBottomTabs() { return ( - + Void) -> some View { @@ -97,7 +97,7 @@ extension View { onLayout(geometry.size) } } - .ignoresSafeArea(.all, edges: .vertical) + .ignoresSafeArea(.all, edges: .all) ) } } diff --git a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm index 7d55de42..feed7a9d 100644 --- a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm +++ b/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; } diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm index cbf3f1ad..e9dc2d6f 100644 --- a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm +++ b/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm @@ -32,7 +32,6 @@ @implementation RCTTabView RCT_EXPORT_VIEW_PROPERTY(icons, NSArray); 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) diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift index ae504576..9cc1b10c 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift +++ b/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(.container, edges: .all) .tabItem { TabItem( title: tabData?.title, @@ -134,7 +132,7 @@ struct TabViewImpl: View { #if !os(macOS) private func updateTabBarAppearance(props: TabViewProps, tabBar: UITabBar?) { guard let tabBar else { return } - + tabBar.isHidden = props.tabBarHidden if props.scrollEdgeAppearance == "transparent" { @@ -290,19 +288,6 @@ extension View { } } - @ViewBuilder - func ignoresTopSafeArea( - _ flag: Bool - ) -> some View { - if flag { - self - .ignoresSafeArea(.container, edges: .vertical) - } else { - self - .ignoresSafeArea(.container, edges: .bottom) - } - } - #if !os(macOS) @ViewBuilder func configureAppearance(props: TabViewProps, tabBar: UITabBar?) -> some View { @@ -350,7 +335,7 @@ extension View { self } } - + @ViewBuilder func hideTabBar(_ flag: Bool) -> some View { #if !os(macOS) diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift index cb01acec..f38ee90b 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/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? diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index 48647c13..add46dfe 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/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 diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 616f0ac9..8863c792 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -36,10 +36,6 @@ interface Props { * - 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`. */ diff --git a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts index 1a9da486..1a7224d8 100644 --- a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts +++ b/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; disablePageAnimations?: boolean; activeIndicatorColor?: ColorValue; hapticFeedbackEnabled?: boolean;