insyd-bottom-sheet 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "insyd-bottom-sheet",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "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",

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,6 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 import {
-  Modal,
+  BackHandler,
+  Keyboard,
+  Platform,
   Pressable,
   StyleSheet,
   useWindowDimensions,
@@ -9,19 +12,22 @@ import {
 import {
   Gesture,
   GestureDetector,
-  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 import Animated, {
-  KeyboardState,
   runOnJS,
-  useAnimatedKeyboard,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from "react-native-reanimated";
 
-const DEFAULT_SPRING = { damping: 28, stiffness: 160, mass: 0.9 };
+import { SheetPortal } from "./SheetHost";
+
+const DEFAULT_SPRING = {
+  damping: 28,
+  stiffness: 160,
+  mass: 0.9,
+};
 
 export interface SpringConfig {
   damping?: number;
@@ -116,30 +122,71 @@ export function SmoothSheet({
   // 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();
+  // 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) {
       isClosing.current = false;
-      setModalVisible(true);
+      setMounted(true);
       translateY.value = withSpring(0, spring);
-      backdropOpacity.value = withTiming(1, { duration: 250 });
+      backdropOpacity.value = withTiming(1, {
+        duration: 250,
+      });
     } else {
       translateY.value = withSpring(windowHeight, spring);
-      backdropOpacity.value = withTiming(0, { duration: 200 }, (finished) => {
-        if (finished) runOnJS(setModalVisible)(false);
-      });
+      backdropOpacity.value = withTiming(
+        0,
+        { duration: 200 },
+        (finished) => {
+          if (finished) runOnJS(setMounted)(false);
+        },
+      );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isVisible]);
@@ -148,14 +195,32 @@ export function SmoothSheet({
     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)();
-      }
-    });
+    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) {
@@ -173,32 +238,27 @@ export function SmoothSheet({
       }
     });
 
-  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 }],
-    };
-  });
+  // Keyboard avoidance grows the sheet (animated bottom padding) instead of
+  // translating it — translating lifts the sheet's bottom edge off the screen
+  // floor, exposing a keyboard-height strip of backdrop behind the keyboard.
+  // Growing keeps the sheet anchored so its background fills that strip.
+  const sheetStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    paddingBottom: bottomInset + keyboardHeight.value,
+  }));
 
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: backdropOpacity.value,
   }));
 
+  if (!mounted) return null;
+
   return (
-    <Modal
-      visible={modalVisible}
-      transparent
-      animationType="none"
-      statusBarTranslucent
-      navigationBarTranslucent
-      onRequestClose={dismiss}
-    >
-      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+    <SheetPortal>
+      <View
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
         {/* Backdrop */}
         <Animated.View
           style={[
@@ -225,7 +285,8 @@ export function SmoothSheet({
               backgroundColor,
               minHeight: windowHeight * minHeightFraction,
               maxHeight: windowHeight * maxHeightFraction,
-              paddingBottom: bottomInset,
+              // paddingBottom lives in sheetStyle so it can grow with the
+              // keyboard.
             },
             sheetStyle,
           ]}
@@ -236,7 +297,10 @@ export function SmoothSheet({
           <GestureDetector gesture={panGesture}>
             <View style={styles.handleArea}>
               <View
-                style={[styles.handle, { backgroundColor: handleColor }]}
+                style={[
+                  styles.handle,
+                  { backgroundColor: handleColor },
+                ]}
               />
             </View>
           </GestureDetector>
@@ -245,8 +309,8 @@ export function SmoothSheet({
               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";