@mrmeg/expo-ui 0.6.0 → 0.7.0

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.0",
+  "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": {