@webority-technologies/mobile 0.0.22 → 0.0.23

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

@@ -61,34 +61,32 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const backdropAnim = useRef(createAnimatedValue(0)).current;
   const sheetAnim = useRef(createAnimatedValue(sheetMaxHeight)).current;
   useEffect(() => {
-    if (open) {
-      Animated.parallel([
-      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-      Animated.timing(backdropAnim, {
-        toValue: 1,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), Animated.spring(sheetAnim, {
-        toValue: 0,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      })]).start();
-    } else {
-      Animated.parallel([Animated.timing(backdropAnim, {
-        toValue: 0,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), Animated.timing(sheetAnim, {
-        toValue: sheetMaxHeight,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.accelerate),
-        useNativeDriver: true
-      })]).start();
-    }
+    const anim = open ? Animated.parallel([
+    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+    Animated.timing(backdropAnim, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), Animated.spring(sheetAnim, {
+      toValue: 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    })]) : Animated.parallel([Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), Animated.timing(sheetAnim, {
+      toValue: sheetMaxHeight,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [open, backdropAnim, sheetAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
 
   // Selection helpers — typed to keep callbacks fully type-safe.
@@ -386,14 +384,17 @@ const Chevron = ({
   size,
   open
 }) => {
+  const theme = useTheme();
   const rotate = useRef(createAnimatedValue(open ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(rotate, {
+    const anim = Animated.timing(rotate, {
       toValue: open ? 1 : 0,
-      duration: 160,
+      duration: theme.motion.duration.fast,
       useNativeDriver: true
-    }).start();
-  }, [open, rotate]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [open, rotate, theme.motion.duration.fast]);
   const rotation = rotate.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

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

@@ -216,19 +216,22 @@ const SkeletonContent = ({
   const wasLoadingRef = useRef(loading);
   const fadeAnim = useRef(createAnimatedValue(loading ? 0 : 1)).current;
   useEffect(() => {
+    let anim;
     if (wasLoadingRef.current && !loading) {
       fadeAnim.setValue(0);
-      Animated.timing(fadeAnim, {
+      anim = Animated.timing(fadeAnim, {
         toValue: 1,
         duration: resolvedFadeDuration,
         useNativeDriver: true
-      }).start();
+      });
+      anim.start();
     } else if (!wasLoadingRef.current && loading) {
       // Going back into loading from loaded — snap opacity so the
       // placeholder appears instantly when data invalidates.
       fadeAnim.setValue(1);
     }
     wasLoadingRef.current = loading;
+    return () => anim?.stop();
   }, [loading, fadeAnim, resolvedFadeDuration]);
   if (!loading) {
     if (resolvedFadeDuration <= 0) {

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

@@ -4,6 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_MAP = {
   sm: {
@@ -74,10 +75,15 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   const [trackWidth, setTrackWidth] = useState(0);
   const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
   const isRange = props.range === true;
+  const [currentValue, setCurrentValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
+    onChange: props.onChange
+  });
 
   // Current value is mirrored in refs so PanResponder closures get fresh values.
-  const lowRef = useRef(isRange ? props.value[0] : props.value);
-  const highRef = useRef(isRange ? props.value[1] : props.value);
+  const lowRef = useRef(isRange ? currentValue[0] : currentValue);
+  const highRef = useRef(isRange ? currentValue[1] : currentValue);
   const lastReportedLow = useRef(lowRef.current);
   const lastReportedHigh = useRef(highRef.current);
 
@@ -115,7 +121,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     if (trackWidth <= 0) return;
     if (isRange) {
-      const [v0, v1] = props.value;
+      const [v0, v1] = currentValue;
       const lo = Math.min(v0, v1);
       const hi = Math.max(v0, v1);
       lowRef.current = lo;
@@ -125,38 +131,34 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       setNativeValue(lowX, valueToPx(lo, trackWidth));
       setNativeValue(highX, valueToPx(hi, trackWidth));
     } else {
-      const v = props.value;
+      const v = currentValue;
       lowRef.current = v;
       highRef.current = v;
       lastReportedLow.current = v;
       setNativeValue(lowX, valueToPx(v, trackWidth));
     }
-    // We intentionally listen to props.value across both shapes via JSON; ESLint is fine.
+    // We intentionally listen to the value across both shapes via JSON; ESLint is fine.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(props.value), trackWidth, isRange, valueToPx]);
+  }, [JSON.stringify(currentValue), trackWidth, isRange, valueToPx]);
   const onTrackLayout = useCallback(e => {
     const w = e.nativeEvent.layout.width;
     setTrackWidth(w);
     // Initialize positions immediately.
     if (isRange) {
-      const [v0, v1] = props.value;
+      const [v0, v1] = currentValue;
       const lo = Math.min(v0, v1);
       const hi = Math.max(v0, v1);
       setNativeValue(lowX, valueToPx(lo, w));
       setNativeValue(highX, valueToPx(hi, w));
     } else {
-      setNativeValue(lowX, valueToPx(props.value, w));
+      setNativeValue(lowX, valueToPx(currentValue, w));
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [isRange, valueToPx]);
   const fireChange = useCallback((lo, hi) => {
-    if (isRange) {
-      props.onChange([lo, hi]);
-    } else {
-      props.onChange(lo);
-    }
-  }, [isRange, props]);
+    setCurrentValue(isRange ? [lo, hi] : lo);
+  }, [isRange, setCurrentValue]);
   const animateThumbPress = useCallback((target, opacity, pressed) => {
     if (thumbPressAnimationEnabled) {
       Animated.spring(target, {
@@ -191,24 +193,29 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         if (trackWidth <= 0) return;
         const nextPx = clamp(dragOffsetRef.current + gesture.dx, 0, trackWidth);
         let nextValue = pxToValue(nextPx, trackWidth);
+
+        // Only touch the native driver + fire onChange when the snapped value
+        // actually changes — between step boundaries the drag is a visual
+        // no-op (px is derived from the snapped value), so this drops the
+        // per-frame native round-trip and per-frame consumer re-render.
         if (which === 'low') {
           if (isRange && nextValue > highRef.current) nextValue = highRef.current;
           if (nextValue !== lastReportedLow.current) {
             if (sliderTheme?.stepHaptic ?? false) triggerHaptic('selection');
             lastReportedLow.current = nextValue;
+            lowRef.current = nextValue;
+            setNativeValue(lowX, valueToPx(nextValue, trackWidth));
+            fireChange(nextValue, highRef.current);
           }
-          lowRef.current = nextValue;
-          setNativeValue(lowX, valueToPx(nextValue, trackWidth));
-          fireChange(nextValue, highRef.current);
         } else {
           if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
           if (nextValue !== lastReportedHigh.current) {
             if (sliderTheme?.stepHaptic ?? false) triggerHaptic('selection');
             lastReportedHigh.current = nextValue;
+            highRef.current = nextValue;
+            setNativeValue(highX, valueToPx(nextValue, trackWidth));
+            fireChange(lowRef.current, nextValue);
           }
-          highRef.current = nextValue;
-          setNativeValue(highX, valueToPx(nextValue, trackWidth));
-          fireChange(lowRef.current, nextValue);
         }
       },
       onPanResponderRelease: () => {
@@ -267,12 +274,21 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange, sliderTheme]);
-
-  // Computed values for fill bar.
-  const fillLeft = isRange ? lowX : new Animated.Value(0);
-  const fillWidth = isRange ? Animated.subtract(highX, lowX) : lowX;
   const thumbRadius = sizeCfg.thumbDiameter / 2;
 
+  // Stable Animated nodes for the fill bar and thumb offsets — created once and
+  // memoised so a render doesn't rebuild `new Animated.Value(...)` /
+  // Animated.subtract nodes and re-attach the animation graph every pass.
+  const zeroX = useRef(createAnimatedValue(0)).current;
+  const thumbRadiusX = useRef(createAnimatedValue(thumbRadius)).current;
+  useEffect(() => {
+    setNativeValue(thumbRadiusX, thumbRadius);
+  }, [thumbRadius, thumbRadiusX]);
+  const fillLeft = isRange ? lowX : zeroX;
+  const fillWidth = useMemo(() => isRange ? Animated.subtract(highX, lowX) : lowX, [isRange, highX, lowX]);
+  const lowTranslateX = useMemo(() => Animated.subtract(lowX, thumbRadiusX), [lowX, thumbRadiusX]);
+  const highTranslateX = useMemo(() => Animated.subtract(highX, thumbRadiusX), [highX, thumbRadiusX]);
+
   // Display values for labels.
   const lowDisplayValue = isRange ? lowRef.current : lowRef.current;
   const highDisplayValue = highRef.current;
@@ -325,7 +341,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
             backgroundColor: theme.colors.background.elevated,
             borderColor: disabled ? theme.colors.surface.disabled : fillColor,
             transform: [{
-              translateX: Animated.subtract(lowX, new Animated.Value(thumbRadius))
+              translateX: lowTranslateX
             }, {
               scale: lowScale
             }],
@@ -353,7 +369,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
             backgroundColor: theme.colors.background.elevated,
             borderColor: disabled ? theme.colors.surface.disabled : fillColor,
             transform: [{
-              translateX: Animated.subtract(highX, new Animated.Value(thumbRadius))
+              translateX: highTranslateX
             }, {
               scale: highScale
             }],

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

@@ -5,9 +5,9 @@ import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'rea
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
-  small: 20,
-  medium: 32,
-  large: 48
+  sm: 20,
+  md: 32,
+  lg: 48
 };
 const DOT_COUNT = 3;
 const DOT_STAGGER_MS = 150;
@@ -50,7 +50,7 @@ const Dot = ({
 };
 const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    size = 'medium',
+    size = 'md',
     color,
     message,
     overlay = false,
@@ -93,7 +93,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return /*#__PURE__*/_jsx(ActivityIndicator, {
       color: resolvedColor,
-      size: size === 'small' ? 'small' : 'large',
+      size: size === 'sm' ? 'small' : 'large',
       style: {
         width: dimension,
         height: dimension

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

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { useControllableState } from "../../hooks/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -41,7 +42,8 @@ const toneColor = (theme, tone) => {
 const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     value,
-    onValueChange,
+    defaultValue,
+    onChange,
     disabled = false,
     size = 'md',
     tone = 'primary',
@@ -56,6 +58,11 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     testID,
     ...rest
   } = props;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? false,
+    onChange
+  });
   const theme = useTheme();
   const sizeStyles = {
     ...sizeMap[size],
@@ -65,25 +72,29 @@ 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(createAnimatedValue(value ? 1 : 0)).current;
+  const progress = useRef(createAnimatedValue(current ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(progress, {
-      toValue: value ? 1 : 0,
+    const anim = Animated.spring(progress, {
+      toValue: current ? 1 : 0,
       damping: theme.motion.spring.snappy.damping,
       stiffness: theme.motion.spring.snappy.stiffness,
       mass: theme.motion.spring.snappy.mass,
       useNativeDriver: true
-    }).start();
-  }, [value, progress, theme.motion.spring.snappy]);
-  const trackBgAnim = useRef(createAnimatedValue(value ? 1 : 0)).current;
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, progress, theme.motion.spring.snappy]);
+  const trackBgAnim = useRef(createAnimatedValue(current ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(trackBgAnim, {
-      toValue: value ? 1 : 0,
+    const anim = Animated.timing(trackBgAnim, {
+      toValue: current ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.out(Easing.ease),
       useNativeDriver: false
-    }).start();
-  }, [value, trackBgAnim, theme.motion.duration.fast]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, trackBgAnim, theme.motion.duration.fast]);
   const offX = sizeStyles.padding;
   const onX = sizeStyles.trackWidth - sizeStyles.thumbSize - sizeStyles.padding;
   const translateX = progress.interpolate({
@@ -102,7 +113,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       isFirstRender.current = false;
       return;
     }
-    Animated.sequence([Animated.spring(bounceScale, {
+    const anim = Animated.sequence([Animated.spring(bounceScale, {
       toValue: 1.15,
       damping: 10,
       stiffness: 220,
@@ -114,12 +125,14 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       stiffness: 240,
       mass: 1,
       useNativeDriver: true
-    })]).start();
-  }, [value, bounce, bounceScale]);
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [current, bounce, bounceScale]);
   const handlePress = event => {
     if (disabled) return;
     if (haptic !== false) triggerHaptic(haptic);
-    onValueChange(!value);
+    setCurrent(!current);
     rest.onPressOut?.(event);
   };
   const accessibleLabel = accessibilityLabel ?? label;
@@ -130,7 +143,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityRole: "switch",
     accessibilityLabel: accessibleLabel,
     accessibilityState: {
-      checked: value,
+      checked: current,
       disabled
     },
     testID: testID,

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

@@ -82,7 +82,7 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     if (!activeLayout) return;
     if (useProgress) return;
     const spring = theme.motion.spring.snappy;
-    Animated.parallel([
+    const anim = Animated.parallel([
     // Both must use the JS driver: width can't run on native, and mixing
     // drivers on the same view (transform native + width JS) trips RN's
     // "node already moved to native" guard under the new architecture.
@@ -98,7 +98,9 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
       stiffness: spring.stiffness,
       mass: spring.mass,
       useNativeDriver: false
-    })]).start();
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy, useProgress]);
   const handleLayout = useCallback(key => e => {
     const {

package/lib/module/components/Text/Text.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VARIANTS = {
+  display: {
+    size: '4xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h1: {
+    size: '3xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h2: {
+    size: '2xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h3: {
+    size: 'xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  title: {
+    size: 'lg',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'primary'
+  },
+  body: {
+    size: 'base',
+    weight: 'normal',
+    line: 'normal',
+    color: 'primary'
+  },
+  bodySmall: {
+    size: 'sm',
+    weight: 'normal',
+    line: 'normal',
+    color: 'secondary'
+  },
+  caption: {
+    size: 'xs',
+    weight: 'normal',
+    line: 'normal',
+    color: 'tertiary'
+  },
+  label: {
+    size: 'sm',
+    weight: 'medium',
+    line: 'normal',
+    color: 'secondary'
+  },
+  overline: {
+    size: 'xs',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'secondary',
+    uppercase: true,
+    letterSpacing: 'wide'
+  }
+};
+const TEXT_ROLES = {
+  primary: true,
+  secondary: true,
+  tertiary: true,
+  inverse: true,
+  disabled: true,
+  link: true
+};
+const SEMANTIC = {
+  success: true,
+  warning: true,
+  error: true,
+  info: true
+};
+const resolveColor = (theme, color) => {
+  // Text roles win over the same-named brand colour ('primary' -> text.primary),
+  // which is the intent the vast majority of the time for text.
+  if (TEXT_ROLES[color]) return theme.colors.text[color];
+  if (SEMANTIC[color]) return theme.colors[color];
+  return color; // raw colour string
+};
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    variant = 'body',
+    color,
+    weight,
+    size,
+    align,
+    italic,
+    underline,
+    style,
+    children,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const textStyle = useMemo(() => {
+    const spec = VARIANTS[variant];
+    const fontSize = typeof size === 'number' ? size : theme.typography.fontSize[size ?? spec.size];
+    const lineHeight = Math.round(fontSize * theme.typography.lineHeight[spec.line]);
+    return {
+      fontSize,
+      lineHeight,
+      color: resolveColor(theme, color ?? spec.color),
+      textAlign: align,
+      textTransform: spec.uppercase ? 'uppercase' : undefined,
+      letterSpacing: spec.letterSpacing ? theme.typography.letterSpacing[spec.letterSpacing] : undefined,
+      fontStyle: italic ? 'italic' : undefined,
+      textDecorationLine: underline ? 'underline' : undefined,
+      ...fontFor(theme, weight ?? spec.weight)
+    };
+  }, [theme, variant, color, weight, size, align, italic, underline]);
+  const heading = VARIANTS[variant].heading;
+  return /*#__PURE__*/_jsx(RNText, {
+    ref: ref,
+    style: [textStyle, style],
+    accessibilityRole: heading ? 'header' : rest.accessibilityRole,
+    ...rest,
+    children: children
+  });
+});
+Text.displayName = 'Text';
+export { Text };
+export default Text;
+//# sourceMappingURL=Text.js.map

package/lib/module/components/Text/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Text } from "./Text.js";
+//# sourceMappingURL=index.js.map

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

@@ -11,12 +11,12 @@ import { PickerTrigger } from "../PickerTrigger/PickerTrigger.js";
 /**
  * TimePicker supports two modes:
  *
- * 1. Controlled-modal mode — pass `visible`, `onSelect`, `onClose`. The
+ * 1. Controlled-modal mode — pass `visible`, `onChange`, `onClose`. The
  *    component renders only the modal sheet and the caller owns open/close
  *    state plus its own trigger UI.
  * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
  *    field (label / value / placeholder / chevron / clear / helper / error)
- *    and manages its own modal open state. `onSelect` is still called on
+ *    and manages its own modal open state. `onChange` is still called on
  *    confirm.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -217,7 +217,7 @@ const TimePicker = props => {
   const {
     visible,
     value,
-    onSelect,
+    onChange,
     onClose,
     format = '12h',
     minuteStep = 1,
@@ -304,8 +304,9 @@ const TimePicker = props => {
   const opacity = useRef(createAnimatedValue(0)).current;
   const translateY = useRef(createAnimatedValue(40)).current;
   useEffect(() => {
+    let anim;
     if (open) {
-      Animated.parallel([
+      anim = Animated.parallel([
       // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
       Animated.timing(opacity, {
         toValue: 1,
@@ -318,11 +319,13 @@ const TimePicker = props => {
         stiffness: theme.motion.spring.snappy.stiffness,
         mass: theme.motion.spring.snappy.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     } else {
       opacity.setValue(0);
       setNativeValue(translateY, 40);
     }
+    return () => anim?.stop();
   }, [open, opacity, translateY, theme.motion]);
   const announce = useCallback(msg => {
     if (Platform.OS === 'ios' || Platform.OS === 'android') {
@@ -351,12 +354,12 @@ const TimePicker = props => {
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
     if (theme.components.timePicker?.haptic) triggerHaptic('notificationSuccess');
-    onSelect?.({
+    onChange?.({
       hour: hour24,
       minute
     });
     handleCloseModal();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, handleCloseModal, theme.components.timePicker]);
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, theme.components.timePicker]);
   const summary = useMemo(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;