@webority-technologies/mobile 0.0.22 → 0.0.24

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

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CIRCLE_SIZE = 24;
@@ -34,7 +34,7 @@ const StepCircle = ({
   pulseSize,
   pulseEnabled,
   pulseDuration,
-  pressHapticEnabled,
+  pressHaptic,
   circleSlotStyle
 }) => {
   const isActive = status === 'active';
@@ -81,7 +81,7 @@ const StepCircle = ({
   const canPress = interactive && status === 'complete';
   const handlePress = () => {
     if (!canPress) return;
-    if (pressHapticEnabled) triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic(pressHaptic);
     onPress?.(index);
   };
   const inner = /*#__PURE__*/_jsxs(View, {
@@ -176,6 +176,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     circleStyle,
     labelStyle,
     connectorStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -184,7 +185,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
   const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
   const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
   const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
-  const pressHapticEnabled = stepperTheme?.pressHaptic ?? false;
+  const pressHaptic = resolveHaptic(haptic, 'selection');
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const toneColor = toneColorFor(theme, tone);
   const upcomingColor = theme.colors.border.primary;
@@ -265,7 +266,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
           pulseSize: pulseSize,
           pulseEnabled: pulseEnabled,
           pulseDuration: pulseDuration,
-          pressHapticEnabled: pressHapticEnabled,
+          pressHaptic: pressHaptic,
           circleSlotStyle: circleStyle
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.hLabel, {
@@ -304,7 +305,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
             pulseSize: pulseSize,
             pulseEnabled: pulseEnabled,
             pulseDuration: pulseDuration,
-            pressHapticEnabled: pressHapticEnabled,
+            pressHaptic: pressHaptic,
             circleSlotStyle: circleStyle
           }), !isLast ? /*#__PURE__*/_jsxs(View, {
             style: [styles.vConnectorContainer, connectorStyle],

package/lib/module/components/Swipeable/Swipeable.js

@@ -22,7 +22,7 @@ import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPRING_CONFIG = {
   damping: 22,
@@ -57,6 +57,7 @@ const Swipeable = props => {
     onSwipeOpen,
     onSwipeClose,
     disabled = false,
+    haptic,
     containerStyle,
     contentStyle: contentSlotStyle,
     actionStyle,
@@ -75,9 +76,6 @@ const Swipeable = props => {
     stiffness: swipeTheme?.springStiffness ?? SPRING_CONFIG.stiffness,
     mass: swipeTheme?.springMass ?? SPRING_CONFIG.mass
   };
-  const fullSwipeHapticEnabled = swipeTheme?.fullSwipeHaptic ?? true;
-  const actionPressHapticEnabled = swipeTheme?.actionPressHaptic ?? true;
-  const a11yActionHapticEnabled = swipeTheme?.a11yActionHaptic ?? true;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const hasLeft = !!leftActions && leftActions.length > 0;
   const hasRight = !!rightActions && rightActions.length > 0;
@@ -117,22 +115,23 @@ const Swipeable = props => {
     const list = side === 'left' ? leftActions : rightActions;
     const first = list?.[0];
     if (!first) return;
-    if (fullSwipeHapticEnabled) triggerHaptic('notificationSuccess');
+    if (haptic !== false) triggerHaptic('notificationSuccess');
     first.onPress();
     // After the off-screen slide, snap back to 0 silently.
     translateX.value = withSpring(0, springConfig);
     openSideRef.current = null;
     onSwipeClose?.();
-  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, fullSwipeHapticEnabled]);
+  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, haptic]);
   const close = useCallback(() => {
     translateX.value = withSpring(0, springConfig);
     notifyClose();
   }, [translateX, notifyClose, springConfig]);
   const handleActionPress = useCallback(action => {
-    if (actionPressHapticEnabled) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
     close();
-  }, [close, actionPressHapticEnabled]);
+  }, [close, haptic]);
 
   // ───────── Pan gesture (UI thread) ─────────
   const panGesture = useMemo(() => {
@@ -238,10 +237,10 @@ const Swipeable = props => {
     const all = [...(leftActions ?? []), ...(rightActions ?? [])];
     const match = all.find(a => a.key === name);
     if (match) {
-      if (a11yActionHapticEnabled) triggerHaptic('selection');
+      if (haptic !== false) triggerHaptic('selection');
       match.onPress();
     }
-  }, [leftActions, rightActions, a11yActionHapticEnabled]);
+  }, [leftActions, rightActions, haptic]);
 
   // ───────── Render ─────────
   // No actions configured → render children directly; zero gesture overhead.

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

@@ -14,7 +14,7 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -33,6 +33,7 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
     dividerStyle,
     indicatorStyle,
     progress,
+    haptic,
     accessibilityLabel,
     testID
   } = props;
@@ -46,7 +47,6 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const pillInset = tabsTokens?.pillInset ?? 4;
   const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
   const badgeGap = tabsTokens?.badgeGap ?? 6;
-  const hapticOnPress = tabsTokens?.hapticOnPress ?? false;
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = useState({});
@@ -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 {
@@ -120,9 +122,10 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   const handlePress = useCallback(tab => {
     if (tab.disabled) return;
     if (tab.key === activeKey) return;
-    if (hapticOnPress) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     onChange(tab.key);
-  }, [activeKey, onChange, hapticOnPress]);
+  }, [activeKey, onChange, haptic]);
   const indicatorIsPill = variant === 'pills';
 
   // Indicator visual.

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

@@ -4,19 +4,19 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import Button from "../Button/Button.js";
 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";
@@ -70,6 +70,7 @@ const Wheel = ({
   onIndexChange,
   formatItem,
   theme,
+  haptic,
   testID
 }) => {
   const listRef = useRef(null);
@@ -92,7 +93,6 @@ const Wheel = ({
       });
     }
   }, [selectedIndex, scrollY]);
-  const hapticEnabled = theme.components.timePicker?.haptic ?? false;
   const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
   const onScroll = useMemo(() => Animated.event([{
     nativeEvent: {
@@ -107,14 +107,15 @@ const Wheel = ({
       const idx = Math.round(y / ITEM_HEIGHT);
       if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
         const now = Date.now();
-        if (hapticEnabled && now - lastHapticAtRef.current >= hapticDebounceMs) {
-          triggerHaptic('selection');
+        if (now - lastHapticAtRef.current >= hapticDebounceMs) {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) triggerHaptic(h);
           lastHapticAtRef.current = now;
         }
         lastIndexRef.current = idx;
       }
     }
-  }), [scrollY, data.length, hapticEnabled, hapticDebounceMs]);
+  }), [scrollY, data.length, haptic, hapticDebounceMs]);
   const onMomentumScrollEnd = useCallback(event => {
     const y = event.nativeEvent.contentOffset.y;
     const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
@@ -217,7 +218,7 @@ const TimePicker = props => {
   const {
     visible,
     value,
-    onSelect,
+    onChange,
     onClose,
     format = '12h',
     minuteStep = 1,
@@ -240,7 +241,8 @@ const TimePicker = props => {
     clearable,
     onClear,
     formatValue,
-    triggerStyle
+    triggerStyle,
+    haptic
   } = props;
   const isControlled = props.visible !== undefined;
   const [internalOpen, setInternalOpen] = useState(false);
@@ -304,8 +306,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 +321,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') {
@@ -342,21 +347,21 @@ const TimePicker = props => {
     announce(periods[idx] ?? '');
   }, [periods, announce]);
   const handleCancel = useCallback(() => {
-    if (theme.components.timePicker?.haptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     handleCloseModal();
-  }, [handleCloseModal, theme.components.timePicker]);
+  }, [handleCloseModal, haptic]);
   const handleConfirm = useCallback(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const period = periods[periodIndex] ?? 'AM';
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
-    if (theme.components.timePicker?.haptic) triggerHaptic('notificationSuccess');
-    onSelect?.({
+    if (haptic !== false) triggerHaptic('notificationSuccess');
+    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, haptic]);
   const summary = useMemo(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;
@@ -440,6 +445,7 @@ const TimePicker = props => {
             onIndexChange: handleHourIndex,
             formatItem: formatHourItem,
             theme: theme,
+            haptic: haptic,
             testID: "time-picker-hour"
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.separator,
@@ -452,6 +458,7 @@ const TimePicker = props => {
             onIndexChange: handleMinuteIndex,
             formatItem: formatMinuteItem,
             theme: theme,
+            haptic: haptic,
             testID: "time-picker-minute"
           }), format === '12h' ? /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(View, {
@@ -464,6 +471,7 @@ const TimePicker = props => {
               onIndexChange: handlePeriodIndex,
               formatItem: formatPeriodItem,
               theme: theme,
+              haptic: haptic,
               testID: "time-picker-period"
             })]
           }) : null]

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

@@ -39,6 +39,18 @@ const Toast = ({
   const translateX = useRef(createAnimatedValue(0)).current;
   const opacity = useRef(createAnimatedValue(0)).current;
   const dismissedRef = 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 = useRef(createAnimatedValue(stackTranslate)).current;
+  useEffect(() => {
+    setNativeValue(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = useMemo(() => Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;
     dismissedRef.current = true;
@@ -57,7 +69,7 @@ const Toast = ({
     }
   };
   useEffect(() => {
-    Animated.parallel([Animated.spring(translateY, {
+    const enter = Animated.parallel([Animated.spring(translateY, {
       toValue: 0,
       damping: enterSpringDamping,
       stiffness: enterSpringStiffness,
@@ -67,13 +79,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 = useMemo(() => PanResponder.create({
@@ -108,11 +124,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);
@@ -152,7 +164,7 @@ const Toast = ({
       shadowColor: theme.shadows.md.shadowColor,
       opacity,
       transform: [{
-        translateY: Animated.add(translateY, new Animated.Value(stackTranslate))
+        translateY: composedTranslateY
       }, {
         translateX
       }, {