@webority-technologies/mobile 0.0.12 → 0.0.14

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

@@ -8,7 +8,7 @@
  * fully accessible (radiogroup / radio roles + selected state).
  */
 
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
@@ -45,44 +45,39 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const sizeStyles = sizeMap[size];
 
-  // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
-  const trackWidthRef = 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] = useState(0);
   const thumbTranslateX = useRef(createAnimatedValue(0)).current;
-  const thumbWidth = useRef(createAnimatedValue(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
-  const animateThumb = useCallback((index, totalWidth) => {
-    if (totalWidth <= 0 || segments.length === 0) return;
-    const segWidth = (totalWidth - TRACK_PADDING * 2) / segments.length;
+  const segmentWidth = trackWidth > 0 ? (trackWidth - TRACK_PADDING * 2) / Math.max(segments.length, 1) : 0;
+  const animateThumb = useCallback((index, segWidth) => {
+    if (segWidth <= 0) return;
     const targetX = TRACK_PADDING + segWidth * index;
     const spring = theme.motion.spring.snappy;
-    Animated.parallel([Animated.spring(thumbTranslateX, {
+    Animated.spring(thumbTranslateX, {
       toValue: targetX,
       damping: spring.damping,
       stiffness: spring.stiffness,
       mass: spring.mass,
       useNativeDriver: true
-    }), 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]);
   useEffect(() => {
-    if (trackWidthRef.current > 0) {
-      animateThumb(activeIndex, trackWidthRef.current);
+    if (segmentWidth > 0) {
+      animateThumb(activeIndex, segmentWidth);
     }
-  }, [activeIndex, animateThumb]);
+  }, [activeIndex, segmentWidth, animateThumb]);
   const handleTrackLayout = 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 = useCallback(segment => {
     if (disabled) return;
     if (segment.value === value) return;
@@ -105,10 +100,10 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
       alignSelf: fullWidth ? 'stretch' : 'flex-start'
     }, style],
     onLayout: handleTrackLayout,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
+    children: [segmentWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       style: [styles.thumb, {
-        width: thumbWidth,
+        width: segmentWidth,
         height: sizeStyles.height - TRACK_PADDING * 2,
         borderRadius: theme.radius.sm,
         backgroundColor: thumbBg,
@@ -117,7 +112,7 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
         }],
         ...theme.shadows.sm
       }]
-    }), segments.map(segment => {
+    }) : null, segments.map(segment => {
       const isActive = segment.value === value;
       return /*#__PURE__*/_jsxs(Pressable, {
         onPress: () => handlePress(segment),

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

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { Responsive } from "../../utils/index.js";
 import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -50,7 +50,7 @@ const Skeleton = ({
   const progress = useRef(createAnimatedValue(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
   useEffect(() => {
-    progress.setValue(0);
+    setNativeValue(progress, 0);
     const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
     const animation = resolvedVariant === 'pulse' ? Animated.loop(Animated.sequence([Animated.timing(progress, {
       toValue: 1,

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

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_MAP = {
@@ -105,14 +105,14 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       highRef.current = hi;
       lastReportedLow.current = lo;
       lastReportedHigh.current = hi;
-      lowX.setValue(valueToPx(lo, trackWidth));
-      highX.setValue(valueToPx(hi, trackWidth));
+      setNativeValue(lowX, valueToPx(lo, trackWidth));
+      setNativeValue(highX, valueToPx(hi, trackWidth));
     } else {
       const v = props.value;
       lowRef.current = v;
       highRef.current = v;
       lastReportedLow.current = v;
-      lowX.setValue(valueToPx(v, trackWidth));
+      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
@@ -125,10 +125,10 @@ const Slider = /*#__PURE__*/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));
+      setNativeValue(lowX, valueToPx(lo, w));
+      setNativeValue(highX, valueToPx(hi, w));
     } else {
-      lowX.setValue(valueToPx(props.value, w));
+      setNativeValue(lowX, valueToPx(props.value, w));
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -179,7 +179,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
             lastReportedLow.current = nextValue;
           }
           lowRef.current = nextValue;
-          lowX.setValue(valueToPx(nextValue, trackWidth));
+          setNativeValue(lowX, valueToPx(nextValue, trackWidth));
           fireChange(nextValue, highRef.current);
         } else {
           if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
@@ -188,7 +188,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
             lastReportedHigh.current = nextValue;
           }
           highRef.current = nextValue;
-          highX.setValue(valueToPx(nextValue, trackWidth));
+          setNativeValue(highX, valueToPx(nextValue, trackWidth));
           fireChange(lowRef.current, nextValue);
         }
       },
@@ -218,7 +218,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
         toValue: valueToPx(next, trackWidth),
         duration: theme.motion.duration.fast,
         easing: Easing.out(Easing.cubic),
-        useNativeDriver: false
+        useNativeDriver: true
       }).start();
       fireChange(next, next);
     }
@@ -233,7 +233,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       if (nextLow !== lowRef.current) {
         lowRef.current = nextLow;
         lastReportedLow.current = nextLow;
-        lowX.setValue(valueToPx(nextLow, trackWidth));
+        setNativeValue(lowX, valueToPx(nextLow, trackWidth));
         triggerHaptic('selection');
         fireChange(nextLow, highRef.current);
       }
@@ -242,7 +242,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       if (next !== lowRef.current) {
         lowRef.current = next;
         lastReportedLow.current = next;
-        lowX.setValue(valueToPx(next, trackWidth));
+        setNativeValue(lowX, valueToPx(next, trackWidth));
         triggerHaptic('selection');
         fireChange(next, next);
       }

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

@@ -23,6 +23,7 @@ const StepCircle = ({
   status,
   toneColor,
   upcomingColor,
+  upcomingFillColor,
   textOnColor,
   upcomingTextColor,
   interactive,
@@ -65,7 +66,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';
@@ -169,6 +170,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = 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';
@@ -198,11 +200,15 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     outputRange: ['0%', '100%']
   });
   const a11yLabel = accessibilityLabel ?? `Progress: step ${activeStep + 1} of ${total}`;
+  const halfStepPct = total > 0 ? `${50 / total}%` : `0%`;
   const renderHorizontal = () => /*#__PURE__*/_jsxs(View, {
     style: styles.hRow,
     children: [/*#__PURE__*/_jsxs(View, {
       pointerEvents: "none",
-      style: styles.hConnectorContainer,
+      style: [styles.hConnectorContainer, {
+        left: halfStepPct,
+        right: halfStepPct
+      }],
       children: [/*#__PURE__*/_jsx(View, {
         style: [styles.hConnectorTrack, {
           backgroundColor: upcomingColor
@@ -223,6 +229,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
           status: status,
           toneColor: toneColor,
           upcomingColor: upcomingColor,
+          upcomingFillColor: upcomingFillColor,
           onPressColor: toneColor,
           textOnColor: textOnColor,
           upcomingTextColor: upcomingTextColor,
@@ -255,6 +262,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
             status: status,
             toneColor: toneColor,
             upcomingColor: upcomingColor,
+            upcomingFillColor: upcomingFillColor,
             onPressColor: toneColor,
             textOnColor: textOnColor,
             upcomingTextColor: upcomingTextColor,
@@ -333,8 +341,6 @@ const buildStyles = theme => 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/module/components/Tabs/Tabs.js

@@ -42,15 +42,17 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     if (!activeLayout) return;
     const spring = theme.motion.spring.snappy;
-    Animated.parallel([Animated.spring(indicatorTranslateX, {
+    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.
+    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).
-    Animated.spring(indicatorWidth, {
+      useNativeDriver: false
+    }), Animated.spring(indicatorWidth, {
       toValue: activeLayout.width,
       damping: spring.damping,
       stiffness: spring.stiffness,

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

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import Button from "../Button/Button.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -68,7 +68,7 @@ const Wheel = ({
     if (lastIndexRef.current !== selectedIndex) {
       lastIndexRef.current = selectedIndex;
       const offset = selectedIndex * ITEM_HEIGHT;
-      scrollY.setValue(offset);
+      setNativeValue(scrollY, offset);
       // Defer to next frame so FlatList has measured.
       requestAnimationFrame(() => {
         listRef.current?.scrollToOffset({
@@ -275,8 +275,8 @@ const TimePicker = ({
         useNativeDriver: true
       })]).start();
     } else {
-      opacity.setValue(0);
-      translateY.setValue(40);
+      setNativeValue(opacity, 0);
+      setNativeValue(translateY, 40);
     }
   }, [visible, opacity, translateY, theme.motion]);
   const announce = useCallback(msg => {

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

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWIPE_DISMISS_THRESHOLD = 80;
 const SWIPE_VELOCITY_THRESHOLD = 0.5;
@@ -68,9 +68,9 @@ const Toast = ({
   const panResponder = useMemo(() => 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);
+      setNativeValue(translateX, gesture.dx);
       const fade = 1 - Math.min(Math.abs(gesture.dx) / 200, 1) * 0.7;
-      opacity.setValue(fade);
+      setNativeValue(opacity, fade);
     },
     onPanResponderRelease: (_evt, gesture) => {
       if (Math.abs(gesture.dx) > SWIPE_DISMISS_THRESHOLD || Math.abs(gesture.vx) > SWIPE_VELOCITY_THRESHOLD) {

package/lib/module/theme/animatedValue.js

@@ -21,4 +21,22 @@ import { Animated } from 'react-native';
  * Use everywhere the library would otherwise call `new Animated.Value(...)`.
  */
 export const createAnimatedValue = (initial, config) => Object.seal(new 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.
+ */
+export const setNativeValue = (value, to) => {
+  Animated.timing(value, {
+    toValue: to,
+    duration: 0,
+    useNativeDriver: true
+  }).start();
+};
 //# sourceMappingURL=animatedValue.js.map

package/lib/module/theme/index.js

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

package/lib/typescript/commonjs/components/BottomNavigation/BottomNavigation.d.ts

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 export type BottomNavigationVariant = 'pill' | 'underline';
+export type BottomNavigationIndicatorPosition = 'top' | 'bottom';
 export type TabBadge = number | string | boolean | null;
 export interface TabIconProps {
     color: string;
@@ -23,6 +24,12 @@ export interface BottomNavigationProps {
     haptic?: HapticType | false;
     showLabels?: boolean;
     variant?: BottomNavigationVariant;
+    /**
+     * Where the active-tab line sits, for variants that draw a line
+     * (currently `underline`). Default `'bottom'` preserves the legacy look;
+     * `'top'` flips the line to sit just above the tab row.
+     */
+    indicatorPosition?: BottomNavigationIndicatorPosition;
     style?: StyleProp<ViewStyle>;
     indicatorStyle?: StyleProp<ViewStyle>;
     labelStyle?: StyleProp<TextStyle>;

package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts

@@ -20,6 +20,7 @@ import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type SnapPoint = number | `${number}%`;
 export type KeyboardBehavior = 'none' | 'shift';
+export type BottomSheetMode = 'modal' | 'inline';
 export interface BottomSheetProps {
     snapPoints: SnapPoint[];
     index?: number;
@@ -37,6 +38,15 @@ export interface BottomSheetProps {
      *   sheet itself.
      */
     keyboardBehavior?: KeyboardBehavior;
+    /**
+     * How the sheet is mounted in the view tree.
+     * - `'modal'` (default): rendered inside a native `<Modal>` so the backdrop
+     *   covers the entire screen (status bar, headers, tab bars) — the standard
+     *   bottom-sheet UX.
+     * - `'inline'`: rendered as an `absoluteFill` overlay inside the parent
+     *   component. Useful when embedding a sheet within a bounded area.
+     */
+    mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;

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

@@ -18,4 +18,15 @@ import { Animated } from 'react-native';
  * Use everywhere the library would otherwise call `new Animated.Value(...)`.
  */
 export declare const createAnimatedValue: (initial: number, config?: ConstructorParameters<typeof Animated.Value>[1]) => Animated.Value;
+/**
+ * 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.
+ */
+export declare const setNativeValue: (value: Animated.Value, to: number) => void;
 //# sourceMappingURL=animatedValue.d.ts.map

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

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

package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
 export type BottomNavigationVariant = 'pill' | 'underline';
+export type BottomNavigationIndicatorPosition = 'top' | 'bottom';
 export type TabBadge = number | string | boolean | null;
 export interface TabIconProps {
     color: string;
@@ -23,6 +24,12 @@ export interface BottomNavigationProps {
     haptic?: HapticType | false;
     showLabels?: boolean;
     variant?: BottomNavigationVariant;
+    /**
+     * Where the active-tab line sits, for variants that draw a line
+     * (currently `underline`). Default `'bottom'` preserves the legacy look;
+     * `'top'` flips the line to sit just above the tab row.
+     */
+    indicatorPosition?: BottomNavigationIndicatorPosition;
     style?: StyleProp<ViewStyle>;
     indicatorStyle?: StyleProp<ViewStyle>;
     labelStyle?: StyleProp<TextStyle>;

package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts

@@ -20,6 +20,7 @@ import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type SnapPoint = number | `${number}%`;
 export type KeyboardBehavior = 'none' | 'shift';
+export type BottomSheetMode = 'modal' | 'inline';
 export interface BottomSheetProps {
     snapPoints: SnapPoint[];
     index?: number;
@@ -37,6 +38,15 @@ export interface BottomSheetProps {
      *   sheet itself.
      */
     keyboardBehavior?: KeyboardBehavior;
+    /**
+     * How the sheet is mounted in the view tree.
+     * - `'modal'` (default): rendered inside a native `<Modal>` so the backdrop
+     *   covers the entire screen (status bar, headers, tab bars) — the standard
+     *   bottom-sheet UX.
+     * - `'inline'`: rendered as an `absoluteFill` overlay inside the parent
+     *   component. Useful when embedding a sheet within a bounded area.
+     */
+    mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;

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

@@ -18,4 +18,15 @@ import { Animated } from 'react-native';
  * Use everywhere the library would otherwise call `new Animated.Value(...)`.
  */
 export declare const createAnimatedValue: (initial: number, config?: ConstructorParameters<typeof Animated.Value>[1]) => Animated.Value;
+/**
+ * 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.
+ */
+export declare const setNativeValue: (value: Animated.Value, to: number) => void;
 //# sourceMappingURL=animatedValue.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",