insyd-bottom-sheet 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "insyd-bottom-sheet",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A smooth, physics-based bottom sheet for React Native — by Ishan Gupta. Works with Expo Go, bare workflow, and React Native CLI.",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -42,11 +42,16 @@
     "react": ">=18.0.0",
     "react-native": ">=0.71.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0"
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-worklets": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-worklets": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
-    "@types/react-native": "^0.73.0",
     "typescript": "^5.3.0"
   }
 }

package/src/SmoothSheet.tsx

@@ -1,26 +1,26 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
-  Dimensions,
-  KeyboardAvoidingView,
-  Platform,
+  Modal,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from "react-native";
 import {
   Gesture,
   GestureDetector,
+  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 import Animated, {
+  KeyboardState,
   runOnJS,
+  useAnimatedKeyboard,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from "react-native-reanimated";
 
-const SCREEN_HEIGHT = Dimensions.get("window").height;
-
 const DEFAULT_SPRING = { damping: 28, stiffness: 160, mass: 0.9 };
 
 export interface SpringConfig {
@@ -37,12 +37,12 @@ export interface SmoothSheetProps {
   /** Content rendered inside the sheet. */
   children: React.ReactNode;
   /**
-   * Minimum height of the sheet as a fraction of screen height (0–1).
+   * Minimum height of the sheet as a fraction of window height (0–1).
    * @default 0.4
    */
   minHeightFraction?: number;
   /**
-   * Maximum height of the sheet as a fraction of screen height (0–1).
+   * Maximum height of the sheet as a fraction of window height (0–1).
    * @default 0.97
    */
   maxHeightFraction?: number;
@@ -81,6 +81,18 @@ export interface SmoothSheetProps {
    * Merged over the default: { damping: 28, stiffness: 160, mass: 0.9 }
    */
   springConfig?: SpringConfig;
+  /**
+   * Extra padding applied below the sheet content, e.g. the bottom safe-area
+   * inset on gesture-nav Android devices / notched iPhones. Pass
+   * `useSafeAreaInsets().bottom` from the host app.
+   * @default 0
+   */
+  bottomInset?: number;
+  /**
+   * Accessibility label announced for the backdrop's dismiss action.
+   * @default "Close"
+   */
+  dismissAccessibilityLabel?: string;
 }
 
 export function SmoothSheet({
@@ -96,32 +108,52 @@ export function SmoothSheet({
   dismissThreshold = 80,
   dismissVelocityThreshold = 800,
   springConfig,
+  bottomInset = 0,
+  dismissAccessibilityLabel = "Close",
 }: SmoothSheetProps) {
   const spring = { ...DEFAULT_SPRING, ...springConfig };
 
-  const translateY = useSharedValue(SCREEN_HEIGHT);
+  // Live window height — correct across rotation, split-screen, and foldables.
+  const { height: windowHeight } = useWindowDimensions();
+
+  // The keyboard is tracked on the UI thread and the sheet is *translated*
+  // above it. This works identically under edge-to-edge (forced on Android
+  // 15+/targetSdk 35+, where adjustResize is a no-op) and in legacy resize
+  // mode — the sheet never depends on the window resizing.
+  const keyboard = useAnimatedKeyboard();
+
+  const translateY = useSharedValue(windowHeight);
   const backdropOpacity = useSharedValue(0);
+  // Keep Modal mounted during the closing animation so the sheet can slide out
+  const [modalVisible, setModalVisible] = useState(isVisible);
+  // Guards against double-dismiss (back button mashing, backdrop tap during close)
+  const isClosing = useRef(false);
 
   useEffect(() => {
     if (isVisible) {
+      isClosing.current = false;
+      setModalVisible(true);
       translateY.value = withSpring(0, spring);
       backdropOpacity.value = withTiming(1, { duration: 250 });
     } else {
-      translateY.value = withSpring(SCREEN_HEIGHT, spring);
-      backdropOpacity.value = withTiming(0, { duration: 200 });
+      translateY.value = withSpring(windowHeight, spring);
+      backdropOpacity.value = withTiming(0, { duration: 200 }, (finished) => {
+        if (finished) runOnJS(setModalVisible)(false);
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isVisible]);
 
   function dismiss() {
-    translateY.value = withSpring(SCREEN_HEIGHT, spring);
-    backdropOpacity.value = withTiming(
-      0,
-      { duration: 200 },
-      () => {
+    if (isClosing.current) return;
+    isClosing.current = true;
+    translateY.value = withSpring(windowHeight, spring);
+    backdropOpacity.value = withTiming(0, { duration: 200 }, (finished) => {
+      if (finished) {
+        runOnJS(setModalVisible)(false);
         runOnJS(onDismiss)();
-      },
-    );
+      }
+    });
   }
 
   const panGesture = Gesture.Pan()
@@ -141,65 +173,80 @@ export function SmoothSheet({
       }
     });
 
-  const sheetStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-  }));
+  const sheetStyle = useAnimatedStyle(() => {
+    // Only lift the sheet while the keyboard is actually present; when it is
+    // fully closed the translation collapses back to the drag/entry offset.
+    const keyboardOffset =
+      keyboard.state.value === KeyboardState.CLOSED
+        ? 0
+        : keyboard.height.value;
+    return {
+      transform: [{ translateY: translateY.value - keyboardOffset }],
+    };
+  });
 
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: backdropOpacity.value,
   }));
 
-  if (!isVisible && translateY.value === SCREEN_HEIGHT) {
-    return null;
-  }
-
   return (
-    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
-      {/* Backdrop */}
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFill,
-          { backgroundColor: backdropColor },
-          backdropStyle,
-        ]}
-        pointerEvents={isVisible ? "auto" : "none"}
-      >
-        <Pressable style={StyleSheet.absoluteFill} onPress={dismiss} />
-      </Animated.View>
-
-      {/* Sheet */}
-      <Animated.View
-        style={[
-          styles.sheet,
-          {
-            borderTopLeftRadius: borderRadius,
-            borderTopRightRadius: borderRadius,
-            backgroundColor,
-            minHeight: SCREEN_HEIGHT * minHeightFraction,
-            maxHeight: SCREEN_HEIGHT * maxHeightFraction,
-          },
-          sheetStyle,
-        ]}
-        pointerEvents="box-none"
-      >
-        {/* Drag handle */}
-        <GestureDetector gesture={panGesture}>
-          <View style={styles.handleArea}>
-            <View
-              style={[styles.handle, { backgroundColor: handleColor }]}
-            />
-          </View>
-        </GestureDetector>
-
-        {/* Content */}
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          style={styles.content}
+    <Modal
+      visible={modalVisible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      navigationBarTranslucent
+      onRequestClose={dismiss}
+    >
+      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+        {/* Backdrop */}
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: backdropColor },
+            backdropStyle,
+          ]}
         >
-          {children}
-        </KeyboardAvoidingView>
-      </Animated.View>
-    </View>
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            onPress={dismiss}
+            accessibilityRole="button"
+            accessibilityLabel={dismissAccessibilityLabel}
+          />
+        </Animated.View>
+
+        {/* Sheet */}
+        <Animated.View
+          style={[
+            styles.sheet,
+            {
+              borderTopLeftRadius: borderRadius,
+              borderTopRightRadius: borderRadius,
+              backgroundColor,
+              minHeight: windowHeight * minHeightFraction,
+              maxHeight: windowHeight * maxHeightFraction,
+              paddingBottom: bottomInset,
+            },
+            sheetStyle,
+          ]}
+          pointerEvents="box-none"
+          accessibilityViewIsModal
+        >
+          {/* Drag handle */}
+          <GestureDetector gesture={panGesture}>
+            <View style={styles.handleArea}>
+              <View
+                style={[styles.handle, { backgroundColor: handleColor }]}
+              />
+            </View>
+          </GestureDetector>
+
+          {/* Content — keyboard avoidance is handled by translating the whole
+              sheet (see sheetStyle); no KeyboardAvoidingView needed. */}
+          <View style={styles.content}>{children}</View>
+        </Animated.View>
+      </GestureHandlerRootView>
+    </Modal>
   );
 }