feat: add new prop to TabView for better keyboard handling

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

@@ -33,6 +33,7 @@ @implementation RCTTabView
 RCT_EXPORT_VIEW_PROPERTY(sidebarAdaptable, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(labeled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(ignoresTopSafeArea, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(ignoresBottomSafeArea, 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

@@ -28,6 +28,7 @@ struct TabViewImpl: View {
       .measureView(onLayout: { size in
         onLayout(size)
       })
+      .ignoresKeyboardSafeArea(props.ignoresKeyboardSafeArea)
     }
 #if !os(tvOS) && !os(macOS) && !os(visionOS)
     .onTabItemEvent({ index, isLongPress in
@@ -357,4 +358,22 @@ extension View {
       self
     }
   }
+
+  @ViewBuilder
+  func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
+    if condition {
+      transform(self)
+    } else {
+      self
+    }
+  }
+
+  @ViewBuilder
+  func ignoresKeyboardSafeArea(_ flag: Bool) -> some View {
+    if flag {
+      self.ignoresSafeArea(.keyboard, edges: .bottom)
+    } else {
+      self
+    }
+  }
 }

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

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

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

@@ -156,6 +156,12 @@ public final class TabInfo: NSObject {
       props.fontSize = fontSize as? Int
     }
   }
+
+  @objc public var ignoresKeyboardSafeArea: Bool = false {
+        didSet {
+            props.ignoresKeyboardSafeArea = ignoresKeyboardSafeArea
+        }
+  }
 
   // New arch specific properties
 

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

@@ -148,6 +148,10 @@ interface Props<Route extends BaseRoute> {
      */
     fontSize?: number;
   };
+  /**
+   * Whether to ignore the bottom safe area when keyboard is shown. (iOS only) Defaults to `false`.
+   */
+  ignoresKeyboardSafeArea?: boolean;
 }
 
 const ANDROID_MAX_TABS = 6;
@@ -268,6 +272,7 @@ const TabView = <Route extends BaseRoute>({
     onIndexChange(index);
   });
 
+  console.log('TabView.tsx: ignoresTopSafeArea', JSON.stringify(props));
   return (
     <BottomTabBarHeightContext.Provider value={tabBarHeight}>
       <NativeTabView

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

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