@react-native-ama/bottom-sheet 2.0.0-beta.0

package/dist/components/BottomSheet.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { ModalProps, ScrollViewProps, ViewStyle } from "react-native";
+export type BottomSheetProps = {
+    animationDuration?: number;
+    autoCloseDelay?: number;
+    avoidKeyboard?: boolean;
+    bottomSheetStyle?: ViewStyle | ViewStyle[];
+    closeActionAccessibilityLabel: string;
+    closeDistance?: number;
+    footerComponent?: React.ReactElement;
+    handleComponent?: React.ReactElement | "none";
+    handleStyle?: ViewStyle | ViewStyle[];
+    headerComponent?: React.ReactElement;
+    maxHeight?: number;
+    minVelocityToClose?: number;
+    onBottomSheetHidden?: () => void;
+    onClose: () => void;
+    overlayOpacity?: number;
+    overlayStyle?: ViewStyle | ViewStyle[];
+    panGestureEnabled?: boolean;
+    persistent?: boolean;
+    hasScrollableContent?: boolean;
+    scrollViewProps?: Omit<ScrollViewWrapperProps, "testID" | "maxScrollViewHeight">;
+    testID?: string;
+    topInset: number;
+    visible: boolean;
+    ref?: React.RefObject<BottomSheetActions>;
+    shouldHandleKeyboardEvents?: boolean;
+    supportedOrientations?: ModalProps["supportedOrientations"];
+    isOverlayAccessible?: boolean;
+};
+export type BottomSheetActions = {
+    close: () => Promise<void>;
+    isVisible: () => boolean;
+};
+export declare const BottomSheet: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<BottomSheetProps>, "ref"> & React.RefAttributes<BottomSheetActions>>;
+type ScrollViewWrapperProps = {
+    testID?: string;
+    maxScrollViewHeight: number;
+} & ScrollViewProps;
+export {};

package/dist/components/BottomSheet.js

@@ -0,0 +1,290 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheet = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const useBottomSheetGestureHandler_1 = require("../hooks/useBottomSheetGestureHandler");
+const useKeyboard_1 = require("../hooks/useKeyboard");
+const AnimaCore = require("@react-native-ama/core");
+const isIOS = react_native_1.Platform.OS === "ios";
+const SCREEN_HEIGHT = react_native_1.Dimensions.get("screen").height;
+exports.BottomSheet = React.forwardRef(({ children, visible, onClose, handleStyle = {}, bottomSheetStyle = {}, overlayStyle, closeActionAccessibilityLabel, headerComponent, animationDuration = 300, closeDistance = 0.3, handleComponent, scrollViewProps, hasScrollableContent = true, persistent = false, autoCloseDelay, panGestureEnabled = true, testID, overlayOpacity = 1, footerComponent, avoidKeyboard, maxHeight: propMaxHeight, minVelocityToClose = 1000, topInset, onBottomSheetHidden, shouldHandleKeyboardEvents = true, supportedOrientations, isOverlayAccessible = true, }, ref) => {
+    var _a;
+    // This is used to let Reanimated animate the view out, before removing it from the tree.
+    const [shouldRenderContent, setShouldRenderContent] = React.useState(visible);
+    const [isModalVisible, setIsModalVisible] = React.useState(false);
+    const translateY = (0, react_native_reanimated_1.useSharedValue)(SCREEN_HEIGHT * 1.5);
+    const contentHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    const dragOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    const onTimeout = ((_a = AnimaCore === null || AnimaCore === void 0 ? void 0 : AnimaCore.useTimedAction()) === null || _a === void 0 ? void 0 : _a.onTimeout) || setTimeout;
+    const isMounted = React.useRef(false);
+    const [headerHeight, setHeaderHeight] = React.useState(-1);
+    const [footerHeight, setFooterHeight] = React.useState(-1);
+    const [handleHeight, setHandleHeight] = React.useState(-1);
+    const promiseResolver = React.useRef(null);
+    const [maxScrollViewHeight, setMaxScrollViewHeight] = React.useState(0);
+    const { keyboardHeight, keyboardFinalHeight } = (0, useKeyboard_1.useKeyboard)(shouldHandleKeyboardEvents);
+    const shouldReduceMotion = (0, react_native_reanimated_1.useReducedMotion)();
+    const { height } = (0, react_native_1.useWindowDimensions)();
+    const maxHeight = propMaxHeight !== null && propMaxHeight !== void 0 ? propMaxHeight : height * 0.9;
+    const duration = shouldReduceMotion ? 0 : animationDuration;
+    React.useImperativeHandle(ref, () => ({
+        close: () => __awaiter(void 0, void 0, void 0, function* () {
+            if (!shouldRenderContent) {
+                return Promise.resolve();
+            }
+            return new Promise((resolve) => {
+                promiseResolver.current = resolve;
+                onClose();
+            });
+        }),
+        isVisible: () => {
+            return shouldRenderContent;
+        },
+    }));
+    React.useEffect(() => {
+        if (visible) {
+            dragOpacity.value = (0, react_native_reanimated_1.withTiming)(overlayOpacity, {
+                duration,
+            });
+            setIsModalVisible(true);
+            setShouldRenderContent(true);
+            if (autoCloseDelay) {
+                onTimeout(() => {
+                    if (isMounted.current) {
+                        onClose();
+                    }
+                }, autoCloseDelay);
+            }
+        }
+        else if (isModalVisible) {
+            const finished = () => {
+                var _a;
+                setShouldRenderContent(false);
+                setIsModalVisible(false);
+                onBottomSheetHidden === null || onBottomSheetHidden === void 0 ? void 0 : onBottomSheetHidden();
+                (_a = promiseResolver.current) === null || _a === void 0 ? void 0 : _a.call(promiseResolver);
+            };
+            dragOpacity.value = (0, react_native_reanimated_1.withTiming)(0, {
+                duration,
+            });
+            translateY.value = (0, react_native_reanimated_1.withTiming)(contentHeight.value, {
+                duration,
+            }, () => {
+                (0, react_native_reanimated_1.runOnJS)(finished)();
+            });
+        }
+    }, [
+        duration,
+        autoCloseDelay,
+        isModalVisible,
+        onBottomSheetHidden,
+        onClose,
+        onTimeout,
+        translateY,
+        visible,
+        dragOpacity,
+        overlayOpacity,
+        contentHeight.value,
+    ]);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const dragStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            opacity: dragOpacity.value,
+        };
+    });
+    const maxHeightValue = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        return maxHeight - keyboardHeight.value;
+    }, [keyboardHeight, maxHeight]);
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const keyboard = isIOS ? keyboardHeight.value : 0;
+        return {
+            transform: [{ translateY: translateY.value - keyboard }],
+            maxHeight: maxHeightValue.value,
+        };
+    }, [maxHeightValue, translateY, keyboardHeight]);
+    (0, react_native_reanimated_1.useDerivedValue)(() => {
+        const maxScrollHeight = Math.ceil(maxHeight -
+            keyboardFinalHeight.value -
+            footerHeight -
+            headerHeight -
+            handleHeight -
+            topInset);
+        if (!Number.isNaN(maxScrollHeight) &&
+            maxScrollHeight !== maxScrollViewHeight) {
+            (0, react_native_reanimated_1.runOnJS)(setMaxScrollViewHeight)(maxScrollHeight);
+        }
+    }, [
+        footerHeight,
+        headerHeight,
+        handleHeight,
+        keyboardFinalHeight,
+        topInset,
+        maxHeight,
+    ]);
+    const handleOnLayout = (event) => {
+        contentHeight.value = event.nativeEvent.layout.height;
+        if (translateY.value === 0) {
+            return;
+        }
+        translateY.value = event.nativeEvent.layout.height;
+        translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration });
+    };
+    const maybeCloseBottomSheet = persistent ? undefined : onClose;
+    const Wrapper = avoidKeyboard && !shouldHandleKeyboardEvents
+        ? BottomSheetKeyboardAvoidingView
+        : React.Fragment;
+    const opacity = [footerHeight, headerHeight, handleHeight].every((h) => h >= 0)
+        ? 1
+        : 0;
+    const ContentWrapper = hasScrollableContent
+        ? ScrollViewWrapper
+        : FragmentWrapper;
+    return (<react_native_1.Modal animationType="none" transparent={true} visible={isModalVisible} onRequestClose={onClose} ref={ref} testID={testID} supportedOrientations={supportedOrientations} statusBarTranslucent={true}>
+        <Wrapper>
+          {shouldRenderContent ? (<react_native_gesture_handler_1.GestureHandlerRootView style={{ flex: 1, opacity }}>
+              <react_native_reanimated_1.default.View style={[styles.overlay, overlayStyle, dragStyle]} testID={`${testID}-overlay-wrapper`}>
+                <react_native_1.Pressable style={styles.closeButton} accessibilityRole="button" onPress={maybeCloseBottomSheet} testID={`${testID}-overlay-button`} accessible={isOverlayAccessible && !persistent} importantForAccessibility={persistent ? "no-hide-descendants" : "yes"} accessibilityElementsHidden={persistent} onAccessibilityTap={maybeCloseBottomSheet} accessibilityLabel={closeActionAccessibilityLabel}/>
+              </react_native_reanimated_1.default.View>
+              <react_native_reanimated_1.default.View style={[
+                styles.contentWrapper,
+                styles.content,
+                bottomSheetStyle,
+                animatedStyle,
+            ]} testID={`${testID}-wrapper`} onLayout={handleOnLayout}>
+                <GestureHandler translateY={translateY} closeDistance={closeDistance} contentHeight={contentHeight} onClose={onClose} testID={`${testID}-gesture-handler`} overlayOpacity={overlayOpacity} dragOpacity={dragOpacity} minVelocityToClose={minVelocityToClose} panGestureEnabled={panGestureEnabled}>
+                  <react_native_1.View onLayout={(event) => {
+                setHandleHeight(event.nativeEvent.layout.height);
+            }}>
+                    {handleComponent === "none"
+                ? null
+                : handleComponent !== null && handleComponent !== void 0 ? handleComponent : (<react_native_1.View style={[styles.line, handleStyle]} testID={`${testID}-line`}/>)}
+                  </react_native_1.View>
+                  <react_native_1.View onLayout={(event) => {
+                setHeaderHeight(event.nativeEvent.layout.height);
+            }}>
+                    {headerComponent}
+                  </react_native_1.View>
+                  <ContentWrapper {...scrollViewProps} testID={testID} maxScrollViewHeight={maxScrollViewHeight}>
+                    {children}
+                  </ContentWrapper>
+                  <react_native_1.View onLayout={(event) => {
+                setFooterHeight(event.nativeEvent.layout.height);
+            }}>
+                    {footerComponent}
+                  </react_native_1.View>
+                </GestureHandler>
+              </react_native_reanimated_1.default.View>
+            </react_native_gesture_handler_1.GestureHandlerRootView>) : null}
+        </Wrapper>
+      </react_native_1.Modal>);
+});
+const BottomSheetKeyboardAvoidingView = ({ children, }) => {
+    return (<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === "ios" ? "padding" : undefined} pointerEvents="box-none" style={{ flex: 1 }}>
+      {children}
+    </react_native_1.KeyboardAvoidingView>);
+};
+const GestureHandler = ({ translateY, closeDistance, contentHeight, children, onClose, panGestureEnabled, testID, dragOpacity, overlayOpacity, minVelocityToClose, }) => {
+    const { gestureHandler } = (0, useBottomSheetGestureHandler_1.useBottomSheetGestureHandler)({
+        translateY,
+        closeDistance,
+        contentHeight,
+        onClose,
+        dragOpacity,
+        overlayOpacity,
+        minVelocityToClose,
+    });
+    return panGestureEnabled ? (<react_native_gesture_handler_1.GestureDetector gesture={gestureHandler}>
+      <react_native_reanimated_1.default.View testID={testID}>{children}</react_native_reanimated_1.default.View>
+    </react_native_gesture_handler_1.GestureDetector>) : (<react_native_reanimated_1.default.View testID={testID}>{children}</react_native_reanimated_1.default.View>);
+};
+const ScrollViewWrapper = (_a) => {
+    var { scrollEnabled = true, testID, maxScrollViewHeight, children, style } = _a, rest = __rest(_a, ["scrollEnabled", "testID", "maxScrollViewHeight", "children", "style"]);
+    return (<react_native_gesture_handler_1.ScrollView {...rest} style={[{ maxHeight: maxScrollViewHeight }, style]} scrollEnabled={scrollEnabled} testID={`${testID}-scrollview`}>
+      {children}
+    </react_native_gesture_handler_1.ScrollView>);
+};
+const FragmentWrapper = ({ children, }) => {
+    return <>{children}</>;
+};
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        flex: 1,
+    },
+    closeButton: {
+        flex: 1,
+    },
+    contentWrapper: {
+        flexDirection: "column",
+        flex: 1,
+        position: "absolute",
+        bottom: 0,
+        alignSelf: "flex-end",
+        width: "100%",
+    },
+    content: {
+        width: "100%",
+        backgroundColor: "#fff",
+        flex: 1,
+    },
+    line: {
+        width: 48,
+        height: 4,
+        backgroundColor: "grey",
+        alignSelf: "center",
+        marginBottom: 24,
+        borderRadius: 2,
+        marginTop: 12,
+    },
+});

package/dist/hooks/useBottomSheetGestureHandler.d.ts

@@ -0,0 +1,14 @@
+import { SharedValue } from 'react-native-reanimated';
+type UseBottomSheetGestureHandler = {
+    translateY: SharedValue<number>;
+    contentHeight: SharedValue<number>;
+    dragOpacity: SharedValue<number>;
+    closeDistance: number;
+    overlayOpacity: number;
+    onClose: () => void;
+    minVelocityToClose: number;
+};
+export declare const useBottomSheetGestureHandler: ({ translateY, closeDistance, contentHeight, onClose, dragOpacity, overlayOpacity, minVelocityToClose, }: UseBottomSheetGestureHandler) => {
+    gestureHandler: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+};
+export {};

package/dist/hooks/useBottomSheetGestureHandler.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBottomSheetGestureHandler = void 0;
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const useBottomSheetGestureHandler = ({ translateY, closeDistance, contentHeight, onClose, dragOpacity, overlayOpacity, minVelocityToClose, }) => {
+    const shouldReduceMotion = (0, react_native_reanimated_1.useReducedMotion)();
+    const startY = (0, react_native_reanimated_1.useSharedValue)(0);
+    const gestureHandler = react_native_gesture_handler_1.Gesture.Pan()
+        .onStart(() => {
+        startY.value = translateY.value;
+    })
+        .onUpdate(event => {
+        translateY.value = Math.max(0, startY.value + event.translationY);
+        const distance = contentHeight.value - translateY.value;
+        const opacity = Math.min(distance / contentHeight.value, overlayOpacity);
+        dragOpacity.value = opacity;
+    })
+        .onEnd(event => {
+        const minimumDistanceToClose = contentHeight.value * closeDistance;
+        const shouldCloseBottomSheet = translateY.value >= minimumDistanceToClose ||
+            event.velocityY >= minVelocityToClose;
+        if (shouldCloseBottomSheet) {
+            (0, react_native_reanimated_1.runOnJS)(onClose)();
+        }
+        else {
+            translateY.value = (0, react_native_reanimated_1.withTiming)(0, {
+                duration: shouldReduceMotion ? 0 : 300,
+            });
+        }
+    });
+    return {
+        gestureHandler,
+    };
+};
+exports.useBottomSheetGestureHandler = useBottomSheetGestureHandler;

package/dist/hooks/useKeyboard.d.ts

@@ -0,0 +1,5 @@
+export declare const useKeyboard: (shouldHandleKeyboardEvents?: boolean) => {
+    keyboardHeight: import("react-native-reanimated").SharedValue<number>;
+    keyboardFinalHeight: import("react-native-reanimated").SharedValue<number>;
+    isKeyboardVisible: import("react-native-reanimated").SharedValue<boolean>;
+};

package/dist/hooks/useKeyboard.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboard = void 0;
+/*
+ * Based on: https://github.com/gorhom/react-native-bottom-sheet
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const KEYBOARD_EVENT_SHOW = react_native_1.Platform.select({
+    ios: 'keyboardWillShow',
+    default: 'keyboardDidShow',
+});
+const KEYBOARD_EVENT_HIDE = react_native_1.Platform.select({
+    ios: 'keyboardWillHide',
+    default: 'keyboardDidHide',
+});
+const useKeyboard = (shouldHandleKeyboardEvents = true) => {
+    const keyboardHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    const keyboardFinalHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    const isKeyboardVisible = (0, react_native_reanimated_1.useSharedValue)(false);
+    const handleKeyboardEvent = (0, react_1.useCallback)((isVisible, endCoordinatesHeight, duration, easing) => {
+        const finalHeight = isVisible ? endCoordinatesHeight : 0;
+        const animationConfig = getKeyboardAnimationConfigs(easing, duration);
+        keyboardFinalHeight.value = finalHeight;
+        keyboardHeight.value = (0, react_native_reanimated_1.withTiming)(isVisible ? finalHeight : 0, animationConfig);
+        isKeyboardVisible.value = isVisible;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    (0, react_1.useEffect)(() => {
+        if (!shouldHandleKeyboardEvents) {
+            return;
+        }
+        const handleEvent = (isVisible) => {
+            return (event) => {
+                return handleKeyboardEvent(isVisible, event.endCoordinates.height, event.duration, event.easing);
+            };
+        };
+        const showSubscription = react_native_1.Keyboard.addListener(KEYBOARD_EVENT_SHOW, handleEvent(true));
+        const hideSubscription = react_native_1.Keyboard.addListener(KEYBOARD_EVENT_HIDE, handleEvent(false));
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, [handleKeyboardEvent, shouldHandleKeyboardEvents]);
+    return {
+        keyboardHeight,
+        keyboardFinalHeight,
+        isKeyboardVisible,
+    };
+};
+exports.useKeyboard = useKeyboard;
+const getKeyboardAnimationConfigs = (easing, duration) => {
+    switch (easing) {
+        case 'easeIn':
+            return {
+                easing: react_native_reanimated_1.Easing.in(react_native_reanimated_1.Easing.ease),
+                duration,
+            };
+        case 'easeOut':
+            return {
+                easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
+                duration,
+            };
+        case 'easeInEaseOut':
+            return {
+                easing: react_native_reanimated_1.Easing.inOut(react_native_reanimated_1.Easing.ease),
+                duration,
+            };
+        case 'linear':
+            return {
+                easing: react_native_reanimated_1.Easing.linear,
+                duration,
+            };
+        case 'keyboard':
+            return {
+                damping: 500,
+                stiffness: 1000,
+                mass: 3,
+                overshootClamping: true,
+                restDisplacementThreshold: 10,
+                restSpeedThreshold: 10,
+                duration,
+            };
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { BottomSheet } from './components/BottomSheet';
+export { useBottomSheetGestureHandler } from './hooks/useBottomSheetGestureHandler';
+export { useKeyboard } from './hooks/useKeyboard';

package/dist/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboard = exports.useBottomSheetGestureHandler = exports.BottomSheet = void 0;
+// Components
+var BottomSheet_1 = require("./components/BottomSheet");
+Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return BottomSheet_1.BottomSheet; } });
+// Hooks
+var useBottomSheetGestureHandler_1 = require("./hooks/useBottomSheetGestureHandler");
+Object.defineProperty(exports, "useBottomSheetGestureHandler", { enumerable: true, get: function () { return useBottomSheetGestureHandler_1.useBottomSheetGestureHandler; } });
+var useKeyboard_1 = require("./hooks/useKeyboard");
+Object.defineProperty(exports, "useKeyboard", { enumerable: true, get: function () { return useKeyboard_1.useKeyboard; } });

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@react-native-ama/bottom-sheet",
+  "version": "2.0.0-beta.0",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./BottomSheet": {
+      "types": "./dist/components/BottomSheet.d.ts",
+      "default": "./dist/components/BottomSheet.js"
+    },
+    "./useBottomSheetGestureHandler": {
+      "types": "./dist/hooks/useBottomSheetGestureHandler.d.ts",
+      "default": "./dist/hooks/useBottomSheetGestureHandler.js"
+    },
+    "./useKeyboard": {
+      "types": "./dist/hooks/useKeyboard.d.ts",
+      "default": "./dist/hooks/useKeyboard.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@react-native-ama/core": "~2.0.0-beta.0",
+    "react": "*",
+    "react-native": ">=0.62.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-ama/core": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "react-native",
+    "accessibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormidableLabs/react-native-ama",
+    "directory": "packages/bottom-sheet"
+  },
+  "bugs": {
+    "url": "https://github.com/FormidableLabs/react-native-ama/issues"
+  },
+  "homepage": "https://github.com/FormidableLabs/react-native-ama#readme",
+  "publishConfig": {
+    "provenance": true
+  },
+  "author": "",
+  "license": "MIT",
+  "jest": {
+    "preset": "react-native",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/node_modules",
+      "<rootDir>/dist/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/index.ts"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 80,
+        "branches": 77,
+        "functions": 70,
+        "lines": 80
+      }
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native-reanimated|react-native-gesture-handler|expo|@expo)/)"
+    ],
+    "transform": {
+      "\\.[jt]sx?$": "babel-jest"
+    },
+    "moduleDirectories": [
+      "node_modules",
+      "../../playground/node_modules"
+    ],
+    "moduleNameMapper": {
+      "@react-native/js-polyfills/error-guard": "<rootDir>/../../jest-mocks/error-guard.js",
+      "^(\\.{1,2}/)*ama\\.config\\.json$": "<rootDir>/../../jest-mocks/ama-config.js",
+      "^(\\.{1,2}/)*ReactNativeAmaModule$": "<rootDir>/../../jest-mocks/ReactNativeAmaModule.js",
+      "^(\\.{1,2}/)*ReactNativeAmaView(\\.web)?$": "<rootDir>/../../jest-mocks/ReactNativeAmaModule.js",
+      "^@react-native-ama/core$": "<rootDir>/../../jest-mocks/ama-core.js",
+      "^@react-native-ama/core/(.*)$": "<rootDir>/../../packages/core/$1"
+    },
+    "verbose": true
+  }
+}