@mrmeg/expo-ui 0.7.1 → 0.7.2

package/dist/components/BottomSheet.js

@@ -40,6 +40,9 @@ import { BottomSheetKeyboardController, useBottomSheetKeyboardAnimation, } from
  */
 // Platform-specific overlay wrapper
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// Floor for the keyboard-avoiding height shrink, so a tall keyboard on a short
+// screen can't collapse the sheet to nothing.
+const MIN_KEYBOARD_SHEET_HEIGHT = 220;
 // ============================================================================
 // Context
 // ============================================================================
@@ -52,19 +55,51 @@ function useBottomSheetContext() {
     return context;
 }
 const DragContext = createContext(null);
-function BottomSheetPanel({ accessibilityViewIsModal, children, panHandlers, sheetStyle, styleOverride, translateY, ...props }) {
+function BottomSheetPanel({ accessibilityViewIsModal, animatedHeight, animatedBottom, children, panHandlers, sheetStyle, styleOverride, translateY, ...props }) {
     return (_jsx(Animated.View, { style: [
             sheetStyle,
+            // Layout overrides (JS-driven) must come after sheetStyle so they win.
+            animatedBottom ? { bottom: animatedBottom } : undefined,
+            animatedHeight ? { height: animatedHeight } : undefined,
+            // Open/close + drag (native-driven) live on transform, a separate node.
             { transform: [{ translateY }] },
             styleOverride && typeof styleOverride !== "function"
                 ? StyleSheet.flatten(styleOverride)
                 : undefined,
         ], accessibilityViewIsModal: accessibilityViewIsModal, ...panHandlers, ...props, children: children }));
 }
+/**
+ * Lifts the sheet above the keyboard while keeping its top edge on-screen.
+ *
+ * The naive approach translates the whole rigid box up by the keyboard height,
+ * which shoves the header (and any inputs near the top) off the top of the
+ * screen on tall sheets. Instead we lift the sheet's bottom to sit just above
+ * the keyboard and shrink its height by the same amount, so the top edge holds
+ * steady. The flex Body soaks up the lost height and scrolls, leaving the
+ * header, focused input, and footer all visible.
+ *
+ * This drives layout props (`bottom`/`height`) with a JS-driven keyboard value,
+ * intentionally separate from the native-driven open/close `translateY` — a
+ * single Animated.Value can't feed both a native transform and a JS layout
+ * prop, but distinct nodes on the same view can.
+ */
 function KeyboardAvoidingBottomSheetPanel(props) {
     const { height: keyboardHeight } = useBottomSheetKeyboardAnimation();
-    const composedTranslateY = useMemo(() => Animated.add(props.translateY, keyboardHeight), [keyboardHeight, props.translateY]);
-    return _jsx(BottomSheetPanel, { ...props, translateY: composedTranslateY });
+    // sheetStyle.height is the resolved max snap height (a number, set by Content).
+    const baseHeight = typeof props.sheetStyle.height === "number" ? props.sheetStyle.height : undefined;
+    const animatedHeight = useMemo(() => {
+        if (baseHeight === undefined)
+            return undefined;
+        // keyboardHeight: 0 (closed) → keyboard px (open). Shrink the sheet by it,
+        // clamped to a usable minimum so it never collapses on short screens.
+        const shrunk = Animated.subtract(baseHeight, keyboardHeight);
+        return shrunk.interpolate({
+            inputRange: [MIN_KEYBOARD_SHEET_HEIGHT, baseHeight],
+            outputRange: [MIN_KEYBOARD_SHEET_HEIGHT, baseHeight],
+            extrapolate: "clamp",
+        });
+    }, [baseHeight, keyboardHeight]);
+    return (_jsx(BottomSheetPanel, { ...props, animatedHeight: animatedHeight, animatedBottom: keyboardHeight }));
 }
 // ============================================================================
 // Utility Functions

package/dist/components/BottomSheetKeyboard.js

@@ -1,10 +1,14 @@
 import { useEffect, useRef } from "react";
 import { Animated, Keyboard, Platform } from "react-native";
+// This value drives layout props (a sheet's `bottom`/`height`), which the
+// native animation driver can't touch — so timings here must stay on the JS
+// driver. It also means the value is a positive keyboard height (0 when
+// hidden), letting consumers both lift and shrink the sheet from one source.
 function animateKeyboardOffset(value, toValue, duration = 180) {
     Animated.timing(value, {
         toValue,
         duration,
-        useNativeDriver: true,
+        useNativeDriver: false,
     }).start();
 }
 export function useBottomSheetKeyboardAnimation() {
@@ -16,7 +20,7 @@ export function useBottomSheetKeyboardAnimation() {
         const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
         const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
         const showSubscription = Keyboard.addListener(showEvent, (event) => {
-            animateKeyboardOffset(keyboardHeight, -event.endCoordinates.height, event.duration || 180);
+            animateKeyboardOffset(keyboardHeight, event.endCoordinates.height, event.duration || 180);
         });
         const hideSubscription = Keyboard.addListener(hideEvent, (event) => {
             animateKeyboardOffset(keyboardHeight, 0, event.duration || 160);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -24,7 +24,8 @@
   "homepage": "https://github.com/mrmeg/expo-template/tree/main/packages/ui",
   "type": "module",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",