react-native-system-ui 0.0.6 → 1.0.0

package/dist/es/components/water-mark/WaterMark.js

@@ -1,9 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Image, Text, View, useWindowDimensions } from 'react-native';
 import { isFiniteNumber, isString } from '../../utils';
 import { useWaterMarkTokens } from './tokens';
-const WaterMark = props => {
+const resolveFiniteNumber = (value, fallback) => isFiniteNumber(value) ? value : fallback;
+const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
+const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
+const WaterMarkImpl = props => {
   const {
     content: contentProp,
     width,
@@ -25,9 +28,6 @@ const WaterMark = props => {
     ...rest
   } = props;
   const tokens = useWaterMarkTokens(tokensOverride);
-  const resolveFiniteNumber = (value, fallback) => isFiniteNumber(value) ? value : fallback;
-  const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
-  const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
   const content = contentProp ?? tokens.defaults.content;
   const zIndex = resolveFiniteNumber(zIndexProp, tokens.defaults.zIndex);
   const fullPage = fullPageProp ?? tokens.defaults.fullPage;
@@ -45,9 +45,8 @@ const WaterMark = props => {
   const resolvedGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
   const resolvedRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
   const resolvedOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
-  const fontSizeFromFont = isFiniteNumber(font?.size) ? font?.size : isString(font?.size) ? Number.parseFloat(font?.size) : undefined;
-  const resolvedFontSize = resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize);
-  const normalizedFontSize = Math.max(0, resolvedFontSize);
+  const fontSizeFromFont = isFiniteNumber(font?.size) ? font.size : isString(font?.size) ? Number.parseFloat(font.size) : undefined;
+  const normalizedFontSize = Math.max(0, resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize));
   const resolvedColor = font?.color ?? color ?? tokens.colors.mark;
   const markWidth = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
   const markHeight = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
@@ -55,15 +54,17 @@ const WaterMark = props => {
   const cellHeight = Math.max(1, markHeight + resolvedGapY);
   const rows = size.height ? Math.ceil(size.height / cellHeight) + 1 : 1;
   const cols = size.width ? Math.ceil(size.width / cellWidth) + 1 : 1;
-  const handleLayout = event => {
+  const onLayoutCalculatedRef = useRef(onLayoutCalculated);
+  onLayoutCalculatedRef.current = onLayoutCalculated;
+  const handleLayout = useCallback(event => {
     if (fullPage) return;
     const {
       width,
       height
     } = event.nativeEvent.layout;
     if (!isFiniteNumber(width) || !isFiniteNumber(height)) return;
-    const nextWidth = Math.max(0, width);
-    const nextHeight = Math.max(0, height);
+    const nextWidth = Math.max(0, width),
+      nextHeight = Math.max(0, height);
     if (lastLayoutRef.current.width === nextWidth && lastLayoutRef.current.height === nextHeight) return;
     lastLayoutRef.current = {
       width: nextWidth,
@@ -73,49 +74,47 @@ const WaterMark = props => {
       width: nextWidth,
       height: nextHeight
     });
-    onLayoutCalculated?.({
+    onLayoutCalculatedRef.current?.({
       width: nextWidth,
       height: nextHeight
     });
-  };
+  }, [fullPage]);
   useEffect(() => {
-    if (!fullPage) return;
-    if (!isFiniteNumber(window.width) || !isFiniteNumber(window.height)) return;
-    if (window.width <= 0 || window.height <= 0) return;
-    onLayoutCalculated?.({
+    if (!fullPage || !isFiniteNumber(window.width) || !isFiniteNumber(window.height) || window.width <= 0 || window.height <= 0) return;
+    onLayoutCalculatedRef.current?.({
       width: window.width,
       height: window.height
     });
-  }, [fullPage, onLayoutCalculated, window.width, window.height]);
-  const zIndexStyle = {
+  }, [fullPage, window.width, window.height]);
+  const zIndexStyle = useMemo(() => ({
     zIndex
-  };
-  const cellStyle = {
+  }), [zIndex]);
+  const cellStyle = useMemo(() => ({
     width: cellWidth,
     height: cellHeight
-  };
-  const oddRowStyle = {
+  }), [cellWidth, cellHeight]);
+  const oddRowStyle = useMemo(() => ({
     paddingLeft: cellWidth / 2
-  };
-  const markStyle = {
+  }), [cellWidth]);
+  const markStyle = useMemo(() => ({
     width: markWidth,
     height: markHeight,
     transform: [{
       rotate: `${resolvedRotate}deg`
     }]
-  };
-  const imageStyle = {
+  }), [markWidth, markHeight, resolvedRotate]);
+  const imageStyle = useMemo(() => ({
     width: markWidth,
     height: markHeight,
     opacity: resolvedOpacity
-  };
-  const textBaseStyle = {
+  }), [markWidth, markHeight, resolvedOpacity]);
+  const textBaseStyle = useMemo(() => ({
     fontSize: normalizedFontSize,
     color: resolvedColor,
     opacity: resolvedOpacity,
     fontFamily: font?.family,
     fontWeight: font?.weight
-  };
+  }), [normalizedFontSize, resolvedColor, resolvedOpacity, font?.family, font?.weight]);
   const rowIndexes = Array.from({
     length: rows
   }, (_, i) => i);
@@ -124,6 +123,8 @@ const WaterMark = props => {
   }, (_, i) => i);
   return /*#__PURE__*/React.createElement(View, _extends({
     pointerEvents: "none",
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
     style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],
     onLayout: handleLayout
   }, rest), /*#__PURE__*/React.createElement(View, {
@@ -147,5 +148,6 @@ const WaterMark = props => {
     style: [textBaseStyle, textStyle]
   }, content))))))));
 };
+const WaterMark = /*#__PURE__*/React.memo(WaterMarkImpl);
 WaterMark.displayName = 'WaterMark';
 export default WaterMark;

package/dist/es/design-system/ThemeProvider.js

@@ -2,21 +2,15 @@ import React, { useMemo } from 'react';
 import { ThemeContext } from './ThemeContext';
 import { createTokens } from './tokens';
 import { isObject } from '../utils/validate';
-const isThemeTokens = value => {
-  return Boolean(isObject(value) && 'palette' in value && 'spacing' in value);
-};
+const isTokens = v => Boolean(isObject(v) && 'palette' in v && 'spacing' in v);
 export const ThemeProvider = ({
   value,
   children
 }) => {
-  const resolved = useMemo(() => {
-    const foundations = isThemeTokens(value) ? value : createTokens(value?.foundations);
-    const components = !isThemeTokens(value) ? value?.components : undefined;
-    return {
-      foundations,
-      components
-    };
-  }, [value]);
+  const resolved = useMemo(() => ({
+    foundations: isTokens(value) ? value : createTokens(value?.foundations),
+    components: isTokens(value) ? undefined : value?.components
+  }), [value]);
   return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: resolved
   }, children);

package/dist/es/design-system/createComponentTokensHook.js

@@ -1,17 +1,15 @@
 import { useMemo } from 'react';
 import { deepMerge } from '../utils/deepMerge';
 import { useTheme } from './useTheme';
-export const createComponentTokensHook = (key, createBaseTokens) => {
-  return overrides => {
-    const {
-      foundations,
-      components
-    } = useTheme();
-    const componentOverrides = components?.[key];
-    return useMemo(() => {
-      const base = createBaseTokens(foundations);
-      const merged = componentOverrides && overrides ? deepMerge(componentOverrides, overrides) : componentOverrides ?? overrides;
-      return merged ? deepMerge(base, merged) : base;
-    }, [componentOverrides, foundations, overrides]);
-  };
+export const createComponentTokensHook = (key, createBaseTokens) => overrides => {
+  const {
+    foundations,
+    components
+  } = useTheme();
+  const co = components?.[key];
+  return useMemo(() => {
+    const base = createBaseTokens(foundations);
+    const merged = co && overrides ? deepMerge(co, overrides) : co ?? overrides;
+    return merged ? deepMerge(base, merged) : base;
+  }, [co, foundations, overrides]);
 };

package/dist/es/design-system/presets.js

@@ -131,10 +131,9 @@ const auroraOverrides = {
     lineHeightMultiplier: 1.25
   }
 };
-const buildPreset = overrides => createTokens(overrides);
 export const themePresets = {
   light: defaultTokens,
-  dark: buildPreset(darkOverrides),
-  aurora: buildPreset(auroraOverrides)
+  dark: createTokens(darkOverrides),
+  aurora: createTokens(auroraOverrides)
 };
 export const getThemePreset = name => themePresets[name];

package/dist/es/design-system/tokens.js

@@ -124,13 +124,5 @@ export const defaultFoundations = {
     pressed: 0.85
   }
 };
-export const buildFoundations = overrides => {
-  if (!overrides) {
-    return defaultFoundations;
-  }
-  return deepMerge(defaultFoundations, overrides);
-};
-export const createTokens = overrides => {
-  return buildFoundations(overrides);
-};
+export const createTokens = overrides => overrides ? deepMerge(defaultFoundations, overrides) : defaultFoundations;
 export const defaultTokens = defaultFoundations;

package/dist/es/hooks/animation/index.js

@@ -0,0 +1,2 @@
+export { useReducedMotion, getReducedMotion } from './useReducedMotion';
+export { useAnimatedTransition } from './useAnimatedTransition';

package/dist/es/hooks/animation/useAnimatedTransition.js

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from './useReducedMotion';
+const EASE_OUT = Easing.bezier(0.075, 0.82, 0.165, 1.0);
+const EASE_IN = Easing.bezier(0.55, 0.055, 0.675, 0.19);
+export const useAnimatedTransition = ({
+  visible,
+  duration = 300,
+  enterEasing = EASE_OUT,
+  exitEasing = EASE_IN,
+  useNativeDriver: driver = nativeDriverEnabled
+}) => {
+  const reduceMotion = useReducedMotion();
+  const [mounted, setMounted] = useState(visible);
+  const progress = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const animRef = useRef(null);
+  const seqRef = useRef(0);
+  const run = useCallback((show, dur, easeIn, easeOut, nd) => {
+    seqRef.current += 1;
+    const seq = seqRef.current;
+    animRef.current?.stop();
+    if (show) setMounted(true);
+    if (dur <= 0) {
+      progress.setValue(show ? 1 : 0);
+      if (!show) setMounted(false);
+      return;
+    }
+    const anim = Animated.timing(progress, {
+      toValue: show ? 1 : 0,
+      duration: dur,
+      easing: show ? easeIn : easeOut,
+      useNativeDriver: nd,
+      isInteraction: false
+    });
+    animRef.current = anim;
+    anim.start(({
+      finished
+    }) => {
+      if (finished && seq === seqRef.current && !show) setMounted(false);
+    });
+  }, [progress]);
+  useEffect(() => {
+    run(visible, reduceMotion ? 0 : duration, enterEasing, exitEasing, driver);
+  }, [visible, reduceMotion, duration, enterEasing, exitEasing, driver, run]);
+  useEffect(() => () => {
+    animRef.current?.stop();
+  }, []);
+  return {
+    mounted,
+    progress
+  };
+};

package/dist/es/hooks/animation/useReducedMotion.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+let _reduced = false;
+let _inited = false;
+const _subs = new Set();
+const set = v => {
+  if (v === _reduced) return;
+  _reduced = v;
+  _subs.forEach(fn => fn(v));
+};
+const init = () => {
+  if (_inited) return;
+  _inited = true;
+  if (Platform.OS === 'web') {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      try {
+        const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+        _reduced = mql.matches;
+        const h = e => set(e.matches);
+        mql.addEventListener?.('change', h) ?? mql.addListener?.(h);
+      } catch {}
+    }
+    return;
+  }
+  AccessibilityInfo.isReduceMotionEnabled?.().then(v => set(!!v)).catch(() => {});
+  try {
+    AccessibilityInfo.addEventListener('reduceMotionChanged', v => set(v));
+  } catch {}
+};
+export const useReducedMotion = () => {
+  const r = useRef(false);
+  if (!r.current) {
+    r.current = true;
+    init();
+  }
+  const [v, sv] = useState(_reduced);
+  useEffect(() => {
+    if (_reduced !== v) sv(_reduced);
+    _subs.add(sv);
+    return () => {
+      _subs.delete(sv);
+    };
+  }, []);
+  return v;
+};
+export const getReducedMotion = () => {
+  init();
+  return _reduced;
+};
+export const _resetForTesting = () => {
+  _reduced = false;
+  _inited = false;
+  _subs.clear();
+};

package/dist/es/hooks/aria/useAriaListBox.js

@@ -7,27 +7,19 @@ export const useAriaListBox = props => {
     label,
     ...rest
   } = props;
-  const resolvedProps = useMemo(() => {
-    if (label == null) return rest;
-    const ariaLabel = typeof label === 'string' ? label : undefined;
-    return {
-      ...rest,
-      ...(ariaLabel ? {
-        'aria-label': ariaLabel
-      } : null)
-    };
-  }, [label, rest]);
-  const state = useListState(resolvedProps);
+  const resolved = typeof label === 'string' ? {
+    ...rest,
+    'aria-label': label
+  } : rest;
+  const state = useListState(resolved);
   const {
     listBoxProps,
     labelProps
-  } = useListBox(resolvedProps, state, ref);
-  const resolvedListBoxProps = useMemo(() => listBoxProps, [listBoxProps]);
-  const resolvedLabelProps = useMemo(() => labelProps, [labelProps]);
+  } = useListBox(resolved, state, ref);
   return {
     state,
-    listBoxProps: resolvedListBoxProps,
-    labelProps: resolvedLabelProps,
+    listBoxProps: useMemo(() => listBoxProps, [listBoxProps]),
+    labelProps: useMemo(() => labelProps, [labelProps]),
     ref
   };
 };

package/dist/es/hooks/aria/useAriaOverlay.js

@@ -6,7 +6,7 @@ export const useAriaOverlay = ({
   onClose,
   isDismissable = true,
   shouldCloseOnInteractOutside,
-  overlayProps: overlayPropOverrides
+  overlayProps: overrides
 }) => {
   const overlayRef = useRef(null);
   const {
@@ -17,9 +17,9 @@ export const useAriaOverlay = ({
     isDismissable,
     shouldCloseOnInteractOutside
   }, overlayRef);
-  const resolvedOverlayProps = useMemo(() => mergeProps(overlayProps ?? {}, overlayPropOverrides ?? {}), [overlayPropOverrides, overlayProps]);
+  const resolved = useMemo(() => mergeProps(overlayProps ?? {}, overrides ?? {}), [overrides, overlayProps]);
   return {
     overlayRef,
-    overlayProps: resolvedOverlayProps
+    overlayProps: resolved
   };
 };

package/dist/es/hooks/aria/useAriaPress.js

@@ -3,12 +3,7 @@ import { Platform } from 'react-native';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { mergeProps } from '@react-native-aria/utils';
-const mergePropsCompat = (...args) => {
-  if (typeof mergeProps === 'function') {
-    return mergeProps(...args);
-  }
-  return Object.assign({}, ...args);
-};
+const mp = (...args) => typeof mergeProps === 'function' ? mergeProps(...args) : Object.assign({}, ...args);
 export const useAriaPress = ({
   disabled = false,
   allowHover = Platform.OS === 'web',
@@ -29,32 +24,24 @@ export const useAriaPress = ({
   } = useHover({
     isDisabled: disabled || !allowHover
   });
-  const useFocusCompat = useFocus;
   const {
     isFocused,
     focusProps
-  } = useFocusCompat({
+  } = useFocus({
     isDisabled: disabled
   });
-  const useFocusRingCompat = useFocusRing;
   const {
     focusProps: focusRingProps,
     isFocusVisible
-  } = useFocusRingCompat({
+  } = useFocusRing({
     isDisabled: disabled
   });
   const interactionProps = useMemo(() => {
-    let merged = pressProps;
-    if (allowHover) {
-      merged = mergePropsCompat(merged, hoverProps);
-    }
-    if (allowFocus && !disabled) {
-      merged = mergePropsCompat(merged, focusProps, focusRingProps);
-    }
-    if (extraProps) {
-      merged = mergePropsCompat(merged, extraProps);
-    }
-    return merged;
+    let m = pressProps;
+    if (allowHover) m = mp(m, hoverProps);
+    if (allowFocus && !disabled) m = mp(m, focusProps, focusRingProps);
+    if (extraProps) m = mp(m, extraProps);
+    return m;
   }, [allowFocus, allowHover, disabled, extraProps, focusProps, focusRingProps, hoverProps, pressProps]);
   const states = useMemo(() => ({
     hovered: !!isHovered,

package/dist/es/hooks/aria/useAriaToggle.js

@@ -2,15 +2,15 @@ import { useMemo, useRef } from 'react';
 import { useToggle } from '@react-native-aria/toggle';
 import { useToggleState } from '@react-stately/toggle';
 export const useAriaToggle = props => {
-  const inputRef = props.inputRef ?? useRef(null);
+  const fallbackRef = useRef(null);
+  const inputRef = props.inputRef ?? fallbackRef;
   const state = useToggleState(props);
   const {
     inputProps
   } = useToggle(props, state, inputRef);
-  const resolvedInputProps = useMemo(() => inputProps, [inputProps]);
   return {
     state,
-    inputProps: resolvedInputProps,
+    inputProps: useMemo(() => inputProps, [inputProps]),
     inputRef
   };
 };

package/dist/es/hooks/gesture/useGestureScroll.js

@@ -1,51 +1,52 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Animated } from 'react-native';
-const DEFAULT_THROTTLE = 16;
-const VELOCITY_NORMALIZER = 1000;
 export const useGestureScroll = (options = {}) => {
   const {
     axis = 'y',
-    scrollEventThrottle = DEFAULT_THROTTLE,
+    scrollEventThrottle = 16,
     onScroll,
     onScrollBeginDrag,
     onScrollEndDrag,
     onMomentumScrollBegin,
     onMomentumScrollEnd
   } = options;
+  const onScrollRef = useRef(onScroll);
+  onScrollRef.current = onScroll;
+  const onBeginDragRef = useRef(onScrollBeginDrag);
+  onBeginDragRef.current = onScrollBeginDrag;
+  const onEndDragRef = useRef(onScrollEndDrag);
+  onEndDragRef.current = onScrollEndDrag;
+  const onMomBeginRef = useRef(onMomentumScrollBegin);
+  onMomBeginRef.current = onMomentumScrollBegin;
+  const onMomEndRef = useRef(onMomentumScrollEnd);
+  onMomEndRef.current = onMomentumScrollEnd;
   const scrollValue = useRef(new Animated.Value(0)).current;
-  const lastOffsetRef = useRef(0);
-  const lastTimestampRef = useRef(null);
-  const velocityRef = useRef(0);
-  const directionRef = useRef(null);
+  const lastOffRef = useRef(0);
+  const lastTsRef = useRef(null);
+  const velRef = useRef(0);
+  const dirRef = useRef(null);
   const [direction, setDirection] = useState(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isMomentum, setIsMomentum] = useState(false);
-  const updateDirection = useCallback(next => {
-    if (directionRef.current !== next) {
-      directionRef.current = next;
-      setDirection(next);
+  const updateDir = useCallback(n => {
+    if (dirRef.current !== n) {
+      dirRef.current = n;
+      setDirection(n);
     }
   }, []);
-  const handleScroll = useCallback(event => {
-    onScroll?.(event);
-    const contentOffset = event.nativeEvent.contentOffset;
-    const current = axis === 'x' ? contentOffset.x ?? 0 : contentOffset.y ?? 0;
-    const delta = current - lastOffsetRef.current;
-    const timestamp = event.timeStamp ?? Date.now();
-    if (delta > 0) {
-      updateDirection('forward');
-    } else if (delta < 0) {
-      updateDirection('backward');
-    }
-    if (lastTimestampRef.current != null) {
-      const elapsed = Math.max(timestamp - lastTimestampRef.current, 1);
-      velocityRef.current = delta / elapsed * VELOCITY_NORMALIZER;
-    }
-    lastTimestampRef.current = timestamp;
-    lastOffsetRef.current = current;
-  }, [axis, onScroll, updateDirection]);
-  const animatedScrollHandler = useMemo(() => {
-    const mapping = axis === 'x' ? [{
+  const handleScroll = useCallback(e => {
+    onScrollRef.current?.(e);
+    const o = e.nativeEvent.contentOffset;
+    const cur = axis === 'x' ? o.x ?? 0 : o.y ?? 0;
+    const delta = cur - lastOffRef.current;
+    const ts = e.timeStamp ?? Date.now();
+    if (delta > 0) updateDir('forward');else if (delta < 0) updateDir('backward');
+    if (lastTsRef.current != null) velRef.current = delta / Math.max(ts - lastTsRef.current, 1) * 1000;
+    lastTsRef.current = ts;
+    lastOffRef.current = cur;
+  }, [axis, updateDir]);
+  const animHandler = useMemo(() => {
+    const m = axis === 'x' ? [{
       nativeEvent: {
         contentOffset: {
           x: scrollValue
@@ -58,53 +59,51 @@ export const useGestureScroll = (options = {}) => {
         }
       }
     }];
-    return Animated.event(mapping, {
+    return Animated.event(m, {
       useNativeDriver: false,
       listener: handleScroll
     });
   }, [axis, handleScroll, scrollValue]);
-  const handleScrollBeginDrag = useCallback(event => {
+  const hBeginDrag = useCallback(e => {
     setIsDragging(true);
-    onScrollBeginDrag?.(event);
-  }, [onScrollBeginDrag]);
-  const handleScrollEndDrag = useCallback(event => {
+    onBeginDragRef.current?.(e);
+  }, []);
+  const hEndDrag = useCallback(e => {
     setIsDragging(false);
-    onScrollEndDrag?.(event);
-  }, [onScrollEndDrag]);
-  const handleMomentumBegin = useCallback(event => {
+    onEndDragRef.current?.(e);
+  }, []);
+  const hMomBegin = useCallback(e => {
     setIsMomentum(true);
-    onMomentumScrollBegin?.(event);
-  }, [onMomentumScrollBegin]);
-  const handleMomentumEnd = useCallback(event => {
+    onMomBeginRef.current?.(e);
+  }, []);
+  const hMomEnd = useCallback(e => {
     setIsMomentum(false);
-    onMomentumScrollEnd?.(event);
-  }, [onMomentumScrollEnd]);
-  const resetOffset = useCallback((value = 0) => {
+    onMomEndRef.current?.(e);
+  }, []);
+  const resetOffset = useCallback((v = 0) => {
     scrollValue.stopAnimation();
-    scrollValue.setValue(value);
-    lastOffsetRef.current = value;
-    lastTimestampRef.current = null;
-    velocityRef.current = 0;
-    updateDirection(null);
-  }, [scrollValue, updateDirection]);
-  const getVelocity = useCallback(() => velocityRef.current, []);
-  const getCurrentOffset = useCallback(() => lastOffsetRef.current, []);
+    scrollValue.setValue(v);
+    lastOffRef.current = v;
+    lastTsRef.current = null;
+    velRef.current = 0;
+    updateDir(null);
+  }, [scrollValue, updateDir]);
   const scrollProps = useMemo(() => ({
-    onScroll: animatedScrollHandler,
+    onScroll: animHandler,
     scrollEventThrottle,
-    onScrollBeginDrag: handleScrollBeginDrag,
-    onScrollEndDrag: handleScrollEndDrag,
-    onMomentumScrollBegin: handleMomentumBegin,
-    onMomentumScrollEnd: handleMomentumEnd
-  }), [animatedScrollHandler, handleMomentumBegin, handleMomentumEnd, handleScrollBeginDrag, handleScrollEndDrag, scrollEventThrottle]);
+    onScrollBeginDrag: hBeginDrag,
+    onScrollEndDrag: hEndDrag,
+    onMomentumScrollBegin: hMomBegin,
+    onMomentumScrollEnd: hMomEnd
+  }), [animHandler, hBeginDrag, hEndDrag, hMomBegin, hMomEnd, scrollEventThrottle]);
   return {
     scrollValue,
     scrollProps,
     direction,
     isDragging,
     isMomentum,
-    getVelocity,
-    getCurrentOffset,
+    getVelocity: useCallback(() => velRef.current, []),
+    getCurrentOffset: useCallback(() => lastOffRef.current, []),
     resetOffset
   };
 };

package/dist/es/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useSafeAreaPadding';
+export * from './animation';
 export * from './aria';
 export * from './gesture';
 export * from './overlay';