@mrmeg/expo-ui 0.6.1 → 0.7.0

package/dist/hooks/useDimensions.js

@@ -1,5 +1,5 @@
-import { useContext, useEffect, useState } from "react";
-import { Dimensions, Platform } from "react-native";
+import { use, useEffect, useState } from "react";
+import { Platform, useWindowDimensions } from "react-native";
 import { SsrViewportContext, SSR_VIEWPORT_DEFAULT_HEIGHT, } from "../state/SsrViewportContext.js";
 export const SCREEN_SIZES = {
     SMALL: 768,
@@ -50,35 +50,34 @@ function writeViewportCookie(width) {
 */
 export const useDimensions = () => {
     const isWeb = Platform.OS === "web";
-    const ssrWidth = useContext(SsrViewportContext);
+    const ssrWidth = use(SsrViewportContext);
+    // Native reads come from useWindowDimensions, which subscribes to rotation /
+    // split-screen / resize and tears the listener down for us — no manual
+    // Dimensions.addEventListener to leak. On web we ignore it and drive layout
+    // from the SSR context + the resize listener below so hydration stays exact.
+    const native = useWindowDimensions();
     // Lazy initializer: both server and client first render compute identical
     // flags from the context value, so hydration matches.
     const [dimensions, setDimensions] = useState(() => calculateDimensionFlags(ssrWidth, SSR_VIEWPORT_DEFAULT_HEIGHT));
+    // Web: read the real viewport after mount and follow resize events. Keeping
+    // this in an effect (not render) preserves the SSR-matched first paint.
     useEffect(() => {
-        const initialDimensions = isWeb
-            ? { width: window.innerWidth, height: window.innerHeight }
-            : Dimensions.get("window");
-        const updateDimensions = (width, height) => {
-            setDimensions(calculateDimensionFlags(width, height));
+        if (!isWeb)
+            return;
+        const syncFromWindow = () => {
+            setDimensions(calculateDimensionFlags(window.innerWidth, window.innerHeight));
+            writeViewportCookie(window.innerWidth);
+        };
+        syncFromWindow();
+        window.addEventListener("resize", syncFromWindow);
+        return () => {
+            window.removeEventListener("resize", syncFromWindow);
         };
-        updateDimensions(initialDimensions.width, initialDimensions.height);
-        if (isWeb) {
-            writeViewportCookie(initialDimensions.width);
-            const handleResize = () => {
-                updateDimensions(window.innerWidth, window.innerHeight);
-                writeViewportCookie(window.innerWidth);
-            };
-            window.addEventListener("resize", handleResize);
-            return () => {
-                window.removeEventListener("resize", handleResize);
-            };
-        }
-        else {
-            const onChange = ({ window }) => {
-                updateDimensions(window.width, window.height);
-            };
-            Dimensions.addEventListener("change", onChange);
-        }
     }, [isWeb]);
+    // Native: useWindowDimensions already reacts to changes; mirror it into our
+    // enriched flags. (On web `native` is unused — the effect above wins.)
+    if (!isWeb) {
+        return calculateDimensionFlags(native.width, native.height);
+    }
     return dimensions;
 };

package/dist/hooks/useReduceMotion.d.ts

@@ -1,5 +1,9 @@
 /**
  * Hook that returns whether the user prefers reduced motion.
- * Uses a shared singleton listener so multiple consumers don't create duplicate subscriptions.
+ *
+ * Backed by useSyncExternalStore so the value is read straight from a shared
+ * OS subscription — no mount-time setState, no polling, and a clean SSR
+ * snapshot that hydrates without a mismatch. A single singleton listener is
+ * shared across all consumers.
  */
 export declare function useReducedMotion(): boolean;

package/dist/hooks/useReduceMotion.js

@@ -1,64 +1,69 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { AccessibilityInfo, Platform } from "react-native";
 let sharedValue = false;
-let listenerCount = 0;
+const listeners = new Set();
 let subscription = null;
+function notify() {
+    for (const listener of listeners)
+        listener();
+}
+function setSharedValue(next) {
+    if (next === sharedValue)
+        return;
+    sharedValue = next;
+    notify();
+}
 function startListening() {
     if (Platform.OS === "web") {
         // On web, use the media query
         if (typeof window !== "undefined" && window.matchMedia) {
             const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-            sharedValue = mq.matches;
-            const handler = (e) => { sharedValue = e.matches; };
+            setSharedValue(mq.matches);
+            const handler = (e) => setSharedValue(e.matches);
             mq.addEventListener("change", handler);
             subscription = { remove: () => mq.removeEventListener("change", handler) };
         }
         return;
     }
-    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
-        sharedValue = enabled;
-    });
-    const sub = AccessibilityInfo.addEventListener("reduceMotionChanged", (enabled) => {
-        sharedValue = enabled;
-    });
-    subscription = sub;
+    AccessibilityInfo.isReduceMotionEnabled().then(setSharedValue);
+    subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setSharedValue);
 }
 function stopListening() {
     subscription?.remove();
     subscription = null;
 }
+// useSyncExternalStore contract: register the consumer, lazily starting the
+// shared OS subscription on the first listener and tearing it down after the
+// last unmounts.
+function subscribe(listener) {
+    listeners.add(listener);
+    if (listeners.size === 1) {
+        startListening();
+    }
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            stopListening();
+        }
+    };
+}
+function getSnapshot() {
+    return sharedValue;
+}
+// The server can't know the user's accessibility preference; default to
+// "motion allowed" so SSR and the first client render agree (the real value
+// arrives via subscribe() after hydration).
+function getServerSnapshot() {
+    return false;
+}
 /**
  * Hook that returns whether the user prefers reduced motion.
- * Uses a shared singleton listener so multiple consumers don't create duplicate subscriptions.
+ *
+ * Backed by useSyncExternalStore so the value is read straight from a shared
+ * OS subscription — no mount-time setState, no polling, and a clean SSR
+ * snapshot that hydrates without a mismatch. A single singleton listener is
+ * shared across all consumers.
  */
 export function useReducedMotion() {
-    const [reduceMotion, setReduceMotion] = useState(sharedValue);
-    useEffect(() => {
-        listenerCount++;
-        if (listenerCount === 1) {
-            startListening();
-        }
-        // Re-read current value on mount (may have changed since last render)
-        if (Platform.OS === "web") {
-            if (typeof window !== "undefined" && window.matchMedia) {
-                const current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-                setReduceMotion(current);
-            }
-        }
-        else {
-            AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
-        }
-        // Poll the shared value to pick up changes (lightweight — only boolean comparison)
-        const interval = setInterval(() => {
-            setReduceMotion((prev) => (prev !== sharedValue ? sharedValue : prev));
-        }, 500);
-        return () => {
-            clearInterval(interval);
-            listenerCount--;
-            if (listenerCount === 0) {
-                stopListening();
-            }
-        };
-    }, []);
-    return reduceMotion;
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }

package/dist/hooks/useResources.js

@@ -40,6 +40,7 @@ export const useResources = () => {
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
+        let timeoutId;
         async function loadResourcesAndDataAsync() {
             try {
                 const fontPromise = Promise.all([
@@ -47,7 +48,9 @@ export const useResources = () => {
                     ensureWebFontStylesheet(),
                 ]);
                 // Timeout after 5 seconds — proceed with system fallback fonts
-                const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error("Font loading timed out after 5s")), 5000));
+                const timeoutPromise = new Promise((_, reject) => {
+                    timeoutId = setTimeout(() => reject(new Error("Font loading timed out after 5s")), 5000);
+                });
                 await Promise.race([fontPromise, timeoutPromise]);
             }
             catch (e) {
@@ -56,10 +59,12 @@ export const useResources = () => {
                 setError(error);
             }
             finally {
+                clearTimeout(timeoutId);
                 setLoaded(true);
             }
         }
         loadResourcesAndDataAsync();
+        return () => clearTimeout(timeoutId);
     }, []);
     return { loaded, error };
 };

package/dist/hooks/useScalePress.d.ts

@@ -1,3 +1,4 @@
+import { Animated } from "react-native";
 interface ScalePressOptions {
     /**
      * Scale value when pressed (1 = no change, 0.97 = subtle, 0.93 = more pronounced)
@@ -26,7 +27,7 @@ interface ScalePressOptions {
     disabled?: boolean;
 }
 /**
- * Hook for press-feedback scale animation using Reanimated.
+ * Hook for press-feedback scale animation using React Native Animated.
  *
  * Returns an animated style and onPressIn/onPressOut handlers to spread onto a Pressable.
  * Respects reduced motion preferences.
@@ -43,15 +44,15 @@ interface ScalePressOptions {
  * ```
  */
 export declare function useScalePress(options?: ScalePressOptions): {
-    animatedStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
+    animatedStyle: {
         transform: {
-            scale: number;
+            scale: Animated.Value;
         }[];
-    }>;
+    };
     pressHandlers: {
         onPressIn: () => void;
         onPressOut: () => void;
     };
-    scale: import("react-native-reanimated").SharedValue<number>;
+    scale: Animated.Value;
 };
 export {};

package/dist/hooks/useScalePress.js

@@ -1,8 +1,9 @@
-import { useCallback } from "react";
-import { useSharedValue, useAnimatedStyle, withSpring, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { useCallback, useMemo, useRef } from "react";
+import { Animated } from "react-native";
 import { hapticLight } from "../lib/haptics.js";
+import { useReducedMotion } from "./useReduceMotion.js";
 /**
- * Hook for press-feedback scale animation using Reanimated.
+ * Hook for press-feedback scale animation using React Native Animated.
  *
  * Returns an animated style and onPressIn/onPressOut handlers to spread onto a Pressable.
  * Respects reduced motion preferences.
@@ -21,32 +22,35 @@ import { hapticLight } from "../lib/haptics.js";
 export function useScalePress(options = {}) {
     const { scaleTo = 0.97, haptic = true, damping = 20, stiffness = 300, disabled = false, } = options;
     const reduceMotion = useReducedMotion();
-    const scale = useSharedValue(1);
+    const scale = useRef(new Animated.Value(1)).current;
+    const animateTo = useCallback((toValue) => {
+        scale.stopAnimation();
+        if (reduceMotion) {
+            scale.setValue(toValue);
+            return;
+        }
+        Animated.spring(scale, {
+            toValue,
+            damping,
+            stiffness,
+            useNativeDriver: true,
+        }).start();
+    }, [damping, reduceMotion, scale, stiffness]);
     const onPressIn = useCallback(() => {
         if (disabled)
             return;
         if (haptic)
             hapticLight();
-        if (reduceMotion) {
-            scale.value = withTiming(scaleTo, { duration: 0 });
-        }
-        else {
-            scale.value = withSpring(scaleTo, { damping, stiffness });
-        }
-    }, [disabled, haptic, reduceMotion, scale, scaleTo, damping, stiffness]);
+        animateTo(scaleTo);
+    }, [animateTo, disabled, haptic, scaleTo]);
     const onPressOut = useCallback(() => {
         if (disabled)
             return;
-        if (reduceMotion) {
-            scale.value = withTiming(1, { duration: 0 });
-        }
-        else {
-            scale.value = withSpring(1, { damping, stiffness });
-        }
-    }, [disabled, reduceMotion, scale, damping, stiffness]);
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: scale.value }],
-    }));
+        animateTo(1);
+    }, [animateTo, disabled]);
+    const animatedStyle = useMemo(() => ({
+        transform: [{ scale }],
+    }), [scale]);
     return {
         animatedStyle,
         pressHandlers: { onPressIn, onPressOut },

package/dist/hooks/useStaggeredEntrance.d.ts

@@ -1,3 +1,4 @@
+import { Animated } from "react-native";
 type EntranceType = "fade" | "fadeSlideUp" | "fadeSlideDown" | "scale";
 interface StaggeredEntranceOptions {
     /**
@@ -28,7 +29,7 @@ interface StaggeredEntranceOptions {
     initialScale?: number;
 }
 /**
- * Hook for entrance animations with stagger support using Reanimated.
+ * Hook for entrance animations with stagger support using React Native Animated.
  *
  * Returns an animated style to apply to an Animated.View.
  * Respects reduced motion preferences.
@@ -46,20 +47,20 @@ interface StaggeredEntranceOptions {
  * })}
  * ```
  */
-export declare function useStaggeredEntrance(options?: StaggeredEntranceOptions): import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
-    opacity: number;
+export declare function useStaggeredEntrance(options?: StaggeredEntranceOptions): {
+    opacity: Animated.Value;
     transform?: undefined;
 } | {
-    opacity: number;
+    opacity: Animated.Value;
     transform: {
-        translateY: number;
+        translateY: Animated.Value;
     }[];
 } | {
-    opacity: number;
+    opacity: Animated.Value;
     transform: {
-        scale: number;
+        scale: Animated.Value;
     }[];
-}>;
+};
 /**
  * Convenience constant: default stagger delay between items (ms)
  */

package/dist/hooks/useStaggeredEntrance.js

@@ -1,7 +1,8 @@
-import { useEffect } from "react";
-import { useSharedValue, useAnimatedStyle, withTiming, withSpring, withDelay, useReducedMotion, Easing, } from "react-native-reanimated";
+import { useEffect, useMemo, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import { useReducedMotion } from "./useReduceMotion.js";
 /**
- * Hook for entrance animations with stagger support using Reanimated.
+ * Hook for entrance animations with stagger support using React Native Animated.
  *
  * Returns an animated style to apply to an Animated.View.
  * Respects reduced motion preferences.
@@ -22,50 +23,76 @@ import { useSharedValue, useAnimatedStyle, withTiming, withSpring, withDelay, us
 export function useStaggeredEntrance(options = {}) {
     const { type = "fadeSlideUp", delay = 0, duration = 200, slideDistance = 8, initialScale = 0.95, } = options;
     const reduceMotion = useReducedMotion();
-    const opacity = useSharedValue(reduceMotion ? 1 : 0);
-    const translateY = useSharedValue(reduceMotion
+    const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;
+    const translateY = useRef(new Animated.Value(reduceMotion
         ? 0
         : type === "fadeSlideUp"
             ? slideDistance
             : type === "fadeSlideDown"
                 ? -slideDistance
-                : 0);
-    const scale = useSharedValue(reduceMotion ? 1 : type === "scale" ? initialScale : 1);
+                : 0)).current;
+    const scale = useRef(new Animated.Value(reduceMotion ? 1 : type === "scale" ? initialScale : 1)).current;
     useEffect(() => {
         if (reduceMotion) {
-            opacity.value = 1;
-            translateY.value = 0;
-            scale.value = 1;
+            opacity.setValue(1);
+            translateY.setValue(0);
+            scale.setValue(1);
             return;
         }
+        opacity.setValue(0);
+        translateY.setValue(type === "fadeSlideUp"
+            ? slideDistance
+            : type === "fadeSlideDown"
+                ? -slideDistance
+                : 0);
+        scale.setValue(type === "scale" ? initialScale : 1);
         const timingConfig = {
             duration,
             easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
         };
-        opacity.value = withDelay(delay, withTiming(1, timingConfig));
+        const animations = [
+            Animated.timing(opacity, {
+                toValue: 1,
+                ...timingConfig,
+            }),
+        ];
         if (type === "fadeSlideUp" || type === "fadeSlideDown") {
-            translateY.value = withDelay(delay, withTiming(0, timingConfig));
+            animations.push(Animated.timing(translateY, {
+                toValue: 0,
+                ...timingConfig,
+            }));
         }
         if (type === "scale") {
-            scale.value = withDelay(delay, withSpring(1, { damping: 14, stiffness: 250 }));
+            animations.push(Animated.spring(scale, {
+                toValue: 1,
+                damping: 14,
+                stiffness: 250,
+                useNativeDriver: true,
+            }));
         }
-    }, [reduceMotion]);
-    const animatedStyle = useAnimatedStyle(() => {
+        const animation = delay > 0
+            ? Animated.sequence([Animated.delay(delay), Animated.parallel(animations)])
+            : Animated.parallel(animations);
+        animation.start();
+        return () => animation.stop();
+    }, [delay, duration, initialScale, opacity, reduceMotion, scale, slideDistance, translateY, type]);
+    const animatedStyle = useMemo(() => {
         if (type === "fade") {
-            return { opacity: opacity.value };
+            return { opacity };
         }
         if (type === "fadeSlideUp" || type === "fadeSlideDown") {
             return {
-                opacity: opacity.value,
-                transform: [{ translateY: translateY.value }],
+                opacity,
+                transform: [{ translateY }],
             };
         }
         // scale
         return {
-            opacity: opacity.value,
-            transform: [{ scale: scale.value }],
+            opacity,
+            transform: [{ scale }],
         };
-    });
+    }, [opacity, scale, translateY, type]);
     return animatedStyle;
 }
 /**

package/dist/state/themeColorScope.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 /**
  * Per-subtree color overrides, layered on top of the global theme by `useTheme`.
  *
@@ -13,7 +13,7 @@ import { createContext, useContext, useMemo } from "react";
 const ThemeColorScopeContext = createContext(null);
 /** Read the active scoped override (null when not inside a scope). */
 export function useThemeColorScope() {
-    return useContext(ThemeColorScopeContext);
+    return use(ThemeColorScopeContext);
 }
 // Nested scopes layer: the inner scope's keys win, the outer scope's fill in.
 function mergeScopes(parent, next) {
@@ -25,7 +25,7 @@ function mergeScopes(parent, next) {
     };
 }
 export function ThemeColorScope({ colors, children, }) {
-    const parent = useContext(ThemeColorScopeContext);
+    const parent = use(ThemeColorScopeContext);
     const value = useMemo(() => mergeScopes(parent, colors), [parent, colors]);
     return (_jsx(ThemeColorScopeContext.Provider, { value: value, children: children }));
 }

package/llms-full.md

@@ -36,10 +36,9 @@ the root when the app uses package feedback or overlay components.
 `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`,
 `Tooltip`, or `globalUIStore` notifications.
 
-On native, `BottomSheet.Content` composes its sheet transform with
-`react-native-keyboard-controller` keyboard animation values. Mount that
-library's `KeyboardProvider` near the app root before using bottom sheets with
-text inputs, or pass `avoidKeyboard={false}` for sheets that should not move.
+On native, `BottomSheet.Content` composes its sheet transform with React Native
+keyboard event values. Pass `avoidKeyboard={false}` for sheets that should not
+move.
 
 i18n is optional. Plain children and `text` props work without `i18next` or
 `react-i18next`. Use `configureExpoUiI18n()` only when a consuming app wants
@@ -87,7 +86,7 @@ Use this catalog before creating a new app-local primitive.
 | `Alert` | `@mrmeg/expo-ui/components` | Cross-platform imperative alerts | Avoid direct `window.alert` and duplicated native/web branching. |
 | `AnimatedView` | `@mrmeg/expo-ui/components` | Entrance and visibility animation | Keep simple reveal effects in the package wrapper. |
 | `Badge` | `@mrmeg/expo-ui/components` | Short status labels | Prefer over custom pill views. |
-| `BottomSheet` | `@mrmeg/expo-ui/components` | Mobile-first modal sheets | Requires root `UIProvider`; native text-input sheets also require `KeyboardProvider`. |
+| `BottomSheet` | `@mrmeg/expo-ui/components` | Mobile-first modal sheets | Requires root `UIProvider`; text-input sheets can disable `avoidKeyboard`. |
 | `Button` | `@mrmeg/expo-ui/components` | Commands and CTAs | Use `preset`, not `variant`; visible heights are compact. |
 | `Card` | `@mrmeg/expo-ui/components` | Individual framed content groups | Do not wrap whole page sections in cards. |
 | `Checkbox` | `@mrmeg/expo-ui/components` | Boolean selection in forms or lists | Prefer over custom checkmark controls. |

package/llms.txt

@@ -25,8 +25,8 @@ Call useResources() once near the Expo app root. Mount UIProvider once near the
 root before using package notifications or overlay primitives: Dialog,
 AlertDialog, BottomSheet, Drawer, DropdownMenu, Popover, SelectContent, or
 Tooltip.
-On native, mount react-native-keyboard-controller's KeyboardProvider before
-using BottomSheet.Content with text inputs; avoidKeyboard defaults to true.
+BottomSheet.Content uses React Native keyboard events for text inputs;
+avoidKeyboard defaults to true.
 
 Use useTheme(), useStyles(), semantic tokens, StyledText, and package controls.
 Do not add app-local Appearance or matchMedia listeners for package theme sync.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -109,12 +109,9 @@
     "react": ">=19.2.0 <20.0.0",
     "react-native": ">=0.83.0 <0.86.0",
     "react-native-gesture-handler": ">=2.30.0 <2.32.0",
-    "react-native-keyboard-controller": ">=1.20.0 <2.0.0",
-    "react-native-reanimated": ">=4.2.0 <5.0.0",
     "react-native-safe-area-context": ">=5.6.0 <6.0.0",
     "react-native-screens": ">=4.23.0 <5.0.0",
     "react-native-web": ">=0.21.0 <0.22.0",
-    "react-native-worklets": ">=0.7.0 <0.9.0",
     "zustand": ">=5.0.0 <6.0.0"
   },
   "devDependencies": {