@jobber/components-native 0.98.5 → 0.100.0

package/dist/types/src/AtlantisOverlayProvider/AtlantisOverlayProvider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface AtlantisOverlayProviderProps {
+    readonly children: React.ReactNode;
+}
+export declare function AtlantisOverlayProvider({ children, }: AtlantisOverlayProviderProps): React.JSX.Element;
+export {};

package/dist/types/src/AtlantisOverlayProvider/index.d.ts

@@ -0,0 +1 @@
+export { AtlantisOverlayProvider } from "./AtlantisOverlayProvider";

package/dist/types/src/BottomSheet/hooks/useBottomSheetBackHandler.d.ts

@@ -1,8 +1,8 @@
-import type BottomSheet from "@gorhom/bottom-sheet";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 /**
- * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * Hook that dismisses the bottom sheet modal on the hardware back button press if it is visible
  * @param bottomSheetRef ref to the bottom sheet component
  */
-export declare function useBottomSheetBackHandler(bottomSheetRef: React.RefObject<BottomSheet | null>): {
+export declare function useBottomSheetBackHandler(bottomSheetRef: React.RefObject<BottomSheetModal | null>): {
     handleSheetPositionChange: (index: number) => void;
 };

package/dist/types/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.d.ts

@@ -0,0 +1,11 @@
+import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
+import { type BottomSheetScrollViewMethods } from "@gorhom/bottom-sheet";
+declare const BottomSheetKeyboardAwareScrollView: import("react").NamedExoticComponent<{
+    bottomOffset?: number;
+    disableScrollOnKeyboardHide?: boolean;
+    enabled?: boolean;
+    extraKeyboardSpace?: number;
+    ScrollViewComponent?: React.ComponentType<import("react-native").ScrollViewProps>;
+} & import("react-native").ScrollViewProps & import("react").RefAttributes<BottomSheetScrollViewMethods>>;
+export { BottomSheetKeyboardAwareScrollView };
+export type { KeyboardAwareScrollViewProps };

package/dist/types/src/ContentOverlay/ContentOverlay.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
-import type { Modalize } from "react-native-modalize";
 import type { ContentOverlayProps } from "./types";
-export declare const ContentOverlay: React.ForwardRefExoticComponent<ContentOverlayProps & React.RefAttributes<{
-    open?: Modalize["open"];
-    close?: Modalize["close"];
-} | undefined>>;
+export declare function useIsKeyboardHandledByScrollView(): boolean;
+export declare function ContentOverlay({ children, title, accessibilityLabel, fullScreen, showDismiss, isDraggable, adjustToContentHeight, keyboardShouldPersistTaps, scrollEnabled, modalBackgroundColor, onClose, onOpen, onBeforeExit, loading, ref, }: ContentOverlayProps): React.JSX.Element;

package/dist/types/src/ContentOverlay/ContentOverlay.style.d.ts

@@ -1,32 +1,33 @@
 export declare const useStyles: () => {
+    handleWrapper: {
+        paddingBottom: number;
+        paddingTop: number;
+    };
     handle: {
         width: number;
         height: number;
         backgroundColor: string;
-        top: number;
         borderRadius: number;
     };
-    overlay: {
+    backdrop: {
         backgroundColor: string;
     };
-    modal: {
+    background: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
-    modalForLargeScreens: {
-        width: number;
-        alignSelf: "center";
-    };
     header: {
         flexDirection: "row";
-        backgroundColor: string;
-        paddingTop: number;
         zIndex: number;
+        minHeight: number;
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
-        minHeight: number;
     };
     headerShadow: {
+        position: "absolute";
+        top: number;
+        height: number;
+        width: "100%";
         shadowColor: string;
         shadowOffset: {
             width: number;

package/dist/types/src/ContentOverlay/computeContentOverlayBehavior.d.ts

@@ -0,0 +1,32 @@
+export interface ContentOverlayConfig {
+    fullScreen: boolean;
+    adjustToContentHeight: boolean;
+    isDraggable: boolean;
+    hasOnBeforeExit: boolean;
+    showDismiss: boolean;
+}
+export interface ContentOverlayState {
+    isScreenReaderEnabled: boolean;
+    position: number;
+}
+export type InitialHeight = "fullScreen" | "contentHeight";
+export interface ContentOverlayBehavior {
+    initialHeight: InitialHeight;
+    isDraggable: boolean;
+    showDismiss: boolean;
+}
+/**
+ * Computes the abstract behavior of ContentOverlay from its props and state.
+ *
+ * This pure function documents and centralizes the complex logic that determines:
+ * - Initial height mode (fullScreen vs contentHeight)
+ * - Whether the overlay is draggable
+ * - Whether the dismiss button should be shown
+ *
+ * The logic accounts for legacy behavior where:
+ * - `onBeforeExit` silently overrides `isDraggable` to false
+ * - Default props (neither fullScreen nor adjustToContentHeight) are treated
+ *   as contentHeight for the new implementation
+ * - Dismiss button visibility depends on multiple factors including position state
+ */
+export declare function computeContentOverlayBehavior(config: ContentOverlayConfig, state: ContentOverlayState): ContentOverlayBehavior;

package/dist/types/src/ContentOverlay/constants.d.ts

@@ -0,0 +1 @@
+export declare const KEYBOARD_TOP_PADDING_AUTO_SCROLL = 20;

package/dist/types/src/ContentOverlay/hooks/useBottomSheetModalBackHandler.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook that dismisses the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetModalRef ref to the bottom sheet modal component
+ */
+export declare function useBottomSheetModalBackHandler(onCloseController: () => void): {
+    handleSheetPositionChange: (index: number) => void;
+};

package/dist/types/src/ContentOverlay/index.d.ts

@@ -1,2 +1,2 @@
-export { ContentOverlay } from "./ContentOverlay";
+export { ContentOverlay, useIsKeyboardHandledByScrollView, } from "./ContentOverlay";
 export type { ContentOverlayRef, ModalBackgroundColor } from "./types";

package/dist/types/src/ContentOverlay/types.d.ts

@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import type { Modalize } from "react-native-modalize";
+import type { ReactNode, Ref } from "react";
 export interface ContentOverlayProps {
     /**
      * Content to be passed into the overlay
@@ -64,24 +63,18 @@ export interface ContentOverlayProps {
      * Callback that is called between overlay is closed and when the "x" button is pressed
      */
     readonly onBeforeExit?: () => void;
-    /**
-     * Define the behavior of the keyboard when having inputs inside the modal.
-     * @default padding
-     */
-    readonly keyboardAvoidingBehavior?: "height" | "padding" | "position";
     /**
      * Boolean to show a disabled state
      * @default false
      */
     readonly loading?: boolean;
     /**
-     * Define keyboard's Android behavior like iOS's one.
-     * @default Platform.select({ ios: true, android: false })
+     * Ref to the content overlay component.
      */
-    readonly avoidKeyboardLikeIOS?: boolean;
+    readonly ref?: Ref<ContentOverlayRef>;
 }
 export type ModalBackgroundColor = "surface" | "background";
 export type ContentOverlayRef = {
-    open?: Modalize["open"];
-    close?: Modalize["close"];
+    open?: () => void;
+    close?: () => void;
 } | undefined;

package/dist/types/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisOverlayProvider";
 export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";

package/jestSetup.js

@@ -16,6 +16,8 @@ jest.mock("./dist/src/Button/components/InternalButtonLoading", () => {
   };
 });
 
+// NOTE: this is the old way we used to mock reanimated. We actually do not need to mock it anymore.
+// To ensure correct test behaviour, please add `jest.unmock("react-native-reanimated")` to your test suite.
 jest.mock("react-native-reanimated", () => {
   const reanimated = require("react-native-reanimated/mock");
   const timing = () => ({ start: () => undefined });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.98.5",
+  "version": "0.100.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -46,8 +46,6 @@
     "react-hook-form": "^7.52.0",
     "react-intl": "^7.1.11",
     "react-native-keyboard-controller": "^1.20.7",
-    "react-native-modalize": "^2.0.13",
-    "react-native-portalize": "^1.0.7",
     "react-native-toast-message": "^2.1.6",
     "react-native-uuid": "^1.4.9",
     "ts-xor": "^1.1.0"
@@ -69,6 +67,7 @@
     "date-fns-tz": "^2.0.0",
     "react-native": "^0.82.1",
     "react-native-gesture-handler": "^2.29.1",
+    "react-native-keyboard-controller": "^1.12.0",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "^3.7.1",
     "react-native-safe-area-context": "^5.4.0",
@@ -90,11 +89,9 @@
     "react-native-gesture-handler": ">=2.22.0",
     "react-native-keyboard-controller": "^1.20.7",
     "react-native-modal-datetime-picker": " >=13.0.0",
-    "react-native-modalize": "^2.0.13",
-    "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "60dbce9880c63f02f43d8b3f1f5ef9090dba32e3"
+  "gitHead": "2ef76c22620e1627eca8cf576b35e78228262574"
 }

package/src/AtlantisOverlayProvider/AtlantisOverlayProvider.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+
+interface AtlantisOverlayProviderProps {
+  readonly children: React.ReactNode;
+}
+
+export function AtlantisOverlayProvider({
+  children,
+}: AtlantisOverlayProviderProps) {
+  return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
+}

package/src/AtlantisOverlayProvider/index.ts

@@ -0,0 +1 @@
+export { AtlantisOverlayProvider } from "./AtlantisOverlayProvider";

package/src/BottomSheet/BottomSheet.tsx

@@ -2,8 +2,9 @@ import type { ReactNode } from "react";
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import RNBottomSheet, {
+import {
   BottomSheetBackdrop,
+  BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
@@ -67,13 +68,14 @@ export function BottomSheet({
   const { t } = useAtlantisI18n();
   const insets = useSafeAreaInsets();
   const previousIndexRef = useRef(-1);
-  const bottomSheetRef = useRef<RNBottomSheet>(null);
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
   const { handleSheetPositionChange } =
     useBottomSheetBackHandler(bottomSheetRef);
 
   useImperativeHandle(ref, () => ({
     open: () => {
-      bottomSheetRef.current?.expand();
+      dismissKeyboard();
+      bottomSheetRef.current?.present();
     },
     close: () => {
       close();
@@ -81,7 +83,7 @@ export function BottomSheet({
   }));
 
   const close = useCallback(() => {
-    bottomSheetRef.current?.close();
+    bottomSheetRef.current?.dismiss();
   }, []);
 
   const handleChange = (index: number) => {
@@ -91,26 +93,24 @@ export function BottomSheet({
     const previousIndex = previousIndexRef.current;
 
     if (previousIndex === -1 && index >= 0) {
-      // Transitioned from closed to open
-      dismissKeyboard();
       onOpen?.();
-    } else if (previousIndex >= 0 && index === -1) {
-      // Transitioned from open to closed
-      dismissKeyboard();
-      onClose?.();
     }
 
     previousIndexRef.current = index;
   };
 
   return (
-    <RNBottomSheet
+    <BottomSheetModal
       ref={bottomSheetRef}
-      index={-1}
       backdropComponent={Backdrop}
       backgroundStyle={styles.background}
       enablePanDownToClose={true}
       onChange={handleChange}
+      onDismiss={() => {
+        previousIndexRef.current = -1;
+        dismissKeyboard();
+        onClose?.();
+      }}
       keyboardBlurBehavior="restore"
       handleStyle={styles.handle}
     >
@@ -126,7 +126,7 @@ export function BottomSheet({
           <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
         )}
       </BottomSheetView>
-    </RNBottomSheet>
+    </BottomSheetModal>
   );
 }
 

package/src/BottomSheet/hooks/useBottomSheetBackHandler.test.ts

@@ -2,7 +2,7 @@ import { createRef } from "react";
 import type { RefObject } from "react";
 import { act, renderHook } from "@testing-library/react-native";
 import { BackHandler } from "react-native";
-import type BottomSheet from "@gorhom/bottom-sheet";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import { useBottomSheetBackHandler } from "./useBottomSheetBackHandler";
 
 describe("useBottomSheetBackHandler", () => {
@@ -20,7 +20,7 @@ describe("useBottomSheetBackHandler", () => {
   });
 
   it("should register BackHandler listener when sheet becomes visible", async () => {
-    const bottomSheetRef = createRef<BottomSheet | null>();
+    const bottomSheetRef = createRef<BottomSheetModal | null>();
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
     );
@@ -35,13 +35,13 @@ describe("useBottomSheetBackHandler", () => {
     );
   });
 
-  it("should call close() when back button is pressed", async () => {
-    const mockClose = jest.fn();
+  it("should call dismiss() when back button is pressed", async () => {
+    const mockDismiss = jest.fn();
     const bottomSheetRef = {
       current: {
-        close: mockClose,
-      } as unknown as BottomSheet,
-    } as RefObject<BottomSheet | null>;
+        dismiss: mockDismiss,
+      } as unknown as BottomSheetModal,
+    } as RefObject<BottomSheetModal | null>;
 
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
@@ -54,12 +54,12 @@ describe("useBottomSheetBackHandler", () => {
     const registeredCallback = mockAddEventListener.mock.calls[0][1];
     const returnValue = registeredCallback();
 
-    expect(mockClose).toHaveBeenCalled();
+    expect(mockDismiss).toHaveBeenCalled();
     expect(returnValue).toBe(true);
   });
 
   it("should remove listener when sheet is dismissed", async () => {
-    const bottomSheetRef = createRef<BottomSheet | null>();
+    const bottomSheetRef = createRef<BottomSheetModal | null>();
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
     );
@@ -76,7 +76,7 @@ describe("useBottomSheetBackHandler", () => {
   });
 
   it("should not register listener when index is negative", async () => {
-    const bottomSheetRef = createRef<BottomSheet | null>();
+    const bottomSheetRef = createRef<BottomSheetModal | null>();
     const { result } = renderHook(() =>
       useBottomSheetBackHandler(bottomSheetRef),
     );

package/src/BottomSheet/hooks/useBottomSheetBackHandler.ts

@@ -1,13 +1,13 @@
 import { useCallback, useRef } from "react";
 import { BackHandler, type NativeEventSubscription } from "react-native";
-import type BottomSheet from "@gorhom/bottom-sheet";
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 
 /**
- * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * Hook that dismisses the bottom sheet modal on the hardware back button press if it is visible
  * @param bottomSheetRef ref to the bottom sheet component
  */
 export function useBottomSheetBackHandler(
-  bottomSheetRef: React.RefObject<BottomSheet | null>,
+  bottomSheetRef: React.RefObject<BottomSheetModal | null>,
 ): {
   handleSheetPositionChange: (index: number) => void;
 } {
@@ -24,7 +24,7 @@ export function useBottomSheetBackHandler(
         backHandlerSubscriptionRef.current = BackHandler.addEventListener(
           "hardwareBackPress",
           () => {
-            bottomSheetRef.current?.close();
+            bottomSheetRef.current?.dismiss();
 
             return true;
           },

package/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Host } from "react-native-portalize";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { ButtonGroup } from "@jobber/components-native";
+import {
+  AtlantisOverlayProvider,
+  ButtonGroup,
+} from "@jobber/components-native";
 
 const meta = {
   title: "Components/Actions/ButtonGroup",
@@ -31,7 +33,7 @@ type SecondaryActionStory = StoryObj<
 export const Basic: ButtonGroupStory = {
   render: args => (
     <SafeAreaProvider>
-      <Host>
+      <AtlantisOverlayProvider>
         <ButtonGroup {...args}>
           <ButtonGroup.PrimaryAction
             label={"Create"}
@@ -49,7 +51,7 @@ export const Basic: ButtonGroupStory = {
             onPress={() => console.log("delete")}
           />
         </ButtonGroup>
-      </Host>
+      </AtlantisOverlayProvider>
     </SafeAreaProvider>
   ),
   args: {},
@@ -58,7 +60,7 @@ export const Basic: ButtonGroupStory = {
 export const Primary: PrimaryActionStory = {
   render: args => (
     <SafeAreaProvider>
-      <Host>
+      <AtlantisOverlayProvider>
         <ButtonGroup>
           <ButtonGroup.PrimaryAction {...args} />
           <ButtonGroup.SecondaryAction
@@ -72,7 +74,7 @@ export const Primary: PrimaryActionStory = {
             onPress={() => console.log("delete")}
           />
         </ButtonGroup>
-      </Host>
+      </AtlantisOverlayProvider>
     </SafeAreaProvider>
   ),
   args: {
@@ -85,7 +87,7 @@ export const Primary: PrimaryActionStory = {
 export const Secondary: SecondaryActionStory = {
   render: args => (
     <SafeAreaProvider>
-      <Host>
+      <AtlantisOverlayProvider>
         <ButtonGroup
           bottomSheetHeading="What would you like to do"
           showCancelInBottomSheet={true}
@@ -97,7 +99,7 @@ export const Secondary: SecondaryActionStory = {
           />
           <ButtonGroup.SecondaryAction {...args} />
         </ButtonGroup>
-      </Host>
+      </AtlantisOverlayProvider>
     </SafeAreaProvider>
   ),
   args: {

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
 import { Alert } from "react-native";
 import type { ButtonGroupProps } from "./ButtonGroup";
 import { ButtonGroup } from "./ButtonGroup";
@@ -12,15 +11,13 @@ const mockOnOpen = jest.fn();
 
 function ButtonGroupForTest(props: ButtonGroupProps) {
   return (
-    <Host>
-      <ButtonGroup
-        bottomSheetHeading={props.bottomSheetHeading}
-        showCancelInBottomSheet={props.showCancelInBottomSheet}
-        onOpenBottomSheet={mockOnOpen}
-      >
-        {props.children}
-      </ButtonGroup>
-    </Host>
+    <ButtonGroup
+      bottomSheetHeading={props.bottomSheetHeading}
+      showCancelInBottomSheet={props.showCancelInBottomSheet}
+      onOpenBottomSheet={mockOnOpen}
+    >
+      {props.children}
+    </ButtonGroup>
   );
 }
 

package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx

@@ -1,7 +1,6 @@
 import type { RefObject } from "react";
 import React from "react";
 import { View } from "react-native";
-import { Portal } from "react-native-portalize";
 import type { ButtonGroupSecondaryActionProps } from "../../types";
 import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
 import type { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
@@ -25,34 +24,32 @@ export function SecondaryActionSheet({
   onCloseBottomSheet,
 }: SecondaryActionSheetProps) {
   return (
-    <Portal>
-      <BottomSheet
-        heading={heading}
-        showCancel={showCancel}
-        ref={secondaryActionsRef}
-        onOpen={onOpenBottomSheet}
-        onClose={onCloseBottomSheet}
-      >
-        <View>
-          {actions.map((action, index) => {
-            const { label, onPress, icon, iconColor, destructive } = action;
+    <BottomSheet
+      heading={heading}
+      showCancel={showCancel}
+      ref={secondaryActionsRef}
+      onOpen={onOpenBottomSheet}
+      onClose={onCloseBottomSheet}
+    >
+      <View>
+        {actions.map((action, index) => {
+          const { label, onPress, icon, iconColor, destructive } = action;
 
-            return (
-              <BottomSheetOption
-                destructive={destructive}
-                key={index}
-                text={label}
-                onPress={() => {
-                  secondaryActionsRef?.current?.close();
-                  onPress();
-                }}
-                icon={icon}
-                iconColor={iconColor}
-              />
-            );
-          })}
-        </View>
-      </BottomSheet>
-    </Portal>
+          return (
+            <BottomSheetOption
+              destructive={destructive}
+              key={index}
+              text={label}
+              onPress={() => {
+                secondaryActionsRef?.current?.close();
+                onPress();
+              }}
+              icon={icon}
+              iconColor={iconColor}
+            />
+          );
+        })}
+      </View>
+    </BottomSheet>
   );
 }

package/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react";
+import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import {
+  type BottomSheetScrollViewMethods,
+  SCROLLABLE_TYPE,
+  createBottomSheetScrollableComponent,
+} from "@gorhom/bottom-sheet";
+import Reanimated from "react-native-reanimated";
+
+/**
+ * A keyboard-aware scroll view component that integrates with @gorhom/bottom-sheet.
+ *
+ * This component wraps `KeyboardAwareScrollView` from `react-native-keyboard-controller`
+ * with the bottom sheet HOCs to ensure proper keyboard handling on Android when using
+ * TextInputs inside a BottomSheet.
+ *
+ * @see https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view#gorhombottom-sheet
+ */
+const AnimatedScrollView =
+  Reanimated.createAnimatedComponent<KeyboardAwareScrollViewProps>(
+    KeyboardAwareScrollView,
+  );
+
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  KeyboardAwareScrollViewProps
+>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
+
+const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent);
+
+BottomSheetKeyboardAwareScrollView.displayName =
+  "BottomSheetKeyboardAwareScrollView";
+
+export { BottomSheetKeyboardAwareScrollView };
+export type { KeyboardAwareScrollViewProps };