fix: change ignoresTopSafeArea to true in order to match JS Tabs

Author: okwasniewski

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

@@ -35,7 +35,7 @@ function SettingsScreen() {
 export default function App() {
   return (
     <NavigationContainer>
-      <Tab.Navigator ignoresTopSafeArea>
+      <Tab.Navigator>
         <Tab.Screen
           name="Home"
           component={HomeScreen}
@@ -70,7 +70,7 @@ 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.
+Whether to ignore the top safe area. Defaults to `true`.
 
 #### `screenOptions`
 

example/src/Examples/NativeBottomTabsEmbeddedStacks.tsx

@@ -67,7 +67,7 @@ function ChatStackScreen() {
 
 function NativeBottomTabsEmbeddedStacks() {
   return (
-    <Tab.Navigator ignoresTopSafeArea>
+    <Tab.Navigator>
       <Tab.Screen
         name="Article"
         component={ArticleStackScreen}

ios/TabViewImpl.swift

@@ -12,22 +12,22 @@ class TabViewProps: ObservableObject {
   @Published var icons: [Int: UIImage] = [:]
   @Published var sidebarAdaptable: Bool?
   @Published var labeled: Bool?
-  @Published var ignoresTopSafeArea: Bool?
-  @Published var disablePageAnimations: Bool = false
   @Published var scrollEdgeAppearance: String?
-  @Published var translucent: Bool = true
   @Published var barTintColor: UIColor?
   @Published var activeTintColor: UIColor?
   @Published var inactiveTintColor: UIColor?
+  @Published var translucent: Bool = true
+  @Published var ignoresTopSafeArea: Bool = true
+  @Published var disablePageAnimations: Bool = false
   @Published var hapticFeedbackEnabled: Bool = true
-  
+
   var selectedActiveTintColor: UIColor? {
     if let selectedPage = selectedPage,
        let tabData = items.findByKey(selectedPage),
        let activeTintColor = tabData.activeTintColor {
       return activeTintColor
     }
-    
+
     return activeTintColor
   }
 }
@@ -37,11 +37,11 @@ class TabViewProps: ObservableObject {
  */
 struct RepresentableView: UIViewRepresentable {
   var view: UIView
-  
+
   func makeUIView(context: Context) -> UIView {
     return view
   }
-  
+
   func updateUIView(_ uiView: UIView, context: Context) {}
 }
 
@@ -52,17 +52,17 @@ struct TabViewImpl: View {
   @ObservedObject var props: TabViewProps
   var onSelect: (_ key: String) -> Void
   var onLongPress: (_ key: String) -> Void
-  
+
   var body: some View {
     TabView(selection: $props.selectedPage) {
       ForEach(props.children.indices, id: \.self) { index in
         let child = props.children[safe: index] ?? UIView()
         let tabData = props.items[safe: index]
         let icon = props.icons[index]
-        
+
         RepresentableView(view: child)
           .ignoresTopSafeArea(
-            props.ignoresTopSafeArea ?? false,
+            props.ignoresTopSafeArea,
             frame: child.frame
           )
           .tabItem {
@@ -89,7 +89,7 @@ struct TabViewImpl: View {
           }
 #endif
       }
-      
+
     }
     .onTabItemEvent({ index, isLongPress in
       if let key = props.items[safe: index]?.key {
@@ -114,13 +114,13 @@ struct TabViewImpl: View {
       }
     }
   }
-  
+
   func emitHapticFeedback(longPress: Bool = false) {
 #if os(iOS)
     if !props.hapticFeedbackEnabled {
       return
     }
-    
+
     if longPress {
       UINotificationFeedbackGenerator().notificationOccurred(.success)
     } else {
@@ -135,16 +135,16 @@ private func configureAppearance(for appearanceType: String, appearance: UITabBa
   if (appearanceType == "transparent") {
     return appearance
   }
-  
+
   switch appearanceType {
   case "opaque":
     appearance.configureWithOpaqueBackground()
   default:
     appearance.configureWithDefaultBackground()
   }
-  
+
   UITabBar.appearance().scrollEdgeAppearance = appearance
-  
+
   return appearance
 }
 
@@ -160,7 +160,7 @@ private func configureAppearance(inactiveTint inactiveTintColor: UIColor?, appea
     setTabBarItemColors(appearance.inlineLayoutAppearance, inactiveColor: inactiveTintColor)
     setTabBarItemColors(appearance.compactInlineLayoutAppearance, inactiveColor: inactiveTintColor)
   }
-  
+
   return appearance
 }
 
@@ -170,23 +170,23 @@ private func updateTabBarAppearance(props: TabViewProps) {
     inactiveTint: props.inactiveTintColor,
     appearance: appearance
   )
-  
-  
+
+
   if #available(iOS 15.0, *) {
     appearance = configureAppearance(for: props.scrollEdgeAppearance ?? "", appearance: appearance)
-    
+
     if props.translucent == false {
       appearance.configureWithOpaqueBackground()
     }
-    
+
     if props.barTintColor != nil {
       appearance.backgroundColor = props.barTintColor
     }
   } else {
     UITabBar.appearance().barTintColor = props.barTintColor
     UITabBar.appearance().isTranslucent = props.translucent
   }
-  
+
   UITabBar.appearance().standardAppearance = appearance
 }
 
@@ -195,7 +195,7 @@ struct TabItem: View {
   var icon: UIImage?
   var sfSymbol: String?
   var labeled: Bool?
-  
+
   var body: some View {
     if let icon {
       Image(uiImage: icon)
@@ -224,7 +224,7 @@ extension View {
       self
     }
   }
-  
+
   @ViewBuilder
   func tabBadge(_ data: String?) -> some View {
     if #available(iOS 15.0, macOS 15.0, visionOS 2.0, tvOS 15.0, *) {
@@ -241,7 +241,7 @@ extension View {
       self
     }
   }
-  
+
   @ViewBuilder
   func ignoresTopSafeArea(
     _ flag: Bool,
@@ -258,7 +258,7 @@ extension View {
         .frame(idealWidth: frame.width, idealHeight: frame.height)
     }
   }
-  
+
   @ViewBuilder
   func configureAppearance(props: TabViewProps) -> some View {
     self
@@ -281,7 +281,7 @@ extension View {
         updateTabBarAppearance(props: props)
       }
   }
-  
+
   @ViewBuilder
   func tintColor(_ color: UIColor?) -> some View {
     if let color {
@@ -295,7 +295,7 @@ extension View {
       self
     }
   }
-  
+
   // Allows TabView to use unfilled SFSymbols.
   // By default they are always filled.
   @ViewBuilder