insyd-bottom-sheet 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "insyd-bottom-sheet",
-  "version": "0.2.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,11 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
-  Dimensions,
-  KeyboardAvoidingView,
   Modal,
-  Platform,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from "react-native";
 import {
@@ -14,15 +12,15 @@ import {
   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 {
@@ -39,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;
@@ -83,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({
@@ -98,32 +108,51 @@ 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 }, () => {
-        runOnJS(setModalVisible)(false);
+      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 }, () => {
-      runOnJS(onDismiss)();
+    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)();
+      }
     });
   }
 
@@ -144,9 +173,17 @@ 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,
@@ -158,6 +195,7 @@ export function SmoothSheet({
       transparent
       animationType="none"
       statusBarTranslucent
+      navigationBarTranslucent
       onRequestClose={dismiss}
     >
       <GestureHandlerRootView style={StyleSheet.absoluteFill}>
@@ -169,7 +207,12 @@ export function SmoothSheet({
             backdropStyle,
           ]}
         >
-          <Pressable style={StyleSheet.absoluteFill} onPress={dismiss} />
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            onPress={dismiss}
+            accessibilityRole="button"
+            accessibilityLabel={dismissAccessibilityLabel}
+          />
         </Animated.View>
 
         {/* Sheet */}
@@ -180,12 +223,14 @@ export function SmoothSheet({
               borderTopLeftRadius: borderRadius,
               borderTopRightRadius: borderRadius,
               backgroundColor,
-              minHeight: SCREEN_HEIGHT * minHeightFraction,
-              maxHeight: SCREEN_HEIGHT * maxHeightFraction,
+              minHeight: windowHeight * minHeightFraction,
+              maxHeight: windowHeight * maxHeightFraction,
+              paddingBottom: bottomInset,
             },
             sheetStyle,
           ]}
           pointerEvents="box-none"
+          accessibilityViewIsModal
         >
           {/* Drag handle */}
           <GestureDetector gesture={panGesture}>
@@ -196,13 +241,9 @@ export function SmoothSheet({
             </View>
           </GestureDetector>
 
-          {/* Content */}
-          <KeyboardAvoidingView
-            behavior={Platform.OS === "ios" ? "padding" : "height"}
-            style={styles.content}
-          >
-            {children}
-          </KeyboardAvoidingView>
+          {/* 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>