diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm index 2c1194bd..7691fddf 100644 --- a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm +++ b/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) diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift index 63da9f9b..d5752d2e 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift +++ b/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`(_ 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 + } + } } diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift index d5426bd6..91333750 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/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? diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index 707a240e..acafd553 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/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 diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 570b1631..420e6e3e 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -148,6 +148,10 @@ interface Props { */ 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 = ({ onIndexChange(index); }); + console.log('TabView.tsx: ignoresTopSafeArea', JSON.stringify(props)); return ( ; + ignoresKeyboardSafeArea?: WithDefault; disablePageAnimations?: boolean; activeIndicatorColor?: ColorValue; hapticFeedbackEnabled?: boolean;