@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/commonjs/index.js

@@ -42,6 +42,8 @@ var _exportNames = {
   useToggle: true,
   useDebounce: true,
   usePressAnimation: true,
+  useReducedMotion: true,
+  useControllableState: true,
   ScreenDimensions: true,
   Breakpoints: true,
   Responsive: true,
@@ -83,6 +85,16 @@ var _exportNames = {
   isBetween: true,
   minLength: true,
   maxLength: true,
+  useForm: true,
+  useField: true,
+  useFieldArray: true,
+  Form: true,
+  useFormContext: true,
+  useOptionalFormContext: true,
+  rules: true,
+  getPath: true,
+  setPath: true,
+  deletePath: true,
   useNetworkStatus: true,
   getNetworkStatus: true,
   addNetworkStatusListener: true,
@@ -95,6 +107,12 @@ Object.defineProperty(exports, "Breakpoints", {
     return _index7.Breakpoints;
   }
 });
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _index0.Form;
+  }
+});
 Object.defineProperty(exports, "Logger", {
   enumerable: true,
   get: function () {
@@ -110,7 +128,7 @@ Object.defineProperty(exports, "Margin", {
 Object.defineProperty(exports, "NetworkStatusBanner", {
   enumerable: true,
   get: function () {
-    return _index0.NetworkStatusBanner;
+    return _index1.NetworkStatusBanner;
   }
 });
 Object.defineProperty(exports, "Padding", {
@@ -122,7 +140,7 @@ Object.defineProperty(exports, "Padding", {
 Object.defineProperty(exports, "Permissions", {
   enumerable: true,
   get: function () {
-    return _index1.Permissions;
+    return _index10.Permissions;
   }
 });
 Object.defineProperty(exports, "Responsive", {
@@ -164,7 +182,7 @@ Object.defineProperty(exports, "VersionCheck", {
 Object.defineProperty(exports, "addNetworkStatusListener", {
   enumerable: true,
   get: function () {
-    return _index0.addNetworkStatusListener;
+    return _index1.addNetworkStatusListener;
   }
 });
 Object.defineProperty(exports, "compressImage", {
@@ -185,6 +203,12 @@ Object.defineProperty(exports, "decodeJWT", {
     return _jwt.decodeJWT;
   }
 });
+Object.defineProperty(exports, "deletePath", {
+  enumerable: true,
+  get: function () {
+    return _index0.deletePath;
+  }
+});
 Object.defineProperty(exports, "formatCompactNumber", {
   enumerable: true,
   get: function () {
@@ -272,7 +296,13 @@ Object.defineProperty(exports, "getJWTExpiry", {
 Object.defineProperty(exports, "getNetworkStatus", {
   enumerable: true,
   get: function () {
-    return _index0.getNetworkStatus;
+    return _index1.getNetworkStatus;
+  }
+});
+Object.defineProperty(exports, "getPath", {
+  enumerable: true,
+  get: function () {
+    return _index0.getPath;
   }
 });
 Object.defineProperty(exports, "getTheme", {
@@ -485,6 +515,12 @@ Object.defineProperty(exports, "resetTheme", {
     return _index5.resetTheme;
   }
 });
+Object.defineProperty(exports, "rules", {
+  enumerable: true,
+  get: function () {
+    return _index0.rules;
+  }
+});
 Object.defineProperty(exports, "setColorMode", {
   enumerable: true,
   get: function () {
@@ -503,6 +539,12 @@ Object.defineProperty(exports, "setHapticImplementation", {
     return _index7.setHapticImplementation;
   }
 });
+Object.defineProperty(exports, "setPath", {
+  enumerable: true,
+  get: function () {
+    return _index0.setPath;
+  }
+});
 Object.defineProperty(exports, "setRemoteLogger", {
   enumerable: true,
   get: function () {
@@ -545,16 +587,52 @@ Object.defineProperty(exports, "triggerHaptic", {
     return _index7.triggerHaptic;
   }
 });
+Object.defineProperty(exports, "useControllableState", {
+  enumerable: true,
+  get: function () {
+    return _index6.useControllableState;
+  }
+});
 Object.defineProperty(exports, "useDebounce", {
   enumerable: true,
   get: function () {
     return _index6.useDebounce;
   }
 });
+Object.defineProperty(exports, "useField", {
+  enumerable: true,
+  get: function () {
+    return _index0.useField;
+  }
+});
+Object.defineProperty(exports, "useFieldArray", {
+  enumerable: true,
+  get: function () {
+    return _index0.useFieldArray;
+  }
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function () {
+    return _index0.useForm;
+  }
+});
+Object.defineProperty(exports, "useFormContext", {
+  enumerable: true,
+  get: function () {
+    return _index0.useFormContext;
+  }
+});
 Object.defineProperty(exports, "useNetworkStatus", {
   enumerable: true,
   get: function () {
-    return _index0.useNetworkStatus;
+    return _index1.useNetworkStatus;
+  }
+});
+Object.defineProperty(exports, "useOptionalFormContext", {
+  enumerable: true,
+  get: function () {
+    return _index0.useOptionalFormContext;
   }
 });
 Object.defineProperty(exports, "usePressAnimation", {
@@ -563,6 +641,12 @@ Object.defineProperty(exports, "usePressAnimation", {
     return _index6.usePressAnimation;
   }
 });
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _index6.useReducedMotion;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -609,17 +693,18 @@ var _index6 = require("./hooks/index.js");
 var _index7 = require("./utils/index.js");
 var _index8 = require("./formatters/index.js");
 var _index9 = require("./validators/index.js");
-var _index0 = require("./network/index.js");
-var _index1 = require("./permissions/index.js");
-var _index10 = require("./components/index.js");
-Object.keys(_index10).forEach(function (key) {
+var _index0 = require("./form/index.js");
+var _index1 = require("./network/index.js");
+var _index10 = require("./permissions/index.js");
+var _index11 = require("./components/index.js");
+Object.keys(_index11).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index10[key]) return;
+  if (key in exports && exports[key] === _index11[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _index10[key];
+      return _index11[key];
     }
   });
 });

package/lib/commonjs/theme/ThemeContext.js

@@ -8,8 +8,31 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _tokens = require("./tokens.js");
 var _merge = require("./merge.js");
+var _useReducedMotion = require("../hooks/useReducedMotion.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 REDUCED_SPRING = {
+  damping: 100,
+  stiffness: 1000,
+  mass: 1
+};
+// Reduce Motion: collapse timed animations to instant and make springs settle in
+// ~1 frame, so vestibular-sensitive users aren't subjected to slides/scales/bounces.
+const collapseMotion = motion => ({
+  ...motion,
+  duration: {
+    instant: 0,
+    fast: 0,
+    normal: 0,
+    slow: 0,
+    slower: 0
+  },
+  spring: {
+    gentle: REDUCED_SPRING,
+    bouncy: REDUCED_SPRING,
+    snappy: REDUCED_SPRING
+  }
+});
 const defaultValue = {
   theme: _tokens.lightTheme,
   mode: 'light',
@@ -35,11 +58,16 @@ const ThemeProvider = ({
     return () => sub.remove();
   }, []);
   const mode = preference === 'system' ? systemMode : preference;
+  const reduceMotion = (0, _useReducedMotion.useReducedMotion)();
   const theme = (0, _react.useMemo)(() => {
     const base = mode === 'dark' ? _tokens.darkTheme : _tokens.lightTheme;
     const overrides = mode === 'dark' ? darkOverrides : lightOverrides;
-    return overrides ? (0, _merge.mergeTheme)(base, overrides) : base;
-  }, [mode, lightOverrides, darkOverrides]);
+    const merged = overrides ? (0, _merge.mergeTheme)(base, overrides) : base;
+    return reduceMotion ? {
+      ...merged,
+      motion: collapseMotion(merged.motion)
+    } : merged;
+  }, [mode, lightOverrides, darkOverrides, reduceMotion]);
   const value = (0, _react.useMemo)(() => ({
     theme,
     mode,

package/lib/commonjs/theme/tokens.js

@@ -525,6 +525,12 @@ const lightTheme = exports.lightTheme = {
     warning: '#F59E0B',
     error: '#E5484D',
     info: '#3B82F6',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#0F0F1A',
+    onSuccess: '#FFFFFF',
+    onWarning: '#0F0F1A',
+    onError: '#FFFFFF',
+    onInfo: '#FFFFFF',
     text: {
       primary: '#0F0F1A',
       secondary: '#52525B',
@@ -580,6 +586,12 @@ const darkTheme = exports.darkTheme = {
     warning: '#FBBF24',
     error: '#F87171',
     info: '#60A5FA',
+    onPrimary: '#0F0F1A',
+    onSecondary: '#FAFAFA',
+    onSuccess: '#0F0F1A',
+    onWarning: '#0F0F1A',
+    onError: '#0F0F1A',
+    onInfo: '#0F0F1A',
     text: {
       primary: '#FAFAFA',
       secondary: '#B4B4BB',

package/lib/commonjs/utils/hapticUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.triggerHaptic = exports.setHapticImplementation = void 0;
+exports.triggerHaptic = exports.setHapticImplementation = exports.resolveHaptic = void 0;
 var _reactNative = require("react-native");
 let hapticImpl = null;
 const tryLoadOptional = () => {
@@ -53,5 +53,15 @@ exports.triggerHaptic = triggerHaptic;
 const setHapticImplementation = impl => {
   hapticImpl = impl;
 };
+
+/**
+ * Resolves a component's `haptic` prop to the type that should fire, or null
+ * when haptics are off. `false` disables; a `HapticType` overrides; `undefined`
+ * falls back to the component's sensible default. Pair with `triggerHaptic`:
+ *   const h = resolveHaptic(haptic, 'selection');
+ *   if (h) triggerHaptic(h);
+ */
 exports.setHapticImplementation = setHapticImplementation;
+const resolveHaptic = (haptic, fallbackType) => haptic === false ? null : haptic ?? fallbackType;
+exports.resolveHaptic = resolveHaptic;
 //# sourceMappingURL=hapticUtils.js.map

package/lib/commonjs/utils/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "isTablet", {
     return _responsive.isTablet;
   }
 });
+Object.defineProperty(exports, "resolveHaptic", {
+  enumerable: true,
+  get: function () {
+    return _hapticUtils.resolveHaptic;
+  }
+});
 Object.defineProperty(exports, "setHapticImplementation", {
   enumerable: true,
   get: function () {

package/lib/module/components/Accordion/Accordion.js

@@ -3,7 +3,7 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionGroupContext = /*#__PURE__*/createContext(null);
@@ -90,7 +90,8 @@ const Accordion = props => {
     contentWrapperStyle,
     containerStyle,
     testID,
-    loading = false
+    loading = false,
+    haptic
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
@@ -108,7 +109,7 @@ const Accordion = props => {
     // Skip animation when state matches the previous value (e.g. on mount).
     if (lastExpandedRef.current === expanded) return;
     lastExpandedRef.current = expanded;
-    Animated.parallel([Animated.timing(heightAnim, {
+    const anim = Animated.parallel([Animated.timing(heightAnim, {
       toValue: expanded ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
@@ -127,7 +128,9 @@ const Accordion = props => {
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    })]).start();
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [expanded, heightAnim, opacityAnim, rotateAnim, theme.motion]);
   const onContentLayout = useCallback(e => {
     const h = e.nativeEvent.layout.height;
@@ -135,9 +138,8 @@ const Accordion = props => {
   }, [measuredHeight]);
   const handlePress = useCallback(() => {
     if (disabled) return;
-    if (theme.components.accordion?.pressHaptic ?? false) {
-      triggerHaptic('selection');
-    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (group && id) {
       group.toggle(id);
       onChange?.(!expanded);
@@ -145,7 +147,7 @@ const Accordion = props => {
     }
     if (!isControlled) setInternalExpanded(!expanded);
     onChange?.(!expanded);
-  }, [disabled, group, id, expanded, isControlled, onChange, theme.components.accordion]);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
   const rotate = rotateAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

package/lib/module/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import React from 'react';
+import Animated, { FadeIn, FadeInDown, FadeInUp, FadeOut, FadeOutDown, FadeOutUp, ZoomIn, ZoomOut } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+const AnimatePresence = ({
+  children,
+  preset = 'fade',
+  duration,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const reduceMotion = useReducedMotion();
+  const visible = children !== null && children !== undefined && children !== false;
+  if (!visible) return null;
+  const dur = duration ?? theme.motion.duration.normal;
+  let entering;
+  let exiting;
+  if (!reduceMotion) {
+    switch (preset) {
+      case 'scale':
+        entering = ZoomIn.duration(dur);
+        exiting = ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = FadeInUp.duration(dur);
+        exiting = FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = FadeInDown.duration(dur);
+        exiting = FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = FadeIn.duration(dur);
+        exiting = FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+AnimatePresence.displayName = 'AnimatePresence';
+export { AnimatePresence };
+export default AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

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

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

package/lib/module/components/AppBar/AppBar.js

@@ -5,7 +5,7 @@ import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const variantSize = (theme, variant) => {
   switch (variant) {
@@ -36,7 +36,8 @@ const variantSize = (theme, variant) => {
 const ActionButton = ({
   action,
   side,
-  badgeStyle
+  badgeStyle,
+  haptic
 }) => {
   const theme = useTheme();
   const {
@@ -48,9 +49,8 @@ const ActionButton = ({
   });
   const styles = useMemo(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    if (theme.components.appBar?.pressHaptic ?? false) {
-      triggerHaptic('selection');
-    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -108,6 +108,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     titleStyle,
     subtitleStyle,
     badgeStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -225,7 +226,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         style: styles.sideSlot,
         children: leftAction ? /*#__PURE__*/_jsx(ActionButton, {
           action: leftAction,
-          side: "left"
+          side: "left",
+          haptic: haptic
         }) : null
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
@@ -235,7 +237,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
           action: action,
           side: "right",
-          badgeStyle: badgeStyle
+          badgeStyle: badgeStyle,
+          haptic: haptic
         }, `appbar-right-${index}`))
       })]
     })]

package/lib/module/components/Avatar/Avatar.js

@@ -208,13 +208,15 @@ const AvatarGroupItem = ({
 }) => {
   const opacity = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
-    Animated.timing(opacity, {
+    const anim = Animated.timing(opacity, {
       toValue: 1,
       duration: ENTRANCE_DURATION_MS,
       delay,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [delay, opacity]);
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [groupStyles.item, {

package/lib/module/components/Badge/Badge.js

@@ -10,22 +10,22 @@ const toneFor = (theme, tone) => {
     case 'primary':
       return {
         background: theme.colors.primary,
-        text: theme.colors.text.inverse
+        text: theme.colors.onPrimary
       };
     case 'success':
       return {
         background: theme.colors.success,
-        text: theme.colors.text.inverse
+        text: theme.colors.onSuccess
       };
     case 'warning':
       return {
         background: theme.colors.warning,
-        text: theme.colors.text.inverse
+        text: theme.colors.onWarning
       };
     case 'info':
       return {
         background: theme.colors.info,
-        text: theme.colors.text.inverse
+        text: theme.colors.onInfo
       };
     case 'neutral':
       return {
@@ -36,7 +36,7 @@ const toneFor = (theme, tone) => {
     default:
       return {
         background: theme.colors.error,
-        text: theme.colors.text.inverse
+        text: theme.colors.onError
       };
   }
 };

package/lib/module/components/Banner/Banner.js

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton, SkeletonText } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
@@ -14,6 +15,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     actions,
     dismissible = false,
     onDismiss,
+    haptic,
     visible = true,
     animateMount = true,
     loading = false,
@@ -39,9 +41,10 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       isFirstRun.current = false;
       if (!animateMount) return;
     }
+    let anim;
     if (visible) {
       setMounted(true);
-      Animated.parallel([Animated.timing(translateY, {
+      anim = Animated.parallel([Animated.timing(translateY, {
         toValue: 0,
         duration: theme.motion.duration.normal,
         useNativeDriver: true
@@ -49,9 +52,10 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         toValue: 1,
         duration: theme.motion.duration.normal,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     } else if (mounted) {
-      Animated.parallel([Animated.timing(translateY, {
+      anim = Animated.parallel([Animated.timing(translateY, {
         toValue: -20,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
@@ -59,10 +63,12 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         toValue: 0,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
-      })]).start(() => {
+      })]);
+      anim.start(() => {
         setMounted(false);
       });
     }
+    return () => anim?.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   if (!mounted) return null;
@@ -139,7 +145,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       }), dismissible ? /*#__PURE__*/_jsx(Pressable, {
         accessibilityRole: "button",
         accessibilityLabel: "Dismiss banner",
-        onPress: onDismiss,
+        onPress: () => {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) triggerHaptic(h);
+          onDismiss?.();
+        },
         hitSlop: 8,
         style: ({
           pressed
@@ -164,7 +174,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         return /*#__PURE__*/_jsx(Pressable, {
           accessibilityRole: "button",
           accessibilityLabel: action.label,
-          onPress: action.onPress,
+          onPress: () => {
+            const h = resolveHaptic(haptic, 'selection');
+            if (h) triggerHaptic(h);
+            action.onPress();
+          },
           style: ({
             pressed
           }) => [styles.actionBtn, {

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -46,7 +46,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     tabs,
     activeTab,
-    onTabPress,
+    onChange,
     haptic = 'selection',
     showLabels = true,
     variant = 'pill',
@@ -95,12 +95,14 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   // this value directly.
   useEffect(() => {
     if (tabWidth <= 0) return;
-    Animated.spring(indicatorTranslateX, {
+    const anim = Animated.spring(indicatorTranslateX, {
       toValue: activeIndex * tabWidth,
       tension: 120,
       friction: 14,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [activeIndex, tabWidth, indicatorTranslateX]);
   const handleLayout = e => {
     const total = e.nativeEvent.layout.width;
@@ -125,7 +127,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
         useNativeDriver: true
       })]).start();
     }
-    onTabPress(tab.key);
+    onChange(tab.key);
   };
   const paddingBottom = Math.max(8, insets.bottom);
   return /*#__PURE__*/_jsx(View, {