@webority-technologies/mobile 0.0.22 → 0.0.23

package/lib/module/components/Carousel/Carousel.js

@@ -437,12 +437,14 @@ const ThumbnailItem = ({
 }) => {
   const scale = useRef(createAnimatedValue(isActive ? 1.1 : 1)).current;
   useEffect(() => {
-    Animated.spring(scale, {
+    const anim = Animated.spring(scale, {
       toValue: isActive ? 1.1 : 1,
       useNativeDriver: true,
       friction: 6,
       tension: 80
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [isActive, scale]);
   const content = useMemo(() => {
     if (renderThumbnail) return renderThumbnail(item, index);

package/lib/module/components/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, 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 = {
@@ -26,6 +27,7 @@ const toneColor = (theme, tone) => {
 const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     checked,
+    defaultChecked,
     onChange,
     indeterminate = false,
     disabled = false,
@@ -43,22 +45,29 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     testID,
     ...rest
   } = props;
+  const [current, setCurrent] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange
+  });
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const boxSize = theme.components.checkbox?.[size]?.boxSize ?? sizeMap[size];
   const checkboxBorderWidth = theme.colors.border.width;
   const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
   const fillColor = toneColor(theme, tone);
-  const isActive = checked || indeterminate;
+  const isActive = current || indeterminate;
   const progress = useRef(createAnimatedValue(isActive ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(progress, {
+    const anim = Animated.spring(progress, {
       toValue: isActive ? 1 : 0,
       damping: theme.motion.spring.snappy.damping,
       stiffness: theme.motion.spring.snappy.stiffness,
       mass: theme.motion.spring.snappy.mass,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [isActive, progress, theme.motion.spring.snappy]);
   const scale = progress.interpolate({
     inputRange: [0, 1],
@@ -67,7 +76,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   const handlePress = event => {
     if (disabled) return;
     if (haptic !== false && theme.components.checkbox?.pressHaptic) triggerHaptic(haptic);
-    onChange(!checked);
+    setCurrent(!current);
     rest.onPressOut?.(event);
   };
   const accessibleLabel = accessibilityLabel ?? label;
@@ -84,7 +93,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityRole: "checkbox",
     accessibilityLabel: accessibleLabel,
     accessibilityState: {
-      checked: indeterminate ? 'mixed' : checked,
+      checked: indeterminate ? 'mixed' : current,
       disabled
     },
     testID: testID,

package/lib/module/components/DatePicker/DatePicker.js

@@ -10,14 +10,14 @@ import { PickerTrigger } from "../PickerTrigger/index.js";
 /**
  * DatePicker operates in two modes:
  *
- * 1. **Controlled-modal mode** — pass `visible` (plus `onSelect` / `onClose`)
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onChange` / `onClose`)
  *    and own the open state externally. The component renders only the modal.
  * 2. **Trigger mode** — omit `visible`. The component renders a built-in
  *    PickerTrigger field (label / value / placeholder / chevron / clear /
  *    helper / error / size / variant) and manages its own open state. The
  *    field opens the modal on press and closes it on confirm/cancel.
  *
- * `onSelect` / `onClose` are typed optional to support trigger-only usage
+ * `onChange` / `onClose` are typed optional to support trigger-only usage
  * where the consumer may not need either callback. In controlled-modal mode
  * they remain semantically required.
  */
@@ -99,7 +99,7 @@ const buildDecadeCells = anchorYear => {
 const DatePicker = props => {
   const {
     value,
-    onSelect,
+    onChange,
     onClose,
     minDate,
     maxDate,
@@ -174,7 +174,7 @@ const DatePicker = props => {
     if (open) {
       backdrop.setValue(0);
       setNativeValue(sheet, 0);
-      Animated.parallel([Animated.timing(backdrop, {
+      const anim = Animated.parallel([Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
@@ -185,7 +185,9 @@ const DatePicker = props => {
         stiffness: theme.motion.spring.gentle.stiffness,
         mass: theme.motion.spring.gentle.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
+      return () => anim.stop();
     }
   }, [open, mode, backdrop, sheet, theme.motion]);
   const disabledIsoSet = useMemo(() => {
@@ -385,9 +387,9 @@ const DatePicker = props => {
   const handleConfirm = useCallback(() => {
     if (!pendingDate) return;
     if (theme.components.datePicker?.haptic) triggerHaptic('notificationSuccess');
-    onSelect?.(pendingDate);
+    onChange?.(pendingDate);
     handleClose();
-  }, [handleClose, onSelect, pendingDate, theme.components.datePicker]);
+  }, [handleClose, onChange, pendingDate, theme.components.datePicker]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]

package/lib/module/components/DateRangePicker/DateRangePicker.js

@@ -147,10 +147,11 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   // Modal open / close animation. Backdrop opacity uses JS driver — see
   // Modal.tsx for the Fabric reason. Sheet transform stays native.
   useEffect(() => {
+    let anim;
     if (open) {
       backdrop.setValue(0);
       setNativeValue(sheet, 0);
-      Animated.parallel([Animated.timing(backdrop, {
+      anim = Animated.parallel([Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
@@ -161,8 +162,10 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
         stiffness: theme.motion.spring.gentle.stiffness,
         mass: theme.motion.spring.gentle.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     }
+    return () => anim?.stop();
   }, [open, backdrop, sheet, theme.motion]);
   const disabledIsoSet = useMemo(() => {
     const set = new Set();

package/lib/module/components/Dialog/Dialog.js

@@ -144,7 +144,7 @@ const tintForVariant = (theme, variant) => {
         base: theme.colors.warning,
         muted: theme.colors.background.secondary
       };
-    case 'danger':
+    case 'error':
       return {
         base: theme.colors.error,
         muted: theme.colors.background.secondary
@@ -175,7 +175,7 @@ const actionStyleFor = (theme, tone, variant) => {
           textColor: theme.colors.text.inverse
         };
       }
-    case 'danger':
+    case 'error':
       return {
         backgroundColor: theme.colors.error,
         borderColor: 'transparent',

package/lib/module/components/FieldBase/FieldBase.js

@@ -286,20 +286,24 @@ export const FieldBase = props => {
   const focusAnim = useRef(createAnimatedValue(focused ? 1 : 0)).current;
   const errorAnim = useRef(createAnimatedValue(error ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(focusAnim, {
+    const anim = Animated.timing(focusAnim, {
       toValue: focused ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [focused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
   useEffect(() => {
-    Animated.timing(errorAnim, {
+    const anim = Animated.timing(errorAnim, {
       toValue: error ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [error, errorAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Resting border + fill (pre-animation). Error wins over focus when both

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -90,12 +90,14 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
       setNativeValue(hideAnim, 0);
       return;
     }
-    Animated.timing(hideAnim, {
+    const anim = Animated.timing(hideAnim, {
       toValue: isScrolling ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [hideOnScroll, isScrolling, hideAnim, theme.motion.duration.normal, theme.motion.easing.standard]);
   const hideTranslateY = hideAnim.interpolate({
     inputRange: [0, 1],
@@ -271,12 +273,13 @@ const FloatingActionButtonGroup = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actions.length]);
   useEffect(() => {
-    Animated.timing(progress, {
+    const progressAnim = Animated.timing(progress, {
       toValue: isOpen ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
+    });
+    progressAnim.start();
     const animations = itemAnims.current.map(value => Animated.timing(value, {
       toValue: isOpen ? 1 : 0,
       duration: theme.motion.duration.normal,
@@ -285,7 +288,12 @@ const FloatingActionButtonGroup = props => {
     }));
     // Reverse stagger order on close so items closest to primary collapse last
     const ordered = isOpen ? animations : [...animations].reverse();
-    Animated.stagger(staggerMs, ordered).start();
+    const staggerAnim = Animated.stagger(staggerMs, ordered);
+    staggerAnim.start();
+    return () => {
+      progressAnim.stop();
+      staggerAnim.stop();
+    };
   }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = useCallback(next => {
     if (pressHaptic) triggerHaptic('impactLight');

package/lib/module/components/FormField/FormField.js

@@ -3,13 +3,15 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useOptionalFormContext } from "../../form/FormContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     label,
     helperText,
     error,
     required = false,
+    name,
     children,
     layout = 'stacked',
     labelStyle,
@@ -22,19 +24,32 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const errorOpacity = useRef(createAnimatedValue(error ? 1 : 0)).current;
+  const formCtx = useOptionalFormContext();
+  const isConnected = name != null && formCtx != null;
+  const field = isConnected ? formCtx.getFieldProps(name) : null;
+  const isRenderProp = typeof children === 'function';
+
+  // Error the FormField renders itself. When connected to an element child the
+  // child (Input/Select etc.) shows the injected error, so FormField stays
+  // quiet to avoid a duplicate message; the render-prop form keeps it here.
+  const ownError = isConnected ? isRenderProp ? field?.error : undefined : error;
+  // Error used purely for assistive tech — always reflects the real error.
+  const a11yError = isConnected ? field?.error : error;
+  const errorOpacity = useRef(createAnimatedValue(ownError ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(errorOpacity, {
-      toValue: error ? 1 : 0,
-      duration: 150,
+    const anim = Animated.timing(errorOpacity, {
+      toValue: ownError ? 1 : 0,
+      duration: theme.motion.duration.fast,
       useNativeDriver: true
-    }).start();
-  }, [error, errorOpacity]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [ownError, errorOpacity, theme.motion.duration.fast]);
   const computedAccessibilityLabel = useMemo(() => {
     if (accessibilityLabel) return accessibilityLabel;
     if (!label) return undefined;
-    return error ? `${label}, error: ${error}` : label;
-  }, [accessibilityLabel, label, error]);
+    return a11yError ? `${label}, error: ${a11yError}` : label;
+  }, [accessibilityLabel, label, a11yError]);
   const labelNode = label ? /*#__PURE__*/_jsxs(Text, {
     style: [styles.label, layout === 'inline' ? styles.labelInline : null, labelStyle],
     children: [label, required ? /*#__PURE__*/_jsx(Text, {
@@ -43,39 +58,60 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
     }) : null]
   }) : null;
   const inputContainerStyle = layout === 'inline' ? styles.inputInline : styles.inputStacked;
-  const showError = Boolean(error);
+  const showError = Boolean(ownError);
   const showHelper = !showError && Boolean(helperText);
+  const renderedChildren = (() => {
+    if (isRenderProp) {
+      return field ? children(field) : null;
+    }
+    if (isConnected && field && /*#__PURE__*/React.isValidElement(children)) {
+      const child = children;
+      const childOnChangeText = child.props.onChangeText;
+      const childOnBlur = child.props.onBlur;
+      const childOnFocus = child.props.onFocus;
+      return /*#__PURE__*/React.cloneElement(child, {
+        value: field.value,
+        onChangeText: text => {
+          field.onChangeText(text);
+          childOnChangeText?.(text);
+        },
+        onBlur: e => {
+          field.onBlur();
+          childOnBlur?.(e);
+        },
+        onFocus: e => {
+          field.onFocus();
+          childOnFocus?.(e);
+        },
+        error: field.error,
+        ref: node => formCtx.registerField(name, node ?? null)
+      });
+    }
+    return children;
+  })();
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: [layout === 'inline' ? styles.rootInline : styles.rootStacked, containerStyle],
     accessibilityLabel: computedAccessibilityLabel
-    // Surface the invalid state to assistive tech via the hint. RN's
-    // AccessibilityState type does not expose an `invalid` field, so the
-    // error message itself is folded into the label and hint.
+    // RN's AccessibilityState type has no `invalid` field, so the error is
+    // folded into the label and surfaced again via the hint.
     ,
-    accessibilityHint: error ? error : undefined,
+    accessibilityHint: a11yError ? a11yError : undefined,
     testID: testID,
-    children: [layout === 'inline' ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: [inputContainerStyle, inputContainerStyleProp],
-        children: children
-      })]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: [inputContainerStyle, inputContainerStyleProp],
-        children: children
-      })]
+    children: [labelNode, /*#__PURE__*/_jsx(View, {
+      style: [inputContainerStyle, inputContainerStyleProp],
+      children: renderedChildren
     }), showHelper ? /*#__PURE__*/_jsx(Text, {
       style: [styles.helper, helperStyle],
       numberOfLines: 2,
       children: helperText
-    }) : null, error ? /*#__PURE__*/_jsx(Animated.Text, {
+    }) : null, ownError ? /*#__PURE__*/_jsx(Animated.Text, {
       style: [styles.error, {
         opacity: errorOpacity
       }, errorStyle],
       numberOfLines: 2,
       accessibilityLiveRegion: "polite",
-      children: error
+      children: ownError
     }) : null]
   });
 });

package/lib/module/components/Input/Input.js

@@ -4,6 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // FieldBase carries every dimension except `multilineMinHeight` — Input owns
@@ -79,26 +80,31 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Floating label animation
   useEffect(() => {
-    Animated.timing(labelAnim, {
+    const anim = Animated.timing(labelAnim, {
       toValue: shouldFloat ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Helper / error fade
   useEffect(() => {
-    Animated.timing(messageAnim, {
+    const anim = Animated.timing(messageAnim, {
       toValue: hasError || Boolean(helperText) ? 1 : 0,
-      duration: 150,
+      duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
-  }, [hasError, helperText, messageAnim, theme.motion.easing.standard]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [hasError, helperText, messageAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Error shake — off by default; consumers opt in via
   // theme.components.input.shakeOnError. The haptic ships with the shake.
+  const reduceMotion = useReducedMotion();
   const shakeOnError = theme.components.input?.shakeOnError ?? false;
   const prevErrorRef = useRef(hasError);
   useEffect(() => {
@@ -106,33 +112,39 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
       prevErrorRef.current = hasError;
       return;
     }
+    let anim;
     if (hasError && !prevErrorRef.current) {
-      setNativeValue(shakeAnim, 0);
-      Animated.sequence([Animated.timing(shakeAnim, {
-        toValue: 1,
-        duration: 50,
-        useNativeDriver: true
-      }), Animated.timing(shakeAnim, {
-        toValue: -1,
-        duration: 50,
-        useNativeDriver: true
-      }), Animated.timing(shakeAnim, {
-        toValue: 1,
-        duration: 50,
-        useNativeDriver: true
-      }), Animated.timing(shakeAnim, {
-        toValue: -1,
-        duration: 50,
-        useNativeDriver: true
-      }), Animated.timing(shakeAnim, {
-        toValue: 0,
-        duration: 100,
-        useNativeDriver: true
-      })]).start();
+      // Reduce Motion: keep the error haptic, skip the shake.
+      if (!reduceMotion) {
+        setNativeValue(shakeAnim, 0);
+        anim = Animated.sequence([Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true
+        })]);
+        anim.start();
+      }
       triggerHaptic('notificationError');
     }
     prevErrorRef.current = hasError;
-  }, [hasError, shakeAnim, shakeOnError]);
+    return () => anim?.stop();
+  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
   const handleFocus = useCallback(e => {
     setIsFocused(true);
     onFocus?.(e);

package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -0,0 +1,98 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { findNodeHandle, Keyboard, Platform, ScrollView, TextInput } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A ScrollView that keeps the focused input visible above the keyboard — no
+ * native dependency. On keyboard show it pads the content by the keyboard
+ * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
+ * above the keyboard, but only when it would otherwise be covered (so already-
+ * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
+ */
+const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    extraScrollHeight = 24,
+    disabled = false,
+    contentContainerStyle,
+    onScroll,
+    onLayout,
+    ...rest
+  } = props;
+  const scrollRef = useRef(null);
+  const scrollYRef = useRef(0);
+  const viewportHeightRef = useRef(0);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const setRefs = useCallback(node => {
+    scrollRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  }, [ref]);
+  const scrollFocusedIntoView = useCallback(kbHeight => {
+    const scroll = scrollRef.current;
+    const scrollNode = scroll ? findNodeHandle(scroll) : null;
+    const stateApi = TextInput?.State;
+    const focused = stateApi?.currentlyFocusedInput?.();
+    if (!scroll || scrollNode == null || !focused?.measureLayout) return;
+    focused.measureLayout(scrollNode, (_left, top, _width, height) => {
+      const scrollY = scrollYRef.current;
+      const viewportH = viewportHeightRef.current;
+      if (viewportH <= 0) return;
+      const keyboardTop = viewportH - kbHeight - extraScrollHeight;
+      const fieldBottomInViewport = top - scrollY + height;
+      if (fieldBottomInViewport > keyboardTop) {
+        const delta = fieldBottomInViewport - keyboardTop;
+        scroll.scrollTo({
+          y: scrollY + delta,
+          animated: true
+        });
+      }
+    }, () => undefined);
+  }, [extraScrollHeight]);
+  useEffect(() => {
+    if (disabled) return undefined;
+    // iOS exposes the will* events (smoother); Android only fires did*.
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    let rafId;
+    const showSub = Keyboard.addListener(showEvent, e => {
+      const height = e.endCoordinates?.height ?? 0;
+      setKeyboardHeight(height);
+      // Wait a frame so the padding is applied before we scroll. Tracked so
+      // it can be cancelled on unmount (never runs against a torn-down tree).
+      if (rafId != null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => scrollFocusedIntoView(height));
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [disabled, scrollFocusedIntoView]);
+  const handleScroll = useCallback(e => {
+    scrollYRef.current = e.nativeEvent.contentOffset.y;
+    onScroll?.(e);
+  }, [onScroll]);
+  const handleLayout = useCallback(e => {
+    viewportHeightRef.current = e.nativeEvent.layout.height;
+    onLayout?.(e);
+  }, [onLayout]);
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: setRefs,
+    onScroll: handleScroll,
+    onLayout: handleLayout,
+    scrollEventThrottle: 16,
+    keyboardShouldPersistTaps: "handled",
+    keyboardDismissMode: Platform.OS === 'ios' ? 'interactive' : 'on-drag',
+    contentContainerStyle: [contentContainerStyle, {
+      paddingBottom: keyboardHeight
+    }],
+    ...rest,
+    children: children
+  });
+});
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+export { KeyboardAwareScrollView };
+export default KeyboardAwareScrollView;
+//# sourceMappingURL=KeyboardAwareScrollView.js.map

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

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