insyd-bottom-sheet 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "insyd-bottom-sheet",
-  "version": "0.2.0",
+  "version": "0.4.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/SheetHost.tsx

@@ -0,0 +1,101 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from "react";
+
+/**
+ * In-app portal for SmoothSheet. Sheets render their content HERE (a single
+ * layer near the app root, in the app's own window) instead of inside a native
+ * <Modal>. That's the whole reason the keyboard behaves correctly on Android
+ * edge-to-edge builds: a native Modal is a separate window whose keyboard
+ * insets React Native can't observe, so the sheet never rose. Rendered in the
+ * main window, ordinary keyboard handling just works.
+ *
+ * Mount <SheetHost> once, high in the tree but BELOW every provider your sheet
+ * content needs (theme, safe-area, query client, etc.) and inside your
+ * GestureHandlerRootView — portaled content resolves context from where the
+ * host sits, not from where the sheet element was created.
+ */
+
+type Registry = {
+  set: (id: string, node: React.ReactNode) => void;
+  remove: (id: string) => void;
+};
+
+const SheetPortalContext = createContext<Registry | null>(
+  null,
+);
+
+export function SheetHost({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [nodes, setNodes] = useState<
+    Record<string, React.ReactNode>
+  >({});
+
+  const registry = useMemo<Registry>(
+    () => ({
+      set: (id, node) =>
+        setNodes((prev) => ({ ...prev, [id]: node })),
+      remove: (id) =>
+        setNodes((prev) => {
+          if (!(id in prev)) return prev;
+          const next = { ...prev };
+          delete next[id];
+          return next;
+        }),
+    }),
+    [],
+  );
+
+  return (
+    <SheetPortalContext.Provider value={registry}>
+      {children}
+      {Object.entries(nodes).map(([id, node]) => (
+        <React.Fragment key={id}>{node}</React.Fragment>
+      ))}
+    </SheetPortalContext.Provider>
+  );
+}
+
+let warnedNoHost = false;
+
+/**
+ * Teleports its children into the nearest <SheetHost>. Updates on every render
+ * so live content stays fresh; unmounts its slot on cleanup. Falls back to
+ * rendering inline (with a one-time dev warning) if no host is mounted, so a
+ * missing provider degrades instead of crashing.
+ */
+export function SheetPortal({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const registry = useContext(SheetPortalContext);
+  const id = useId();
+
+  useEffect(() => {
+    if (!registry) return;
+    registry.set(id, children);
+    return () => registry.remove(id);
+  });
+
+  if (!registry) {
+    if (__DEV__ && !warnedNoHost) {
+      warnedNoHost = true;
+      console.warn(
+        "[insyd-bottom-sheet] No <SheetHost> found — rendering the sheet inline. " +
+          "Wrap your app in <SheetHost> (inside GestureHandlerRootView, below your providers) " +
+          "for correct overlaying and keyboard behavior.",
+      );
+    }
+    return <>{children}</>;
+  }
+  return null;
+}

package/src/SmoothSheet.tsx

@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 import {
-  Dimensions,
-  KeyboardAvoidingView,
-  Modal,
+  BackHandler,
+  Keyboard,
   Platform,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from "react-native";
 import {
   Gesture,
   GestureDetector,
-  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
@@ -21,9 +21,13 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 
-const SCREEN_HEIGHT = Dimensions.get("window").height;
+import { SheetPortal } from "./SheetHost";
 
-const DEFAULT_SPRING = { damping: 28, stiffness: 160, mass: 0.9 };
+const DEFAULT_SPRING = {
+  damping: 28,
+  stiffness: 160,
+  mass: 0.9,
+};
 
 export interface SpringConfig {
   damping?: number;
@@ -39,12 +43,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 +87,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,35 +114,113 @@ 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 sheet is *translated* above the keyboard, driven by global Keyboard
+  // events. Because the sheet now renders in the app's own window (via
+  // SheetPortal, not a native <Modal>), the focused TextInput lives in the same
+  // window these events observe — so this fires and reports the right height in
+  // Expo Go, dev clients, AND release builds, including Android 15+ forced
+  // edge-to-edge where a Modal's separate window used to break it.
+  const keyboardHeight = useSharedValue(0);
+
+  useEffect(() => {
+    const showEvent =
+      Platform.OS === "ios"
+        ? "keyboardWillShow"
+        : "keyboardDidShow";
+    const hideEvent =
+      Platform.OS === "ios"
+        ? "keyboardWillHide"
+        : "keyboardDidHide";
+    const showSub = Keyboard.addListener(showEvent, (e) => {
+      keyboardHeight.value = withTiming(
+        e.endCoordinates.height,
+        {
+          duration:
+            Platform.OS === "ios"
+              ? (e.duration ?? 250)
+              : 160,
+        },
+      );
+    });
+    const hideSub = Keyboard.addListener(hideEvent, (e) => {
+      keyboardHeight.value = withTiming(0, {
+        duration:
+          Platform.OS === "ios" ? (e.duration ?? 250) : 160,
+      });
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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);
+  // Keep the sheet mounted through the closing animation so it can slide out.
+  const [mounted, setMounted] = useState(isVisible);
+  // Guards against double-dismiss (back button mashing, backdrop tap during close)
+  const isClosing = useRef(false);
 
   useEffect(() => {
     if (isVisible) {
-      setModalVisible(true);
+      isClosing.current = false;
+      setMounted(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);
+      backdropOpacity.value = withTiming(1, {
+        duration: 250,
       });
+    } else {
+      translateY.value = withSpring(windowHeight, spring);
+      backdropOpacity.value = withTiming(
+        0,
+        { duration: 200 },
+        (finished) => {
+          if (finished) runOnJS(setMounted)(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(setMounted)(false);
+          runOnJS(onDismiss)();
+        }
+      },
+    );
   }
 
+  // Android hardware back closes the sheet (replaces Modal's onRequestClose).
+  useEffect(() => {
+    if (!mounted || Platform.OS !== "android") return;
+    const sub = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => {
+        dismiss();
+        return true;
+      },
+    );
+    return () => sub.remove();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mounted]);
+
   const panGesture = Gesture.Pan()
     .onUpdate((e) => {
       if (e.translationY > 0) {
@@ -145,22 +239,25 @@ export function SmoothSheet({
     });
 
   const sheetStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
+    transform: [
+      {
+        translateY: translateY.value - keyboardHeight.value,
+      },
+    ],
   }));
 
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: backdropOpacity.value,
   }));
 
+  if (!mounted) return null;
+
   return (
-    <Modal
-      visible={modalVisible}
-      transparent
-      animationType="none"
-      statusBarTranslucent
-      onRequestClose={dismiss}
-    >
-      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+    <SheetPortal>
+      <View
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
         {/* Backdrop */}
         <Animated.View
           style={[
@@ -169,7 +266,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,32 +282,33 @@ 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}>
             <View style={styles.handleArea}>
               <View
-                style={[styles.handle, { backgroundColor: handleColor }]}
+                style={[
+                  styles.handle,
+                  { backgroundColor: handleColor },
+                ]}
               />
             </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>
+      </View>
+    </SheetPortal>
   );
 }
 

package/src/index.ts

@@ -1,2 +1,6 @@
+export { SheetHost } from "./SheetHost";
+export type {
+  SmoothSheetProps,
+  SpringConfig,
+} from "./SmoothSheet";
 export { SmoothSheet } from "./SmoothSheet";
-export type { SmoothSheetProps, SpringConfig } from "./SmoothSheet";