@webority-technologies/mobile 0.0.22 → 0.0.23

package/lib/commonjs/components/Slider/Slider.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../../hooks/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const SIZE_MAP = {
@@ -79,10 +80,15 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
   const isRange = props.range === true;
+  const [currentValue, setCurrentValue] = (0, _index3.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 = (0, _react.useRef)(isRange ? props.value[0] : props.value);
-  const highRef = (0, _react.useRef)(isRange ? props.value[1] : props.value);
+  const lowRef = (0, _react.useRef)(isRange ? currentValue[0] : currentValue);
+  const highRef = (0, _react.useRef)(isRange ? currentValue[1] : currentValue);
   const lastReportedLow = (0, _react.useRef)(lowRef.current);
   const lastReportedHigh = (0, _react.useRef)(highRef.current);
 
@@ -120,7 +126,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   (0, _react.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;
@@ -130,38 +136,34 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       (0, _index.setNativeValue)(lowX, valueToPx(lo, trackWidth));
       (0, _index.setNativeValue)(highX, valueToPx(hi, trackWidth));
     } else {
-      const v = props.value;
+      const v = currentValue;
       lowRef.current = v;
       highRef.current = v;
       lastReportedLow.current = v;
       (0, _index.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 = (0, _react.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);
       (0, _index.setNativeValue)(lowX, valueToPx(lo, w));
       (0, _index.setNativeValue)(highX, valueToPx(hi, w));
     } else {
-      (0, _index.setNativeValue)(lowX, valueToPx(props.value, w));
+      (0, _index.setNativeValue)(lowX, valueToPx(currentValue, w));
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [isRange, valueToPx]);
   const fireChange = (0, _react.useCallback)((lo, hi) => {
-    if (isRange) {
-      props.onChange([lo, hi]);
-    } else {
-      props.onChange(lo);
-    }
-  }, [isRange, props]);
+    setCurrentValue(isRange ? [lo, hi] : lo);
+  }, [isRange, setCurrentValue]);
   const animateThumbPress = (0, _react.useCallback)((target, opacity, pressed) => {
     if (thumbPressAnimationEnabled) {
       _reactNative.Animated.spring(target, {
@@ -196,24 +198,29 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.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) (0, _index2.triggerHaptic)('selection');
             lastReportedLow.current = nextValue;
+            lowRef.current = nextValue;
+            (0, _index.setNativeValue)(lowX, valueToPx(nextValue, trackWidth));
+            fireChange(nextValue, highRef.current);
           }
-          lowRef.current = nextValue;
-          (0, _index.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) (0, _index2.triggerHaptic)('selection');
             lastReportedHigh.current = nextValue;
+            highRef.current = nextValue;
+            (0, _index.setNativeValue)(highX, valueToPx(nextValue, trackWidth));
+            fireChange(lowRef.current, nextValue);
           }
-          highRef.current = nextValue;
-          (0, _index.setNativeValue)(highX, valueToPx(nextValue, trackWidth));
-          fireChange(lowRef.current, nextValue);
         }
       },
       onPanResponderRelease: () => {
@@ -272,12 +279,21 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }
     }
   }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange, sliderTheme]);
-
-  // Computed values for fill bar.
-  const fillLeft = isRange ? lowX : new _reactNative.Animated.Value(0);
-  const fillWidth = isRange ? _reactNative.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 = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const thumbRadiusX = (0, _react.useRef)((0, _index.createAnimatedValue)(thumbRadius)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(thumbRadiusX, thumbRadius);
+  }, [thumbRadius, thumbRadiusX]);
+  const fillLeft = isRange ? lowX : zeroX;
+  const fillWidth = (0, _react.useMemo)(() => isRange ? _reactNative.Animated.subtract(highX, lowX) : lowX, [isRange, highX, lowX]);
+  const lowTranslateX = (0, _react.useMemo)(() => _reactNative.Animated.subtract(lowX, thumbRadiusX), [lowX, thumbRadiusX]);
+  const highTranslateX = (0, _react.useMemo)(() => _reactNative.Animated.subtract(highX, thumbRadiusX), [highX, thumbRadiusX]);
+
   // Display values for labels.
   const lowDisplayValue = isRange ? lowRef.current : lowRef.current;
   const highDisplayValue = highRef.current;
@@ -330,7 +346,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             backgroundColor: theme.colors.background.elevated,
             borderColor: disabled ? theme.colors.surface.disabled : fillColor,
             transform: [{
-              translateX: _reactNative.Animated.subtract(lowX, new _reactNative.Animated.Value(thumbRadius))
+              translateX: lowTranslateX
             }, {
               scale: lowScale
             }],
@@ -358,7 +374,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             backgroundColor: theme.colors.background.elevated,
             borderColor: disabled ? theme.colors.surface.disabled : fillColor,
             transform: [{
-              translateX: _reactNative.Animated.subtract(highX, new _reactNative.Animated.Value(thumbRadius))
+              translateX: highTranslateX
             }, {
               scale: highScale
             }],

package/lib/commonjs/components/Spinner/Spinner.js

@@ -10,9 +10,9 @@ var _index = require("../../theme/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const sizeMap = {
-  small: 20,
-  medium: 32,
-  large: 48
+  sm: 20,
+  md: 32,
+  lg: 48
 };
 const DOT_COUNT = 3;
 const DOT_STAGGER_MS = 150;
@@ -55,7 +55,7 @@ const Dot = ({
 };
 const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
-    size = 'medium',
+    size = 'md',
     color,
     message,
     overlay = false,
@@ -98,7 +98,7 @@ const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, re
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
       color: resolvedColor,
-      size: size === 'small' ? 'small' : 'large',
+      size: size === 'sm' ? 'small' : 'large',
       style: {
         width: dimension,
         height: dimension

package/lib/commonjs/components/Switch/Switch.js

@@ -7,6 +7,7 @@ exports.default = exports.Switch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../../hooks/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -46,7 +47,8 @@ const toneColor = (theme, tone) => {
 const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     value,
-    onValueChange,
+    defaultValue,
+    onChange,
     disabled = false,
     size = 'md',
     tone = 'primary',
@@ -61,6 +63,11 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     testID,
     ...rest
   } = props;
+  const [current, setCurrent] = (0, _index2.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? false,
+    onChange
+  });
   const theme = (0, _index.useTheme)();
   const sizeStyles = {
     ...sizeMap[size],
@@ -70,25 +77,29 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
-  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(value ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(current ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.spring(progress, {
-      toValue: value ? 1 : 0,
+    const anim = _reactNative.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 = (0, _react.useRef)((0, _index.createAnimatedValue)(value ? 1 : 0)).current;
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, progress, theme.motion.spring.snappy]);
+  const trackBgAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(current ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(trackBgAnim, {
-      toValue: value ? 1 : 0,
+    const anim = _reactNative.Animated.timing(trackBgAnim, {
+      toValue: current ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.out(_reactNative.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({
@@ -107,7 +118,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       isFirstRender.current = false;
       return;
     }
-    _reactNative.Animated.sequence([_reactNative.Animated.spring(bounceScale, {
+    const anim = _reactNative.Animated.sequence([_reactNative.Animated.spring(bounceScale, {
       toValue: 1.15,
       damping: 10,
       stiffness: 220,
@@ -119,12 +130,14 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.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) (0, _hapticUtils.triggerHaptic)(haptic);
-    onValueChange(!value);
+    setCurrent(!current);
     rest.onPressOut?.(event);
   };
   const accessibleLabel = accessibilityLabel ?? label;
@@ -135,7 +148,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     accessibilityRole: "switch",
     accessibilityLabel: accessibleLabel,
     accessibilityState: {
-      checked: value,
+      checked: current,
       disabled
     },
     testID: testID,

package/lib/commonjs/components/Tabs/Tabs.js

@@ -87,7 +87,7 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     if (!activeLayout) return;
     if (useProgress) return;
     const spring = theme.motion.spring.snappy;
-    _reactNative.Animated.parallel([
+    const anim = _reactNative.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.
@@ -103,7 +103,9 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.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 = (0, _react.useCallback)(key => e => {
     const {

package/lib/commonjs/components/Text/Text.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    variant = 'body',
+    color,
+    weight,
+    size,
+    align,
+    italic,
+    underline,
+    style,
+    children,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const textStyle = (0, _react.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,
+      ...(0, _index.fontFor)(theme, weight ?? spec.weight)
+    };
+  }, [theme, variant, color, weight, size, align, italic, underline]);
+  const heading = VARIANTS[variant].heading;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    ref: ref,
+    style: [textStyle, style],
+    accessibilityRole: heading ? 'header' : rest.accessibilityRole,
+    ...rest,
+    children: children
+  });
+});
+Text.displayName = 'Text';
+var _default = exports.default = Text;
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _Text.Text;
+  }
+});
+var _Text = require("./Text.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/TimePicker/TimePicker.js

@@ -17,12 +17,12 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * 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.
  */
 
@@ -223,7 +223,7 @@ const TimePicker = props => {
   const {
     visible,
     value,
-    onSelect,
+    onChange,
     onClose,
     format = '12h',
     minuteStep = 1,
@@ -310,8 +310,9 @@ const TimePicker = props => {
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(40)).current;
   (0, _react.useEffect)(() => {
+    let anim;
     if (open) {
-      _reactNative.Animated.parallel([
+      anim = _reactNative.Animated.parallel([
       // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
       _reactNative.Animated.timing(opacity, {
         toValue: 1,
@@ -324,11 +325,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);
       (0, _index.setNativeValue)(translateY, 40);
     }
+    return () => anim?.stop();
   }, [open, opacity, translateY, theme.motion]);
   const announce = (0, _react.useCallback)(msg => {
     if (_reactNative.Platform.OS === 'ios' || _reactNative.Platform.OS === 'android') {
@@ -357,12 +360,12 @@ const TimePicker = props => {
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
     if (theme.components.timePicker?.haptic) (0, _hapticUtils.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 = (0, _react.useMemo)(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;

package/lib/commonjs/components/Toast/Toast.js

@@ -44,6 +44,18 @@ const Toast = ({
   const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const dismissedRef = (0, _react.useRef)(false);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+
+  // The stack offset rides on its own value so the enter spring (translateY)
+  // and the layout offset compose once instead of rebuilding a fresh
+  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
+  // keeps it in sync after the node has moved to the native driver.
+  const stackTranslateY = (0, _react.useRef)((0, _index.createAnimatedValue)(stackTranslate)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;
     dismissedRef.current = true;
@@ -62,7 +74,7 @@ const Toast = ({
     }
   };
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
+    const enter = _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
       toValue: 0,
       damping: enterSpringDamping,
       stiffness: enterSpringStiffness,
@@ -72,13 +84,17 @@ const Toast = ({
       toValue: 1,
       duration: theme.motion.duration.fast,
       useNativeDriver: true
-    })]).start();
+    })]);
+    enter.start();
     const duration = toast.duration ?? defaultDurationMs;
     if (duration > 0) {
       const timer = setTimeout(() => dismiss(true), duration);
-      return () => clearTimeout(timer);
+      return () => {
+        enter.stop();
+        clearTimeout(timer);
+      };
     }
-    return undefined;
+    return () => enter.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
@@ -113,11 +129,7 @@ const Toast = ({
         })]).start();
       }
     }
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
-  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, onDismiss, toast.id]);
   const handleActionPress = () => {
     toast.action?.onPress();
     dismiss(true);
@@ -157,7 +169,7 @@ const Toast = ({
       shadowColor: theme.shadows.md.shadowColor,
       opacity,
       transform: [{
-        translateY: _reactNative.Animated.add(translateY, new _reactNative.Animated.Value(stackTranslate))
+        translateY: composedTranslateY
       }, {
         translateX
       }, {

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -107,6 +107,7 @@ const Tooltip = props => {
         }
       };
     }
+    let anim;
     if (visible) {
       measureAnchor();
       const enterAnims = [_reactNative.Animated.timing(opacity, {
@@ -123,7 +124,8 @@ const Tooltip = props => {
           useNativeDriver: true
         }));
       }
-      _reactNative.Animated.parallel(enterAnims).start();
+      anim = _reactNative.Animated.parallel(enterAnims);
+      anim.start();
       if (trigger === 'press') {
         if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
         autoHideTimer.current = setTimeout(() => {
@@ -143,13 +145,15 @@ const Tooltip = props => {
           useNativeDriver: true
         }));
       }
-      _reactNative.Animated.parallel(exitAnims).start();
+      anim = _reactNative.Animated.parallel(exitAnims);
+      anim.start();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;
       }
     }
     return () => {
+      anim?.stop();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;