@webority-technologies/mobile 0.0.8 → 0.0.9

package/lib/module/components/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -46,7 +46,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
   const fillColor = toneColor(theme, tone);
   const isActive = checked || indeterminate;
-  const progress = useRef(new Animated.Value(isActive ? 1 : 0)).current;
+  const progress = useRef(createAnimatedValue(isActive ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
       toValue: isActive ? 1 : 0,

package/lib/module/components/DatePicker/DatePicker.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DAY_MS = 24 * 60 * 60 * 1000;
@@ -106,14 +106,14 @@ const DatePicker = props => {
   const [viewMode, setViewMode] = useState('days');
 
   // Animations
-  const backdrop = useRef(new Animated.Value(0)).current;
-  const sheet = useRef(new Animated.Value(0)).current;
-  const monthSlide = useRef(new Animated.Value(0)).current;
-  const monthFade = useRef(new Animated.Value(1)).current;
-  const selectScale = useRef(new Animated.Value(1)).current;
-  const viewFade = useRef(new Animated.Value(1)).current;
-  const viewScale = useRef(new Animated.Value(1)).current;
-  const headerScale = useRef(new Animated.Value(1)).current;
+  const backdrop = useRef(createAnimatedValue(0)).current;
+  const sheet = useRef(createAnimatedValue(0)).current;
+  const monthSlide = useRef(createAnimatedValue(0)).current;
+  const monthFade = useRef(createAnimatedValue(1)).current;
+  const selectScale = useRef(createAnimatedValue(1)).current;
+  const viewFade = useRef(createAnimatedValue(1)).current;
+  const viewScale = useRef(createAnimatedValue(1)).current;
+  const headerScale = useRef(createAnimatedValue(1)).current;
 
   // Sync anchor / pending when value prop changes.
   useEffect(() => {

package/lib/module/components/DateRangePicker/DateRangePicker.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DAY_MS = 24 * 60 * 60 * 1000;
@@ -91,10 +91,10 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const [pendingEnd, setPendingEnd] = useState(value.end ? startOfDay(value.end) : null);
 
   // Animations
-  const backdrop = useRef(new Animated.Value(0)).current;
-  const sheet = useRef(new Animated.Value(0)).current;
-  const monthSlide = useRef(new Animated.Value(0)).current;
-  const monthFade = useRef(new Animated.Value(1)).current;
+  const backdrop = useRef(createAnimatedValue(0)).current;
+  const sheet = useRef(createAnimatedValue(0)).current;
+  const monthSlide = useRef(createAnimatedValue(0)).current;
+  const monthFade = useRef(createAnimatedValue(1)).current;
 
   // Sync external value -> pending state when it changes.
   useEffect(() => {

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { AppIcon } from "../AppIcon/index.js";
@@ -78,7 +78,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   } = usePressAnimation({
     enabled: !disabled
   });
-  const hideAnim = useRef(new Animated.Value(0)).current;
+  const hideAnim = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     if (!hideOnScroll) {
       hideAnim.setValue(0);
@@ -234,7 +234,7 @@ const FloatingActionButtonGroup = props => {
   const isOpen = isControlled ? controlledOpen : internalOpen;
 
   // Animation drivers
-  const progress = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+  const progress = useRef(createAnimatedValue(isOpen ? 1 : 0)).current;
   const itemAnims = useRef([]);
 
   // Resize per-item anim array if action count changes

package/lib/module/components/FormField/FormField.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -21,7 +21,7 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const errorOpacity = useRef(new Animated.Value(error ? 1 : 0)).current;
+  const errorOpacity = useRef(createAnimatedValue(error ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(errorOpacity, {
       toValue: error ? 1 : 0,

package/lib/module/components/Input/Input.js

@@ -5,7 +5,7 @@ import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from '
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - react-native-vector-icons ships no bundled types in this version
 import Feather from 'react-native-vector-icons/Feather';
-import { fontFor, useTheme } from "../../theme/index.js";
+import { createAnimatedValue, fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -82,11 +82,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   const showFloatingLabel = Boolean(label) && !multiline;
 
   // Animations
-  const focusAnim = useRef(new Animated.Value(0)).current; // 0 -> blurred, 1 -> focused
-  const errorAnim = useRef(new Animated.Value(0)).current; // 0 -> no error, 1 -> error
-  const labelAnim = useRef(new Animated.Value(shouldFloat ? 1 : 0)).current;
-  const shakeAnim = useRef(new Animated.Value(0)).current;
-  const messageAnim = useRef(new Animated.Value(hasError || helperText ? 1 : 0)).current;
+  const focusAnim = useRef(createAnimatedValue(0)).current;
+  const errorAnim = useRef(createAnimatedValue(0)).current;
+  const labelAnim = useRef(createAnimatedValue(shouldFloat ? 1 : 0)).current;
+  const shakeAnim = useRef(createAnimatedValue(0)).current;
+  const messageAnim = useRef(createAnimatedValue(hasError || helperText ? 1 : 0)).current;
 
   // Focus border animation
   useEffect(() => {

package/lib/module/components/Modal/Modal.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { AccessibilityInfo, Animated, Dimensions, findNodeHandle, Modal as RNModal, Pressable, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Modal = /*#__PURE__*/forwardRef((props, ref) => {
@@ -24,10 +24,10 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const duration = animationDuration ?? theme.motion.duration.normal;
   const screenHeight = Dimensions.get('window').height;
-  const backdropAnim = useRef(new Animated.Value(0)).current;
-  const scaleAnim = useRef(new Animated.Value(0.9)).current;
-  const opacityAnim = useRef(new Animated.Value(0)).current;
-  const translateYAnim = useRef(new Animated.Value(screenHeight)).current;
+  const backdropAnim = useRef(createAnimatedValue(0)).current;
+  const scaleAnim = useRef(createAnimatedValue(0.9)).current;
+  const opacityAnim = useRef(createAnimatedValue(0)).current;
+  const translateYAnim = useRef(createAnimatedValue(screenHeight)).current;
   const containerRef = useRef(null);
   const wasVisibleRef = useRef(false);
   const styles = useMemo(() => buildStyles(theme), [theme]);

package/lib/module/components/OTPInput/OTPInput.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -59,7 +59,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   const inputsRef = useRef([]);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const previousErrorRef = useRef(null);
-  const shake = useRef(new Animated.Value(0)).current;
+  const shake = useRef(createAnimatedValue(0)).current;
   const underlines = useRef(Array.from({
     length
   }, () => new Animated.Value(0))).current;

package/lib/module/components/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const toneColor = (theme, tone) => {
   switch (tone) {
@@ -40,8 +40,8 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
   const clamped = clampProgress(progress);
-  const fillAnim = useRef(new Animated.Value(clamped)).current;
-  const loopAnim = useRef(new Animated.Value(0)).current;
+  const fillAnim = useRef(createAnimatedValue(clamped)).current;
+  const loopAnim = useRef(createAnimatedValue(0)).current;
   const widthRef = useRef(0);
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const resolvedRadius = radius ?? theme.radius.full;

package/lib/module/components/Radio/Radio.js

@@ -2,7 +2,7 @@
 
 import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const RadioGroupContext = /*#__PURE__*/createContext(null);
@@ -61,7 +61,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
   const radioBorderWidth = theme.components.radio?.borderWidth ?? 1.5;
   const radioLabelGap = theme.components.radio?.labelGap ?? 10;
-  const progress = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const progress = useRef(createAnimatedValue(selected ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
       toValue: selected ? 1 : 0,

package/lib/module/components/SearchBar/SearchBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { AppIcon } from "../AppIcon/index.js";
@@ -62,7 +62,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
   const debouncedValue = useDebounce(internalValue, debounceMs ?? 0);
-  const cancelAnim = useRef(new Animated.Value(0)).current;
+  const cancelAnim = useRef(createAnimatedValue(0)).current;
 
   // Keep internal value in sync with controlled value when debouncing.
   useEffect(() => {

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -10,7 +10,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -47,8 +47,8 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
   const trackWidthRef = useRef(0);
-  const thumbTranslateX = useRef(new Animated.Value(0)).current;
-  const thumbWidth = useRef(new Animated.Value(0)).current;
+  const thumbTranslateX = useRef(createAnimatedValue(0)).current;
+  const thumbWidth = useRef(createAnimatedValue(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
   const animateThumb = useCallback((index, totalWidth) => {
     if (totalWidth <= 0 || segments.length === 0) return;

package/lib/module/components/Select/Select.js

@@ -10,7 +10,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Dimensions, Easing, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -64,8 +64,8 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const sheetMaxHeight = Math.round(screenHeight * 0.7);
 
   // Animations: backdrop fade + sheet slide-up.
-  const backdropAnim = useRef(new Animated.Value(0)).current;
-  const sheetAnim = useRef(new Animated.Value(sheetMaxHeight)).current;
+  const backdropAnim = useRef(createAnimatedValue(0)).current;
+  const sheetAnim = useRef(createAnimatedValue(sheetMaxHeight)).current;
   useEffect(() => {
     if (open) {
       Animated.parallel([Animated.timing(backdropAnim, {
@@ -390,7 +390,7 @@ const Chevron = ({
   size,
   open
 }) => {
-  const rotate = useRef(new Animated.Value(open ? 1 : 0)).current;
+  const rotate = useRef(createAnimatedValue(open ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(rotate, {
       toValue: open ? 1 : 0,

package/lib/module/components/Skeleton/Skeleton.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { Responsive } from "../../utils/index.js";
 import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +47,7 @@ const Skeleton = ({
   const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = Responsive.size(height);
-  const progress = useRef(new Animated.Value(0)).current;
+  const progress = useRef(createAnimatedValue(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
   useEffect(() => {
     progress.setValue(0);

package/lib/module/components/Slider/Slider.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_MAP = {
@@ -65,16 +65,16 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   const lastReportedHigh = useRef(highRef.current);
 
   // Animated x positions (px) for thumbs.
-  const lowX = useRef(new Animated.Value(0)).current;
-  const highX = useRef(new Animated.Value(0)).current;
+  const lowX = useRef(createAnimatedValue(0)).current;
+  const highX = useRef(createAnimatedValue(0)).current;
 
   // Press / drag scale animations.
-  const lowScale = useRef(new Animated.Value(1)).current;
-  const highScale = useRef(new Animated.Value(1)).current;
+  const lowScale = useRef(createAnimatedValue(1)).current;
+  const highScale = useRef(createAnimatedValue(1)).current;
 
   // Label opacity per thumb.
-  const lowLabelOpacity = useRef(new Animated.Value(0)).current;
-  const highLabelOpacity = useRef(new Animated.Value(0)).current;
+  const lowLabelOpacity = useRef(createAnimatedValue(0)).current;
+  const highLabelOpacity = useRef(createAnimatedValue(0)).current;
 
   // Track which thumb is actively dragging (to anchor gesture math).
   const dragOffsetRef = useRef(0);

package/lib/module/components/Spinner/Spinner.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   small: 20,
@@ -18,7 +18,7 @@ const Dot = ({
   delay,
   duration
 }) => {
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale = useRef(createAnimatedValue(1)).current;
   useEffect(() => {
     const animation = Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(scale, {
       toValue: 1.4,
@@ -61,7 +61,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     testID
   } = props;
   const theme = useTheme();
-  const fade = useRef(new Animated.Value(0)).current;
+  const fade = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     Animated.timing(fade, {
       toValue: 1,

package/lib/module/components/Stepper/Stepper.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,8 +30,8 @@ const StepCircle = ({
   onPress
 }) => {
   const isActive = status === 'active';
-  const pulseScale = useRef(new Animated.Value(1)).current;
-  const pulseOpacity = useRef(new Animated.Value(0.5)).current;
+  const pulseScale = useRef(createAnimatedValue(1)).current;
+  const pulseOpacity = useRef(createAnimatedValue(0.5)).current;
   useEffect(() => {
     if (!isActive) {
       pulseScale.setValue(1);
@@ -176,7 +176,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Connector progress: animates as activeStep changes.
   const initialProgress = total <= 1 ? 0 : activeStep / (total - 1);
-  const progress = useRef(new Animated.Value(initialProgress)).current;
+  const progress = useRef(createAnimatedValue(initialProgress)).current;
   const lastTargetRef = useRef(initialProgress);
   useEffect(() => {
     const target = total <= 1 ? 0 : activeStep / (total - 1);

package/lib/module/components/Switch/Switch.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -64,7 +64,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
-  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const progress = useRef(createAnimatedValue(value ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
       toValue: value ? 1 : 0,
@@ -74,7 +74,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       useNativeDriver: true
     }).start();
   }, [value, progress, theme.motion.spring.snappy]);
-  const trackBgAnim = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const trackBgAnim = useRef(createAnimatedValue(value ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(trackBgAnim, {
       toValue: value ? 1 : 0,
@@ -93,7 +93,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
-  const bounceScale = useRef(new Animated.Value(1)).current;
+  const bounceScale = useRef(createAnimatedValue(1)).current;
   const isFirstRender = useRef(true);
   useEffect(() => {
     if (!bounce) return;

package/lib/module/components/Tabs/Tabs.js

@@ -13,7 +13,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
@@ -34,8 +34,8 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = useState({});
-  const indicatorTranslateX = useRef(new Animated.Value(0)).current;
-  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
+  const indicatorWidth = useRef(createAnimatedValue(0)).current;
   const activeLayout = layouts[activeKey];
 
   // Animate indicator whenever activeKey or its layout changes.

package/lib/module/components/TimePicker/TimePicker.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import Button from "../Button/Button.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -59,7 +59,7 @@ const Wheel = ({
   testID
 }) => {
   const listRef = useRef(null);
-  const scrollY = useRef(new Animated.Value(selectedIndex * ITEM_HEIGHT)).current;
+  const scrollY = useRef(createAnimatedValue(selectedIndex * ITEM_HEIGHT)).current;
   const lastIndexRef = useRef(selectedIndex);
   const lastHapticAtRef = useRef(0);
 
@@ -258,8 +258,8 @@ const TimePicker = ({
   }, [visible, value, format, minuteStep, hours, minutes]);
 
   // Sheet animations.
-  const opacity = useRef(new Animated.Value(0)).current;
-  const translateY = useRef(new Animated.Value(40)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
+  const translateY = useRef(createAnimatedValue(40)).current;
   useEffect(() => {
     if (visible) {
       Animated.parallel([Animated.timing(opacity, {

package/lib/module/components/Toast/Toast.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWIPE_DISMISS_THRESHOLD = 80;
 const SWIPE_VELOCITY_THRESHOLD = 0.5;
@@ -24,9 +24,9 @@ const Toast = ({
   const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
   const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
   const enterFrom = position === 'top' ? -120 : 120;
-  const translateY = useRef(new Animated.Value(enterFrom)).current;
-  const translateX = useRef(new Animated.Value(0)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(createAnimatedValue(enterFrom)).current;
+  const translateX = useRef(createAnimatedValue(0)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
   const dismissedRef = useRef(false);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;

package/lib/module/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Dimensions, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const TOOLTIP_GAP = 8;
 const SCREEN_PADDING = 8;
@@ -36,8 +36,8 @@ const Tooltip = props => {
     height: 0
   });
   const wrapperRef = useRef(null);
-  const scale = useRef(new Animated.Value(visible ? 1 : 0.85)).current;
-  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const scale = useRef(createAnimatedValue(visible ? 1 : 0.85)).current;
+  const opacity = useRef(createAnimatedValue(visible ? 1 : 0)).current;
   const autoHideTimer = useRef(null);
   const didMount = useRef(false);
   const setVisible = useCallback(next => {

package/lib/module/theme/animatedValue.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { Animated } from 'react-native';
+
+/**
+ * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
+ *
+ * RN's Fabric renderer deep-freezes prop trees on host components. If an
+ * `Animated.Value` is reachable from a `style` prop via interpolation chains
+ * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
+ * converts the value's `_animation` slot into a throwing setter — the next
+ * `Animated.timing(v).start()` then crashes with
+ *   "_animation: object that is meant to be immutable".
+ *
+ * Sealing the value at construction makes `Object.isSealed(v) === true`,
+ * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
+ * its top guard. Existing-property mutation (`_animation`, `_value`,
+ * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
+ * properties, and `Animated.Value` doesn't add any post-construction.
+ *
+ * Use everywhere the library would otherwise call `new Animated.Value(...)`.
+ */
+export const createAnimatedValue = (initial, config) => Object.seal(new Animated.Value(initial, config));
+//# sourceMappingURL=animatedValue.js.map

package/lib/module/theme/index.js

@@ -46,5 +46,6 @@ export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
 export { lightTheme, darkTheme } from "./tokens.js";
 export { mergeTheme } from "./merge.js";
 export { fontFor } from "./textStyle.js";
+export { createAnimatedValue } from "./animatedValue.js";
 export { Gradient, isGradientAvailable } from "./Gradient.js";
 //# sourceMappingURL=index.js.map

package/lib/typescript/commonjs/theme/animatedValue.d.ts

@@ -0,0 +1,21 @@
+import { Animated } from 'react-native';
+/**
+ * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
+ *
+ * RN's Fabric renderer deep-freezes prop trees on host components. If an
+ * `Animated.Value` is reachable from a `style` prop via interpolation chains
+ * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
+ * converts the value's `_animation` slot into a throwing setter — the next
+ * `Animated.timing(v).start()` then crashes with
+ *   "_animation: object that is meant to be immutable".
+ *
+ * Sealing the value at construction makes `Object.isSealed(v) === true`,
+ * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
+ * its top guard. Existing-property mutation (`_animation`, `_value`,
+ * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
+ * properties, and `Animated.Value` doesn't add any post-construction.
+ *
+ * Use everywhere the library would otherwise call `new Animated.Value(...)`.
+ */
+export declare const createAnimatedValue: (initial: number, config?: ConstructorParameters<typeof Animated.Value>[1]) => Animated.Value;
+//# sourceMappingURL=animatedValue.d.ts.map

package/lib/typescript/commonjs/theme/index.d.ts

@@ -11,6 +11,7 @@ export { lightTheme, darkTheme } from './tokens';
 export { mergeTheme } from './merge';
 export { fontFor } from './textStyle';
 export type { FontWeightKey } from './textStyle';
+export { createAnimatedValue } from './animatedValue';
 export { Gradient, isGradientAvailable } from './Gradient';
 export type { GradientProps } from './Gradient';
 export type { ColorMode, ColorPalette, GradientDefinition, GradientScale, RadiusScale, ShadowDefinition, ShadowScale, SpacingScale, Theme, ThemeOverrides, TypographyScale, MotionScale, DeepPartial } from './types';

package/lib/typescript/module/theme/animatedValue.d.ts

@@ -0,0 +1,21 @@
+import { Animated } from 'react-native';
+/**
+ * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
+ *
+ * RN's Fabric renderer deep-freezes prop trees on host components. If an
+ * `Animated.Value` is reachable from a `style` prop via interpolation chains
+ * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
+ * converts the value's `_animation` slot into a throwing setter — the next
+ * `Animated.timing(v).start()` then crashes with
+ *   "_animation: object that is meant to be immutable".
+ *
+ * Sealing the value at construction makes `Object.isSealed(v) === true`,
+ * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
+ * its top guard. Existing-property mutation (`_animation`, `_value`,
+ * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
+ * properties, and `Animated.Value` doesn't add any post-construction.
+ *
+ * Use everywhere the library would otherwise call `new Animated.Value(...)`.
+ */
+export declare const createAnimatedValue: (initial: number, config?: ConstructorParameters<typeof Animated.Value>[1]) => Animated.Value;
+//# sourceMappingURL=animatedValue.d.ts.map