@mrmeg/expo-ui 0.6.0 → 0.7.0

package/dist/components/TextInput.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { type ReactNode, type Ref } from "react";
 import { TextInput as RNTextInput, ViewStyle, TextStyle, TextInputProps, StyleProp } from "react-native";
 /**
  * Size variants for TextInput
@@ -9,6 +9,10 @@ export type TextInputSize = "sm" | "md" | "lg";
  */
 export type TextInputVariant = "outline" | "filled" | "underlined";
 interface TextInputCustomProps extends TextInputProps {
+    /**
+     * Forwarded ref to the underlying RNTextInput element.
+     */
+    ref?: Ref<RNTextInput>;
     /**
      * Visual variant
      * @default "outline"
@@ -116,5 +120,5 @@ interface TextInputCustomProps extends TextInputProps {
  * />
  * ```
  */
-export declare const TextInput: React.ForwardRefExoticComponent<TextInputCustomProps & React.RefAttributes<RNTextInput>>;
+export declare function TextInput({ variant, size, label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable, ref, ...rest }: TextInputCustomProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
@@ -70,7 +70,7 @@ const SIZE_CONFIGS = {
  * />
  * ```
  */
-export const TextInput = React.forwardRef(({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ...rest }, ref) => {
+export function TextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
     const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     const styles = useMemo(() => createStyles(theme, variant, size), [theme, variant, size]);
     const [focused, setFocused] = useState(false);
@@ -116,18 +116,18 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
         ? "#1f2937"
         : getContrastingColor(backgroundColor === "transparent" ? theme.colors.background : backgroundColor, theme.colors.text, palette.white);
     const shouldScroll = multiline && rest.scrollEnabled !== false && contentHeight > 100;
-    const handleFocus = (e) => {
+    const showInputFocusRing = (e) => {
         setFocused(true);
         onFocus?.(e);
     };
-    const handleBlur = (e) => {
+    const hideInputFocusRing = (e) => {
         setFocused(false);
         onBlur?.(e);
     };
     const togglePasswordVisible = () => {
         setPasswordVisible(v => !v);
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [styles.wrapper, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: handleFocus, onBlur: handleBlur, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [styles.wrapper, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: showInputFocusRing, onBlur: hideInputFocusRing, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
                             styles.input,
                             {
                                 backgroundColor,
@@ -156,8 +156,7 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
                     styles.helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
-});
-TextInput.displayName = "TextInput";
+}
 const createStyles = (theme, variant, size) => StyleSheet.create({
     wrapper: {
         width: "100%",

package/dist/components/Toggle.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TogglePrimitive from "@rn-primitives/toggle";
@@ -102,15 +102,11 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
     const isDisabled = props.disabled || loading;
     const children = props.children;
     return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: spacing.sm,
+                    ...styles.root,
                     height: sizeConfig.height,
                     minWidth: sizeConfig.minWidth,
                     paddingHorizontal: iconOnly ? sizeConfig.height / 2 - sizeConfig.iconSize / 2 : sizeConfig.paddingHorizontal,
                     borderRadius: getBorderRadius(),
-                    borderWidth: 1,
                     // Base variant styles
                     ...(variant === "default" && !props.pressed && {
                         backgroundColor: "transparent",
@@ -146,7 +142,16 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                 }, children: loading ? (_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })) : typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
 }
 function ToggleIcon({ name, size, color }) {
-    const contextColor = React.useContext(TextColorContext);
+    const contextColor = React.use(TextColorContext);
     return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
 }
+const styles = StyleSheet.create({
+    root: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.sm,
+        borderWidth: 1,
+    },
+});
 export { Toggle, ToggleIcon };

package/dist/components/ToggleGroup.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
 import * as React from "react";
-import { Platform } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 const DEFAULT_HIT_SLOP = 8;
 // Size configurations (same as Toggle)
 const TOGGLE_GROUP_SIZES = {
@@ -33,7 +33,7 @@ const TOGGLE_GROUP_SIZES = {
 };
 const ToggleGroupContext = React.createContext(null);
 function useToggleGroupContext() {
-    const context = React.useContext(ToggleGroupContext);
+    const context = React.use(ToggleGroupContext);
     if (context === null) {
         throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
     }
@@ -65,6 +65,7 @@ function useToggleGroupContext() {
  */
 function ToggleGroup({ variant = "default", size = "default", children, ...props }) {
     const { theme } = useTheme();
+    const contextValue = React.useMemo(() => ({ variant, size }), [variant, size]);
     // Count valid children for first/last detection
     const childrenArray = React.Children.toArray(children);
     const validChildren = childrenArray.filter((child) => React.isValidElement(child) && child.type === ToggleGroupItem);
@@ -97,7 +98,7 @@ function ToggleGroup({ variant = "default", size = "default", children, ...props
             ...(Platform.OS === "web" && {
                 width: "fit-content",
             }),
-        }, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: enhancedChildren }) }));
+        }, children: _jsx(ToggleGroupContext.Provider, { value: contextValue, children: enhancedChildren }) }));
 }
 /**
  * ToggleGroupItem Component
@@ -124,15 +125,10 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
         ? getContrastingColor(itemBgColor, theme.colors.foreground, theme.colors.background)
         : theme.colors.foreground;
     return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(ToggleGroupPrimitive.Item, { ...props, style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: spacing.sm,
+                    ...styles.item,
                     height: sizeConfig.height,
                     minWidth: sizeConfig.minWidth,
                     paddingHorizontal: sizeConfig.paddingHorizontal,
-                    borderWidth: 1,
-                    flexShrink: 0,
                     // Base variant styles
                     ...(context.variant === "default" && !isSelected && {
                         backgroundColor: "transparent",
@@ -184,7 +180,17 @@ function ToggleGroupItem({ isFirst = false, isLast = false, children, ...props }
                 }, hitSlop: DEFAULT_HIT_SLOP, children: typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }));
 }
 function ToggleGroupIcon({ name, size, color }) {
-    const contextColor = React.useContext(TextColorContext);
+    const contextColor = React.use(TextColorContext);
     return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
 }
+const styles = StyleSheet.create({
+    item: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.sm,
+        borderWidth: 1,
+        flexShrink: 0,
+    },
+});
 export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/dist/components/Tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as TooltipPrimitive from "@rn-primitives/tooltip";

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)
  */