@webority-technologies/mobile 0.0.12 → 0.0.13

package/lib/commonjs/components/Badge/Badge.js

@@ -131,7 +131,7 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const pulseScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
   (0, _react.useEffect)(() => {
     if (!pulse || !shouldRender) {
-      pulseScale.setValue(1);
+      (0, _index.setNativeValue)(pulseScale, 1);
       return;
     }
     const loop = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -53,6 +53,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
     haptic = 'selection',
     showLabels = true,
     variant = 'pill',
+    indicatorPosition = 'bottom',
     style,
     indicatorStyle,
     labelStyle,
@@ -198,7 +199,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
         }, tab.key);
       }), variant === 'underline' && tabWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         pointerEvents: "none",
-        style: [styles.underline, {
+        style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom, {
           width: tabWidth,
           backgroundColor: theme.colors.primary,
           transform: [{
@@ -248,12 +249,19 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
   },
   underline: {
     position: 'absolute',
-    bottom: -6,
     left: 0,
-    height: UNDERLINE_HEIGHT,
+    height: UNDERLINE_HEIGHT
+  },
+  underlineBottom: {
+    bottom: -6,
     borderTopLeftRadius: 2,
     borderTopRightRadius: 2
   },
+  underlineTop: {
+    top: -6,
+    borderBottomLeftRadius: 2,
+    borderBottomRightRadius: 2
+  },
   badgePill: {
     position: 'absolute',
     top: -4,

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -135,8 +135,8 @@ const DatePicker = props => {
   (0, _react.useEffect)(() => {
     if (mode !== 'modal') return;
     if (visible) {
-      backdrop.setValue(0);
-      sheet.setValue(0);
+      (0, _index.setNativeValue)(backdrop, 0);
+      (0, _index.setNativeValue)(sheet, 0);
       _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
@@ -248,8 +248,8 @@ const DatePicker = props => {
 
   // View-mode transition: fade + scale (200ms, native driver).
   const animateViewTransition = (0, _react.useCallback)(() => {
-    viewFade.setValue(0);
-    viewScale.setValue(0.9);
+    (0, _index.setNativeValue)(viewFade, 0);
+    (0, _index.setNativeValue)(viewScale, 0.9);
     _reactNative.Animated.parallel([_reactNative.Animated.timing(viewFade, {
       toValue: 1,
       duration: 200,
@@ -300,7 +300,7 @@ const DatePicker = props => {
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
     }
-    selectScale.setValue(0.7);
+    (0, _index.setNativeValue)(selectScale, 0.7);
     _reactNative.Animated.spring(selectScale, {
       toValue: 1,
       damping: theme.motion.spring.bouncy.damping,
@@ -382,11 +382,16 @@ const DatePicker = props => {
             opacity: viewMode === 'days' ? monthFade : 1
           }],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
-            style: [styles.headerLabel, viewMode === 'days' ? {
+            style: [styles.headerLabel,
+            // Always include the transform — passing null/undefined as a
+            // transform value confuses Animated's processTransform on Fabric.
+            // When the month slide isn't active we still drive translateX
+            // through the same value, just with target 0.
+            {
               transform: [{
-                translateX: monthSlide
+                translateX: viewMode === 'days' ? monthSlide : 0
               }]
-            } : null],
+            }],
             accessibilityLiveRegion: "polite",
             children: headerLabel
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -452,11 +457,12 @@ const DatePicker = props => {
                   backgroundColor: cellBg,
                   borderColor,
                   borderWidth: todayCell && !selected ? 1.5 : 0,
-                  opacity,
-                  transform: selected ? [{
+                  opacity
+                }, selected ? {
+                  transform: [{
                     scale: selectScale
-                  }] : undefined
-                }],
+                  }]
+                } : null],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                   style: [styles.dayText, {
                     color: textColor

package/lib/commonjs/components/DateRangePicker/DateRangePicker.js

@@ -120,8 +120,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   // Modal open / close animation.
   (0, _react.useEffect)(() => {
     if (visible) {
-      backdrop.setValue(0);
-      sheet.setValue(0);
+      (0, _index.setNativeValue)(backdrop, 0);
+      (0, _index.setNativeValue)(sheet, 0);
       _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
@@ -561,26 +561,31 @@ const buildStyles = theme => {
       aspectRatio: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 2,
+      // No horizontal padding so the connector bars on adjacent cells meet
+      // without a gap. Vertical breathing room comes from dayInner's height.
+      padding: 0,
       position: 'relative'
     },
+    // Bars sit BEHIND dayInner and bridge the start/end circles to mid-range
+    // cells. Their height mirrors dayInner (~90% of cell height) so the visual
+    // pill is one continuous shape across multiple cells.
     barLeft: {
       position: 'absolute',
       left: 0,
       right: '50%',
-      top: '15%',
-      bottom: '15%'
+      top: '5%',
+      bottom: '5%'
     },
     barRight: {
       position: 'absolute',
       left: '50%',
       right: 0,
-      top: '15%',
-      bottom: '15%'
+      top: '5%',
+      bottom: '5%'
     },
     dayInner: {
-      width: '100%',
-      height: '100%',
+      width: '90%',
+      height: '90%',
       alignItems: 'center',
       justifyContent: 'center'
     },

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -86,7 +86,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     if (!hideOnScroll) {
-      hideAnim.setValue(0);
+      (0, _index.setNativeValue)(hideAnim, 0);
       return;
     }
     _reactNative.Animated.timing(hideAnim, {

package/lib/commonjs/components/Input/Input.js

@@ -147,7 +147,7 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const prevErrorRef = (0, _react.useRef)(hasError);
   (0, _react.useEffect)(() => {
     if (hasError && !prevErrorRef.current) {
-      shakeAnim.setValue(0);
+      (0, _index.setNativeValue)(shakeAnim, 0);
       _reactNative.Animated.sequence([_reactNative.Animated.timing(shakeAnim, {
         toValue: 1,
         duration: 50,

package/lib/commonjs/components/Modal/Modal.js

@@ -65,10 +65,10 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
         })]).start();
       }
     } else {
-      backdropAnim.setValue(0);
-      scaleAnim.setValue(0.9);
-      opacityAnim.setValue(0);
-      translateYAnim.setValue(screenHeight);
+      (0, _index.setNativeValue)(backdropAnim, 0);
+      (0, _index.setNativeValue)(scaleAnim, 0.9);
+      (0, _index.setNativeValue)(opacityAnim, 0);
+      (0, _index.setNativeValue)(translateYAnim, screenHeight);
     }
   }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass]);
 

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -89,7 +89,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     const isFirstRun = previousErrorRef.current === null;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
       (0, _index2.triggerHaptic)('notificationError');
-      shake.setValue(0);
+      (0, _index.setNativeValue)(shake, 0);
       _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
         toValue: 1,
         duration: 75,
@@ -175,16 +175,27 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     }
   }, [length, onChange, onComplete, value]);
   const handleChangeText = (0, _react.useCallback)((index, raw) => {
-    const sanitized = sanitizeChar(raw, keyboardType);
+    // Strip the ZWSP placeholder (used so iOS fires onKeyPress/Backspace on otherwise-empty cells).
+    const stripped = raw.replace(/\u200B/g, '');
+    const sanitized = sanitizeChar(stripped, keyboardType);
     if (!sanitized) {
-      // User cleared this cell explicitly via change (rare since we manage backspace via key-press).
+      // Cell was cleared (delete / cut). Clear this cell and step focus back.
       const chars = cells.slice();
+      const wasFilled = (chars[index] ?? '').length > 0;
       chars[index] = '';
       updateValue(chars.join('').slice(0, length));
+      if (!wasFilled && index > 0) {
+        // Empty cell + backspace → also clear and focus the previous cell.
+        const prev = cells.slice();
+        prev[index - 1] = '';
+        updateValue(prev.join(''));
+        focusCell(index - 1);
+      }
       return;
     }
 
     // Fill cells from current index onward (handles paste of multi-char text).
+    // For single-character typing, this overwrites the current cell and advances.
     const chars = cells.slice();
     let writeIndex = index;
     for (let i = 0; i < sanitized.length && writeIndex < length; i += 1) {
@@ -201,7 +212,6 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     // Move focus to the next empty cell or last cell.
     const nextFocus = Math.min(writeIndex, length - 1);
     if (writeIndex >= length) {
-      // All filled — blur last cell.
       inputsRef.current[length - 1]?.blur();
     } else {
       focusCell(nextFocus);
@@ -210,9 +220,12 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   const handleKeyPress = (0, _react.useCallback)((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;
+    // Backspace on a non-empty cell — clear it. Backspace on an empty cell —
+    // step back and clear the previous cell. handleChangeText also covers the
+    // empty-cell case via the ZWSP placeholder, so this branch only matters
+    // when the platform fires onKeyPress without firing onChangeText.
     const current = cells[index] ?? '';
     if (current.length === 0) {
-      // Move back, clear previous cell.
       if (index > 0) {
         const chars = cells.slice();
         chars[index - 1] = '';
@@ -288,8 +301,11 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
                 ref: node => {
                   inputsRef.current[index] = node;
-                },
-                value: secure && isFilled ? '' : char,
+                }
+                // Always render at least the ZWSP placeholder so iOS keeps
+                // firing onChangeText/onKeyPress for Backspace on empty cells.
+                ,
+                value: (secure && isFilled ? '' : char) || '\u200B',
                 onChangeText: t => handleChangeText(index, t),
                 onKeyPress: e => handleKeyPress(index, e),
                 onFocus: () => handleFocus(index),
@@ -297,8 +313,12 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
                 keyboardType: keyboardType,
                 editable: !disabled,
                 selectTextOnFocus: true,
-                caretHidden: isFilled,
-                maxLength: length,
+                caretHidden: isFilled
+                // Only the first cell accepts paste-like multi-char input
+                // (e.g., when SMS autofill or clipboard delivers the full code);
+                // every other cell is single-char so typing always overwrites.
+                ,
+                maxLength: index === 0 ? length : 2,
                 textContentType: index === 0 ? 'oneTimeCode' : 'none',
                 autoComplete: index === 0 ? 'sms-otp' : 'off',
                 importantForAutofill: index === 0 ? 'yes' : 'no',

package/lib/commonjs/components/ProgressBar/ProgressBar.js

@@ -67,7 +67,7 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [animated, clamped, fillAnim, isIndeterminate, theme]);
   (0, _react.useEffect)(() => {
     if (!isIndeterminate) return;
-    loopAnim.setValue(0);
+    (0, _index.setNativeValue)(loopAnim, 0);
     const animation = _reactNative.Animated.loop(_reactNative.Animated.timing(loopAnim, {
       toValue: 1,
       duration: 1500,

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -50,44 +50,39 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const sizeStyles = sizeMap[size];
 
-  // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
-  const trackWidthRef = (0, _react.useRef)(0);
+  // Track width is measured from onLayout. Thumb width is a regular number (not
+  // animated) — `width` cannot be driven by the native animated module, and mixing
+  // a JS-driven width with a native-driven translateX inside `Animated.parallel`
+  // sends the parallel composite into the native driver and JS setValue/timing
+  // calls on the same value then throw "moved to native". Keep width as state and
+  // only animate translateX via the native driver.
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const thumbTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const thumbWidth = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
-  const animateThumb = (0, _react.useCallback)((index, totalWidth) => {
-    if (totalWidth <= 0 || segments.length === 0) return;
-    const segWidth = (totalWidth - TRACK_PADDING * 2) / segments.length;
+  const segmentWidth = trackWidth > 0 ? (trackWidth - TRACK_PADDING * 2) / Math.max(segments.length, 1) : 0;
+  const animateThumb = (0, _react.useCallback)((index, segWidth) => {
+    if (segWidth <= 0) return;
     const targetX = TRACK_PADDING + segWidth * index;
     const spring = theme.motion.spring.snappy;
-    _reactNative.Animated.parallel([_reactNative.Animated.spring(thumbTranslateX, {
+    _reactNative.Animated.spring(thumbTranslateX, {
       toValue: targetX,
       damping: spring.damping,
       stiffness: spring.stiffness,
       mass: spring.mass,
       useNativeDriver: true
-    }), _reactNative.Animated.spring(thumbWidth, {
-      toValue: segWidth,
-      damping: spring.damping,
-      stiffness: spring.stiffness,
-      mass: spring.mass,
-      useNativeDriver: false
-    })]).start();
-  }, [segments.length, theme.motion.spring.snappy, thumbTranslateX, thumbWidth]);
+    }).start();
+  }, [theme.motion.spring.snappy, thumbTranslateX]);
   (0, _react.useEffect)(() => {
-    if (trackWidthRef.current > 0) {
-      animateThumb(activeIndex, trackWidthRef.current);
+    if (segmentWidth > 0) {
+      animateThumb(activeIndex, segmentWidth);
     }
-  }, [activeIndex, animateThumb]);
+  }, [activeIndex, segmentWidth, animateThumb]);
   const handleTrackLayout = (0, _react.useCallback)(e => {
     const width = e.nativeEvent.layout.width;
-    if (width === trackWidthRef.current) return;
-    trackWidthRef.current = width;
-    // Initial-position the thumb without animation jitter — set then animate to active.
-    const segWidth = (width - TRACK_PADDING * 2) / Math.max(segments.length, 1);
-    thumbWidth.setValue(segWidth);
-    thumbTranslateX.setValue(TRACK_PADDING + segWidth * activeIndex);
-  }, [activeIndex, segments.length, thumbTranslateX, thumbWidth]);
+    if (width !== trackWidth) {
+      setTrackWidth(width);
+    }
+  }, [trackWidth]);
   const handlePress = (0, _react.useCallback)(segment => {
     if (disabled) return;
     if (segment.value === value) return;
@@ -110,10 +105,10 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
       alignSelf: fullWidth ? 'stretch' : 'flex-start'
     }, style],
     onLayout: handleTrackLayout,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    children: [segmentWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: "none",
       style: [styles.thumb, {
-        width: thumbWidth,
+        width: segmentWidth,
         height: sizeStyles.height - TRACK_PADDING * 2,
         borderRadius: theme.radius.sm,
         backgroundColor: thumbBg,
@@ -122,7 +117,7 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
         }],
         ...theme.shadows.sm
       }]
-    }), segments.map(segment => {
+    }) : null, segments.map(segment => {
       const isActive = segment.value === value;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
         onPress: () => handlePress(segment),

package/lib/commonjs/components/Skeleton/Skeleton.js

@@ -55,7 +55,7 @@ const Skeleton = ({
   const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
-    progress.setValue(0);
+    (0, _index.setNativeValue)(progress, 0);
     const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
     const animation = resolvedVariant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
       toValue: 1,

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

@@ -110,14 +110,14 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       highRef.current = hi;
       lastReportedLow.current = lo;
       lastReportedHigh.current = hi;
-      lowX.setValue(valueToPx(lo, trackWidth));
-      highX.setValue(valueToPx(hi, trackWidth));
+      (0, _index.setNativeValue)(lowX, valueToPx(lo, trackWidth));
+      (0, _index.setNativeValue)(highX, valueToPx(hi, trackWidth));
     } else {
       const v = props.value;
       lowRef.current = v;
       highRef.current = v;
       lastReportedLow.current = v;
-      lowX.setValue(valueToPx(v, trackWidth));
+      (0, _index.setNativeValue)(lowX, valueToPx(v, trackWidth));
     }
     // We intentionally listen to props.value across both shapes via JSON; ESLint is fine.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -130,10 +130,10 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       const [v0, v1] = props.value;
       const lo = Math.min(v0, v1);
       const hi = Math.max(v0, v1);
-      lowX.setValue(valueToPx(lo, w));
-      highX.setValue(valueToPx(hi, w));
+      (0, _index.setNativeValue)(lowX, valueToPx(lo, w));
+      (0, _index.setNativeValue)(highX, valueToPx(hi, w));
     } else {
-      lowX.setValue(valueToPx(props.value, w));
+      (0, _index.setNativeValue)(lowX, valueToPx(props.value, w));
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -184,7 +184,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             lastReportedLow.current = nextValue;
           }
           lowRef.current = nextValue;
-          lowX.setValue(valueToPx(nextValue, trackWidth));
+          (0, _index.setNativeValue)(lowX, valueToPx(nextValue, trackWidth));
           fireChange(nextValue, highRef.current);
         } else {
           if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
@@ -193,7 +193,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             lastReportedHigh.current = nextValue;
           }
           highRef.current = nextValue;
-          highX.setValue(valueToPx(nextValue, trackWidth));
+          (0, _index.setNativeValue)(highX, valueToPx(nextValue, trackWidth));
           fireChange(lowRef.current, nextValue);
         }
       },
@@ -223,7 +223,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         toValue: valueToPx(next, trackWidth),
         duration: theme.motion.duration.fast,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: false
+        useNativeDriver: true
       }).start();
       fireChange(next, next);
     }
@@ -238,7 +238,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       if (nextLow !== lowRef.current) {
         lowRef.current = nextLow;
         lastReportedLow.current = nextLow;
-        lowX.setValue(valueToPx(nextLow, trackWidth));
+        (0, _index.setNativeValue)(lowX, valueToPx(nextLow, trackWidth));
         (0, _index2.triggerHaptic)('selection');
         fireChange(nextLow, highRef.current);
       }
@@ -247,7 +247,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       if (next !== lowRef.current) {
         lowRef.current = next;
         lastReportedLow.current = next;
-        lowX.setValue(valueToPx(next, trackWidth));
+        (0, _index.setNativeValue)(lowX, valueToPx(next, trackWidth));
         (0, _index2.triggerHaptic)('selection');
         fireChange(next, next);
       }

package/lib/commonjs/components/Stepper/Stepper.js

@@ -28,6 +28,7 @@ const StepCircle = ({
   status,
   toneColor,
   upcomingColor,
+  upcomingFillColor,
   textOnColor,
   upcomingTextColor,
   interactive,
@@ -70,7 +71,7 @@ const StepCircle = ({
     loop.start();
     return () => loop.stop();
   }, [isActive, pulseScale, pulseOpacity]);
-  const bgColor = status === 'upcoming' ? 'transparent' : toneColor;
+  const bgColor = status === 'upcoming' ? upcomingFillColor : toneColor;
   const borderColor = status === 'upcoming' ? upcomingColor : toneColor;
   const textColor = status === 'upcoming' ? upcomingTextColor : textOnColor;
   const isComplete = status === 'complete';
@@ -174,6 +175,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const toneColor = toneColorFor(theme, tone);
   const upcomingColor = theme.colors.border.primary;
+  const upcomingFillColor = theme.colors.background.primary;
   const upcomingTextColor = theme.colors.text.secondary;
   const textOnColor = theme.colors.text.inverse;
   const interactive = typeof onStepPress === 'function';
@@ -203,11 +205,15 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     outputRange: ['0%', '100%']
   });
   const a11yLabel = accessibilityLabel ?? `Progress: step ${activeStep + 1} of ${total}`;
+  const halfStepPct = total > 0 ? `${50 / total}%` : `0%`;
   const renderHorizontal = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.hRow,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       pointerEvents: "none",
-      style: styles.hConnectorContainer,
+      style: [styles.hConnectorContainer, {
+        left: halfStepPct,
+        right: halfStepPct
+      }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.hConnectorTrack, {
           backgroundColor: upcomingColor
@@ -228,6 +234,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
           status: status,
           toneColor: toneColor,
           upcomingColor: upcomingColor,
+          upcomingFillColor: upcomingFillColor,
           onPressColor: toneColor,
           textOnColor: textOnColor,
           upcomingTextColor: upcomingTextColor,
@@ -260,6 +267,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
             status: status,
             toneColor: toneColor,
             upcomingColor: upcomingColor,
+            upcomingFillColor: upcomingFillColor,
             onPressColor: toneColor,
             textOnColor: textOnColor,
             upcomingTextColor: upcomingTextColor,
@@ -338,8 +346,6 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
   hConnectorContainer: {
     position: 'absolute',
     top: CIRCLE_SIZE / 2 - 1,
-    left: CIRCLE_SIZE / 2,
-    right: CIRCLE_SIZE / 2,
     height: 2,
     flexDirection: 'row',
     alignItems: 'center'

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

@@ -47,15 +47,17 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   (0, _react.useEffect)(() => {
     if (!activeLayout) return;
     const spring = theme.motion.spring.snappy;
-    _reactNative.Animated.parallel([_reactNative.Animated.spring(indicatorTranslateX, {
+    _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.
+    _reactNative.Animated.spring(indicatorTranslateX, {
       toValue: activeLayout.x,
       damping: spring.damping,
       stiffness: spring.stiffness,
       mass: spring.mass,
-      useNativeDriver: true
-    }),
-    // width is a layout prop — must run on JS thread (useNativeDriver: false).
-    _reactNative.Animated.spring(indicatorWidth, {
+      useNativeDriver: false
+    }), _reactNative.Animated.spring(indicatorWidth, {
       toValue: activeLayout.width,
       damping: spring.damping,
       stiffness: spring.stiffness,

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

@@ -74,7 +74,7 @@ const Wheel = ({
     if (lastIndexRef.current !== selectedIndex) {
       lastIndexRef.current = selectedIndex;
       const offset = selectedIndex * ITEM_HEIGHT;
-      scrollY.setValue(offset);
+      (0, _index.setNativeValue)(scrollY, offset);
       // Defer to next frame so FlatList has measured.
       requestAnimationFrame(() => {
         listRef.current?.scrollToOffset({
@@ -281,8 +281,8 @@ const TimePicker = ({
         useNativeDriver: true
       })]).start();
     } else {
-      opacity.setValue(0);
-      translateY.setValue(40);
+      (0, _index.setNativeValue)(opacity, 0);
+      (0, _index.setNativeValue)(translateY, 40);
     }
   }, [visible, opacity, translateY, theme.motion]);
   const announce = (0, _react.useCallback)(msg => {

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

@@ -73,9 +73,9 @@ const Toast = ({
   const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
     onMoveShouldSetPanResponder: (_evt, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy) && Math.abs(gesture.dx) > 6,
     onPanResponderMove: (_evt, gesture) => {
-      translateX.setValue(gesture.dx);
+      (0, _index.setNativeValue)(translateX, gesture.dx);
       const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
-      opacity.setValue(fade);
+      (0, _index.setNativeValue)(opacity, fade);
     },
     onPanResponderRelease: (_evt, gesture) => {
       if (Math.abs(gesture.dx) > SWIPE_DISMISS_THRESHOLD || Math.abs(gesture.vx) > SWIPE_VELOCITY_THRESHOLD) {

package/lib/commonjs/theme/animatedValue.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAnimatedValue = void 0;
+exports.setNativeValue = exports.createAnimatedValue = void 0;
 var _reactNative = require("react-native");
 /**
  * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
@@ -24,5 +24,24 @@ var _reactNative = require("react-native");
  * Use everywhere the library would otherwise call `new Animated.Value(...)`.
  */
 const createAnimatedValue = (initial, config) => Object.seal(new _reactNative.Animated.Value(initial, config));
+
+/**
+ * Set an `Animated.Value` to a target without going through JS.
+ *
+ * Once a value has been driven by `useNativeDriver: true`, the underlying
+ * native node owns it — calling `value.setValue(x)` from JS throws
+ *   "Attempting to run JS driven animation on animated node that has been moved to native".
+ * Use this helper for any value that is *also* used in a native-driven
+ * `Animated.timing/spring`. A zero-duration native timing routes the update
+ * through the same driver and stays valid across re-mounts and re-runs.
+ */
 exports.createAnimatedValue = createAnimatedValue;
+const setNativeValue = (value, to) => {
+  _reactNative.Animated.timing(value, {
+    toValue: to,
+    duration: 0,
+    useNativeDriver: true
+  }).start();
+};
+exports.setNativeValue = setNativeValue;
 //# sourceMappingURL=animatedValue.js.map

package/lib/commonjs/theme/index.js

@@ -52,7 +52,14 @@ Object.defineProperty(exports, "mergeTheme", {
     return _merge.mergeTheme;
   }
 });
-exports.subscribeTheme = exports.setTheme = exports.setColorMode = exports.resetTheme = void 0;
+exports.setColorMode = exports.resetTheme = void 0;
+Object.defineProperty(exports, "setNativeValue", {
+  enumerable: true,
+  get: function () {
+    return _animatedValue.setNativeValue;
+  }
+});
+exports.subscribeTheme = exports.setTheme = void 0;
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {