@pagopa/io-app-design-system 5.11.11 → 5.11.12

package/lib/commonjs/components/templates/ForceScrollDownView.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.ForceScrollDownView = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _core = require("../../core");
 var _buttons = require("../buttons");
-var _ScaleInOutAnimation = require("../common/ScaleInOutAnimation");
 var _layout = require("../layout");
 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); }
@@ -25,109 +25,81 @@ const ForceScrollDownView = ({
   style,
   contentContainerStyle,
   scrollEnabled = true,
-  onThresholdCrossed
+  onThresholdCrossed,
+  animatedRef
 }) => {
-  const scrollViewRef = (0, _react.useRef)(null);
+  const internalAnimatedRef = (0, _reactNativeReanimated.useAnimatedRef)();
+  const scrollViewRef = animatedRef ?? internalAnimatedRef;
   const {
     footerActionsInlineMeasurements,
     handleFooterActionsInlineMeasurements
   } = (0, _layout.useFooterActionsInlineMeasurements)();
   const threshold = footerActions ? footerActionsInlineMeasurements.safeBottomAreaHeight : customThreshold;
 
-  /**
-   * The height of the scroll view, used to determine whether or not the scrollable content fits inside
-   * the scroll view and whether the "scroll to bottom" button should be displayed.
-   */
-  const [scrollViewHeight, setScrollViewHeight] = (0, _react.useState)(0);
-
-  /**
-   * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
-   * should be displayed.
-   */
-  const [contentHeight, setContentHeight] = (0, _react.useState)(0);
-
-  /**
-   * Whether or not the scroll view has crossed the threshold from the bottom.
-   */
-  const [isThresholdCrossed, setThresholdCrossed] = (0, _react.useState)(false);
-
   /**
    * Whether or not the "scroll to bottom" button should be visible. This is controlled by the threshold
    * and the current scroll position.
    */
-  const [isButtonVisible, setButtonVisible] = (0, _react.useState)(true);
+  // const [isButtonVisible, setButtonVisible] = useState(true);
 
-  /**
-   * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
-   * scroll view has crossed the threshold from the bottom and updates the state accordingly.
-   * The callback is designed to update button visibility only when crossing the threshold.
-   */
-  const handleScroll = (0, _react.useCallback)(event => {
-    const {
-      layoutMeasurement,
-      contentOffset,
-      contentSize
-    } = event.nativeEvent;
-    const thresholdCrossed = layoutMeasurement.height + contentOffset.y >= contentSize.height - (threshold ?? 0);
-    if (isThresholdCrossed !== thresholdCrossed) {
-      setThresholdCrossed(thresholdCrossed);
-      setButtonVisible(!thresholdCrossed);
+  const isButtonVisible = (0, _reactNativeReanimated.useSharedValue)(1);
+  const scrollViewHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const contentHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const offsetY = (0, _reactNativeReanimated.useScrollViewOffset)(scrollViewRef);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => scrollViewHeight.value + Math.max(offsetY.value, 0) >= contentHeight.value - (threshold ?? 0), (crossed, previous) => {
+    if (crossed !== previous) {
+      // eslint-disable-next-line functional/immutable-data
+      isButtonVisible.value = (0, _reactNativeReanimated.withSpring)(crossed && scrollEnabled ? 0 : 1, _core.IOSpringValues.button);
+      if (onThresholdCrossed) {
+        (0, _reactNativeReanimated.runOnJS)(onThresholdCrossed)(crossed);
+      }
     }
-  }, [threshold, isThresholdCrossed]);
-
-  /**
-   * A side effect that calls the `onThresholdCrossed` callback whenever the value of `isThresholdCrossed` changes.
-   */
-  (0, _react.useEffect)(() => {
-    onThresholdCrossed?.(isThresholdCrossed);
-  }, [onThresholdCrossed, isThresholdCrossed]);
+  });
 
   /**
    * A callback that is called whenever the size of the scrollable content changes. It updates the
    * state with the new content height.
    */
-  const handleContentSizeChange = (0, _react.useCallback)((_contentWidth, contentHeight) => {
-    setContentHeight(contentHeight);
-  }, []);
+  const handleContentSizeChange = (0, _react.useCallback)(
+  // eslint-disable-next-line functional/immutable-data
+  (_w, h) => contentHeight.value = h, [contentHeight]);
 
   /**
    * A callback that is called whenever the size of the scroll view changes. It updates the state
    * with the new scroll view height.
    */
-  const handleLayout = (0, _react.useCallback)(event => {
-    setScrollViewHeight(event.nativeEvent.layout.height);
-  }, []);
+  const handleLayout = (0, _react.useCallback)(event =>
+  // eslint-disable-next-line functional/immutable-data
+  scrollViewHeight.value = event.nativeEvent.layout.height, [scrollViewHeight]);
 
   /**
    * A callback that is called when the "scroll to bottom" button is pressed. It scrolls the
    * scroll view to the bottom and hides the button.
    */
   const handleScrollDownPress = (0, _react.useCallback)(() => {
-    setButtonVisible(false);
-    scrollViewRef.current?.scrollToEnd();
-  }, [scrollViewRef]);
+    (0, _reactNativeReanimated.runOnUI)(() => {
+      "worklet";
 
-  /**
-   * Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
-   * when the scrollable content cannot fit inside the scroll view and the button is enabled
-   * (`scrollEnabled` is `true`).
-   */
-  const needsScroll = (0, _react.useMemo)(() => scrollViewHeight > 0 && contentHeight > 0 && scrollViewHeight < contentHeight, [scrollViewHeight, contentHeight]);
+      // eslint-disable-next-line functional/immutable-data
+      isButtonVisible.value = (0, _reactNativeReanimated.withSpring)(0, _core.IOSpringValues.button);
+      const targetY = Math.max(0, contentHeight.value - scrollViewHeight.value);
+      (0, _reactNativeReanimated.scrollTo)(scrollViewRef, 0, targetY, true);
+    })();
+  }, [scrollViewRef, contentHeight, scrollViewHeight, isButtonVisible]);
 
   /**
-   * Whether or not to render the "scroll to bottom" button. It is only rendered when the scroll view
-   * is enabled, needs to be scrolled, and the button is visible (`isButtonVisible` is `true`).
+   * The "scroll to bottom" button component. It is wrapped in a reanimated View
+   * and has animated style applied to it.
    */
-  const shouldRenderScrollButton = scrollEnabled && needsScroll && isButtonVisible;
 
-  /**
-   * The "scroll to bottom" button component. It is wrapped in a reanimated view and has enter and exit
-   * animations applied to it.
-   */
-  const scrollDownButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScaleInOutAnimation.ScaleInOutAnimation, {
-    springConfig: _core.IOSpringValues.button,
-    style: styles.scrollDownButton,
-    visible: shouldRenderScrollButton,
+  const buttonTransitionStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: isButtonVisible.value,
+    transform: [{
+      scale: (0, _reactNativeReanimated.interpolate)(isButtonVisible.value, [0, 1], [0.5, 1])
+    }]
+  }));
+  const scrollDownButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [styles.scrollDownButton, buttonTransitionStyle],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.IconButtonSolid, {
       testID: "ScrollDownButton",
       accessibilityLabel: "Scroll to bottom",
@@ -136,13 +108,11 @@ const ForceScrollDownView = ({
     })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.ScrollView, {
       testID: "ScrollView",
       ref: scrollViewRef,
       scrollEnabled: scrollEnabled,
       style: style,
-      onScroll: handleScroll,
-      scrollEventThrottle: 8,
       onLayout: handleLayout,
       onContentSizeChange: handleContentSizeChange,
       contentContainerStyle: contentContainerStyle,

package/lib/commonjs/components/templates/ForceScrollDownView.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_core","_buttons","_ScaleInOutAnimation","_layout","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","scrollViewRef","useRef","footerActionsInlineMeasurements","handleFooterActionsInlineMeasurements","useFooterActionsInlineMeasurements","safeBottomAreaHeight","scrollViewHeight","setScrollViewHeight","useState","contentHeight","setContentHeight","isThresholdCrossed","setThresholdCrossed","isButtonVisible","setButtonVisible","handleScroll","useCallback","event","layoutMeasurement","contentOffset","contentSize","nativeEvent","thresholdCrossed","height","y","useEffect","handleContentSizeChange","_contentWidth","handleLayout","layout","handleScrollDownPress","current","scrollToEnd","needsScroll","useMemo","shouldRenderScrollButton","scrollDownButton","jsx","ScaleInOutAnimation","springConfig","IOSpringValues","button","styles","visible","IconButtonSolid","testID","accessibilityLabel","icon","onPress","jsxs","Fragment","ScrollView","ref","onScroll","scrollEventThrottle","onLayout","onContentSizeChange","FooterActions","onMeasure","fixed","exports","StyleSheet","create","position","zIndex","right","IOVisualCostants","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/templates/ForceScrollDownView.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_buttons","_layout","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","animatedRef","internalAnimatedRef","useAnimatedRef","scrollViewRef","footerActionsInlineMeasurements","handleFooterActionsInlineMeasurements","useFooterActionsInlineMeasurements","safeBottomAreaHeight","isButtonVisible","useSharedValue","scrollViewHeight","contentHeight","offsetY","useScrollViewOffset","useAnimatedReaction","value","Math","max","crossed","previous","withSpring","IOSpringValues","button","runOnJS","handleContentSizeChange","useCallback","_w","h","handleLayout","event","nativeEvent","layout","height","handleScrollDownPress","runOnUI","targetY","scrollTo","buttonTransitionStyle","useAnimatedStyle","opacity","transform","scale","interpolate","scrollDownButton","jsx","View","styles","IconButtonSolid","testID","accessibilityLabel","icon","onPress","jsxs","Fragment","ScrollView","ref","onLayout","onContentSizeChange","FooterActions","onMeasure","fixed","exports","StyleSheet","create","position","zIndex","right","IOVisualCostants","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/templates/ForceScrollDownView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/templates/ForceScrollDownView.js

@@ -1,10 +1,10 @@
 "use strict";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import React, { useCallback } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { interpolate, runOnJS, runOnUI, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedStyle, useScrollViewOffset, useSharedValue, withSpring } from "react-native-reanimated";
 import { IOSpringValues, IOVisualCostants } from "../../core";
 import { IconButtonSolid } from "../buttons";
-import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
 import { FooterActions, useFooterActionsInlineMeasurements } from "../layout";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
@@ -20,109 +20,81 @@ const ForceScrollDownView = ({
   style,
   contentContainerStyle,
   scrollEnabled = true,
-  onThresholdCrossed
+  onThresholdCrossed,
+  animatedRef
 }) => {
-  const scrollViewRef = useRef(null);
+  const internalAnimatedRef = useAnimatedRef();
+  const scrollViewRef = animatedRef ?? internalAnimatedRef;
   const {
     footerActionsInlineMeasurements,
     handleFooterActionsInlineMeasurements
   } = useFooterActionsInlineMeasurements();
   const threshold = footerActions ? footerActionsInlineMeasurements.safeBottomAreaHeight : customThreshold;
 
-  /**
-   * The height of the scroll view, used to determine whether or not the scrollable content fits inside
-   * the scroll view and whether the "scroll to bottom" button should be displayed.
-   */
-  const [scrollViewHeight, setScrollViewHeight] = useState(0);
-
-  /**
-   * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
-   * should be displayed.
-   */
-  const [contentHeight, setContentHeight] = useState(0);
-
-  /**
-   * Whether or not the scroll view has crossed the threshold from the bottom.
-   */
-  const [isThresholdCrossed, setThresholdCrossed] = useState(false);
-
   /**
    * Whether or not the "scroll to bottom" button should be visible. This is controlled by the threshold
    * and the current scroll position.
    */
-  const [isButtonVisible, setButtonVisible] = useState(true);
+  // const [isButtonVisible, setButtonVisible] = useState(true);
 
-  /**
-   * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
-   * scroll view has crossed the threshold from the bottom and updates the state accordingly.
-   * The callback is designed to update button visibility only when crossing the threshold.
-   */
-  const handleScroll = useCallback(event => {
-    const {
-      layoutMeasurement,
-      contentOffset,
-      contentSize
-    } = event.nativeEvent;
-    const thresholdCrossed = layoutMeasurement.height + contentOffset.y >= contentSize.height - (threshold ?? 0);
-    if (isThresholdCrossed !== thresholdCrossed) {
-      setThresholdCrossed(thresholdCrossed);
-      setButtonVisible(!thresholdCrossed);
+  const isButtonVisible = useSharedValue(1);
+  const scrollViewHeight = useSharedValue(0);
+  const contentHeight = useSharedValue(0);
+  const offsetY = useScrollViewOffset(scrollViewRef);
+  useAnimatedReaction(() => scrollViewHeight.value + Math.max(offsetY.value, 0) >= contentHeight.value - (threshold ?? 0), (crossed, previous) => {
+    if (crossed !== previous) {
+      // eslint-disable-next-line functional/immutable-data
+      isButtonVisible.value = withSpring(crossed && scrollEnabled ? 0 : 1, IOSpringValues.button);
+      if (onThresholdCrossed) {
+        runOnJS(onThresholdCrossed)(crossed);
+      }
     }
-  }, [threshold, isThresholdCrossed]);
-
-  /**
-   * A side effect that calls the `onThresholdCrossed` callback whenever the value of `isThresholdCrossed` changes.
-   */
-  useEffect(() => {
-    onThresholdCrossed?.(isThresholdCrossed);
-  }, [onThresholdCrossed, isThresholdCrossed]);
+  });
 
   /**
    * A callback that is called whenever the size of the scrollable content changes. It updates the
    * state with the new content height.
    */
-  const handleContentSizeChange = useCallback((_contentWidth, contentHeight) => {
-    setContentHeight(contentHeight);
-  }, []);
+  const handleContentSizeChange = useCallback(
+  // eslint-disable-next-line functional/immutable-data
+  (_w, h) => contentHeight.value = h, [contentHeight]);
 
   /**
    * A callback that is called whenever the size of the scroll view changes. It updates the state
    * with the new scroll view height.
    */
-  const handleLayout = useCallback(event => {
-    setScrollViewHeight(event.nativeEvent.layout.height);
-  }, []);
+  const handleLayout = useCallback(event =>
+  // eslint-disable-next-line functional/immutable-data
+  scrollViewHeight.value = event.nativeEvent.layout.height, [scrollViewHeight]);
 
   /**
    * A callback that is called when the "scroll to bottom" button is pressed. It scrolls the
    * scroll view to the bottom and hides the button.
    */
   const handleScrollDownPress = useCallback(() => {
-    setButtonVisible(false);
-    scrollViewRef.current?.scrollToEnd();
-  }, [scrollViewRef]);
+    runOnUI(() => {
+      "worklet";
 
-  /**
-   * Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
-   * when the scrollable content cannot fit inside the scroll view and the button is enabled
-   * (`scrollEnabled` is `true`).
-   */
-  const needsScroll = useMemo(() => scrollViewHeight > 0 && contentHeight > 0 && scrollViewHeight < contentHeight, [scrollViewHeight, contentHeight]);
+      // eslint-disable-next-line functional/immutable-data
+      isButtonVisible.value = withSpring(0, IOSpringValues.button);
+      const targetY = Math.max(0, contentHeight.value - scrollViewHeight.value);
+      scrollTo(scrollViewRef, 0, targetY, true);
+    })();
+  }, [scrollViewRef, contentHeight, scrollViewHeight, isButtonVisible]);
 
   /**
-   * Whether or not to render the "scroll to bottom" button. It is only rendered when the scroll view
-   * is enabled, needs to be scrolled, and the button is visible (`isButtonVisible` is `true`).
+   * The "scroll to bottom" button component. It is wrapped in a reanimated View
+   * and has animated style applied to it.
    */
-  const shouldRenderScrollButton = scrollEnabled && needsScroll && isButtonVisible;
 
-  /**
-   * The "scroll to bottom" button component. It is wrapped in a reanimated view and has enter and exit
-   * animations applied to it.
-   */
-  const scrollDownButton = /*#__PURE__*/_jsx(ScaleInOutAnimation, {
-    springConfig: IOSpringValues.button,
-    style: styles.scrollDownButton,
-    visible: shouldRenderScrollButton,
+  const buttonTransitionStyle = useAnimatedStyle(() => ({
+    opacity: isButtonVisible.value,
+    transform: [{
+      scale: interpolate(isButtonVisible.value, [0, 1], [0.5, 1])
+    }]
+  }));
+  const scrollDownButton = /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.scrollDownButton, buttonTransitionStyle],
     children: /*#__PURE__*/_jsx(IconButtonSolid, {
       testID: "ScrollDownButton",
       accessibilityLabel: "Scroll to bottom",
@@ -131,13 +103,11 @@ const ForceScrollDownView = ({
     })
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(ScrollView, {
+    children: [/*#__PURE__*/_jsxs(Animated.ScrollView, {
       testID: "ScrollView",
       ref: scrollViewRef,
       scrollEnabled: scrollEnabled,
       style: style,
-      onScroll: handleScroll,
-      scrollEventThrottle: 8,
       onLayout: handleLayout,
       onContentSizeChange: handleContentSizeChange,
       contentContainerStyle: contentContainerStyle,

package/lib/module/components/templates/ForceScrollDownView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","ScrollView","StyleSheet","IOSpringValues","IOVisualCostants","IconButtonSolid","ScaleInOutAnimation","FooterActions","useFooterActionsInlineMeasurements","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","scrollViewRef","footerActionsInlineMeasurements","handleFooterActionsInlineMeasurements","safeBottomAreaHeight","scrollViewHeight","setScrollViewHeight","contentHeight","setContentHeight","isThresholdCrossed","setThresholdCrossed","isButtonVisible","setButtonVisible","handleScroll","event","layoutMeasurement","contentOffset","contentSize","nativeEvent","thresholdCrossed","height","y","handleContentSizeChange","_contentWidth","handleLayout","layout","handleScrollDownPress","current","scrollToEnd","needsScroll","shouldRenderScrollButton","scrollDownButton","springConfig","button","styles","visible","testID","accessibilityLabel","icon","onPress","ref","onScroll","scrollEventThrottle","onLayout","onContentSizeChange","onMeasure","fixed","create","position","zIndex","right","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/templates/ForceScrollDownView.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","StyleSheet","Animated","interpolate","runOnJS","runOnUI","scrollTo","useAnimatedReaction","useAnimatedRef","useAnimatedStyle","useScrollViewOffset","useSharedValue","withSpring","IOSpringValues","IOVisualCostants","IconButtonSolid","FooterActions","useFooterActionsInlineMeasurements","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ForceScrollDownView","footerActions","children","threshold","customThreshold","style","contentContainerStyle","scrollEnabled","onThresholdCrossed","animatedRef","internalAnimatedRef","scrollViewRef","footerActionsInlineMeasurements","handleFooterActionsInlineMeasurements","safeBottomAreaHeight","isButtonVisible","scrollViewHeight","contentHeight","offsetY","value","Math","max","crossed","previous","button","handleContentSizeChange","_w","h","handleLayout","event","nativeEvent","layout","height","handleScrollDownPress","targetY","buttonTransitionStyle","opacity","transform","scale","scrollDownButton","View","styles","testID","accessibilityLabel","icon","onPress","ScrollView","ref","onLayout","onContentSizeChange","onMeasure","fixed","create","position","zIndex","right","scrollDownButtonRight","bottom","scrollDownButtonBottom"],"sourceRoot":"../../../../src","sources":["components/templates/ForceScrollDownView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/templates/ForceScrollDownView.d.ts

@@ -1,5 +1,6 @@
 import React, { ComponentProps, ReactNode } from "react";
 import { ScrollViewProps } from "react-native";
+import Animated, { AnimatedRef } from "react-native-reanimated";
 import { FooterActions } from "../layout";
 type ForceScrollDownViewActions = {
     /**
@@ -27,6 +28,11 @@ export type ForceScrollDownView = {
      * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
      */
     onThresholdCrossed?: (crossed: boolean) => void;
+    /**
+     * Optional Animated ref to be used with `useScrollViewOffset`
+     * (outside this component)
+     */
+    animatedRef?: AnimatedRef<Animated.ScrollView>;
 } & ForceScrollDownViewSlot & Pick<ScrollViewProps, "style" | "contentContainerStyle" | "scrollEnabled" | "testID">;
 /**
  * A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
@@ -34,6 +40,6 @@ export type ForceScrollDownView = {
  * configurable by the `threshold` prop. The button, and the scrolling, can also be disabled by setting the
  * `scrollEnabled` prop to `false`.
  */
-declare const ForceScrollDownView: ({ footerActions, children, threshold: customThreshold, style, contentContainerStyle, scrollEnabled, onThresholdCrossed }: ForceScrollDownView) => React.JSX.Element;
+declare const ForceScrollDownView: ({ footerActions, children, threshold: customThreshold, style, contentContainerStyle, scrollEnabled, onThresholdCrossed, animatedRef }: ForceScrollDownView) => React.JSX.Element;
 export { ForceScrollDownView };
 //# sourceMappingURL=ForceScrollDownView.d.ts.map

package/lib/typescript/components/templates/ForceScrollDownView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceScrollDownView.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ForceScrollDownView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,aAAa,EAAsC,MAAM,WAAW,CAAC;AAE9E,KAAK,0BAA0B,GAAG;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,aAAa,EAAE,IAAI,CACjB,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,OAAO,GAAG,WAAW,CACtB,CAAC;CACH,CAAC;AAEF,KAAK,6BAA6B,GAAG;IACnC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,KAAK,uBAAuB,GACxB,0BAA0B,GAC1B,6BAA6B,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD,GAAG,uBAAuB,GACzB,IAAI,CACF,eAAe,EACf,OAAO,GAAG,uBAAuB,GAAG,eAAe,GAAG,QAAQ,CAC/D,CAAC;AAEJ;;;;;GAKG;AACH,QAAA,MAAM,mBAAmB,GAAI,0HAQ1B,mBAAmB,sBA4JrB,CAAC;AAWF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"ForceScrollDownView.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ForceScrollDownView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AACtE,OAAO,EAAqB,eAAe,EAAc,MAAM,cAAc,CAAC;AAC9E,OAAO,QAAQ,EAAE,EACf,WAAW,EAWZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAsC,MAAM,WAAW,CAAC;AAE9E,KAAK,0BAA0B,GAAG;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,aAAa,EAAE,IAAI,CACjB,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,OAAO,GAAG,WAAW,CACtB,CAAC;CACH,CAAC;AAEF,KAAK,6BAA6B,GAAG;IACnC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,KAAK,uBAAuB,GACxB,0BAA0B,GAC1B,6BAA6B,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;CAChD,GAAG,uBAAuB,GACzB,IAAI,CACF,eAAe,EACf,OAAO,GAAG,uBAAuB,GAAG,eAAe,GAAG,QAAQ,CAC/D,CAAC;AAEJ;;;;;GAKG;AACH,QAAA,MAAM,mBAAmB,GAAI,uIAS1B,mBAAmB,sBAyHrB,CAAC;AAWF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "5.11.11",
+  "version": "5.11.12",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/templates/ForceScrollDownView.tsx

@@ -1,23 +1,20 @@
-import React, {
-  ComponentProps,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import {
-  LayoutChangeEvent,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  ScrollView,
-  ScrollViewProps,
-  StyleSheet
-} from "react-native";
+import React, { ComponentProps, ReactNode, useCallback } from "react";
+import { LayoutChangeEvent, ScrollViewProps, StyleSheet } from "react-native";
+import Animated, {
+  AnimatedRef,
+  interpolate,
+  runOnJS,
+  runOnUI,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollViewOffset,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
 import { IOSpringValues, IOVisualCostants } from "../../core";
 import { IconButtonSolid } from "../buttons";
-import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
 import { FooterActions, useFooterActionsInlineMeasurements } from "../layout";
 
 type ForceScrollDownViewActions = {
@@ -54,6 +51,11 @@ export type ForceScrollDownView = {
    * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
    */
   onThresholdCrossed?: (crossed: boolean) => void;
+  /**
+   * Optional Animated ref to be used with `useScrollViewOffset`
+   * (outside this component)
+   */
+  animatedRef?: AnimatedRef<Animated.ScrollView>;
 } & ForceScrollDownViewSlot &
   Pick<
     ScrollViewProps,
@@ -73,9 +75,11 @@ const ForceScrollDownView = ({
   style,
   contentContainerStyle,
   scrollEnabled = true,
-  onThresholdCrossed
+  onThresholdCrossed,
+  animatedRef
 }: ForceScrollDownView) => {
-  const scrollViewRef = useRef<ScrollView>(null);
+  const internalAnimatedRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollViewRef = animatedRef ?? internalAnimatedRef;
 
   const {
     footerActionsInlineMeasurements,
@@ -86,134 +90,98 @@ const ForceScrollDownView = ({
     ? footerActionsInlineMeasurements.safeBottomAreaHeight
     : customThreshold;
 
-  /**
-   * The height of the scroll view, used to determine whether or not the scrollable content fits inside
-   * the scroll view and whether the "scroll to bottom" button should be displayed.
-   */
-  const [scrollViewHeight, setScrollViewHeight] = useState<number>(0);
-
-  /**
-   * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
-   * should be displayed.
-   */
-  const [contentHeight, setContentHeight] = useState<number>(0);
-
-  /**
-   * Whether or not the scroll view has crossed the threshold from the bottom.
-   */
-  const [isThresholdCrossed, setThresholdCrossed] = useState(false);
-
   /**
    * Whether or not the "scroll to bottom" button should be visible. This is controlled by the threshold
    * and the current scroll position.
    */
-  const [isButtonVisible, setButtonVisible] = useState(true);
+  // const [isButtonVisible, setButtonVisible] = useState(true);
 
-  /**
-   * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
-   * scroll view has crossed the threshold from the bottom and updates the state accordingly.
-   * The callback is designed to update button visibility only when crossing the threshold.
-   */
-  const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const { layoutMeasurement, contentOffset, contentSize } =
-        event.nativeEvent;
-
-      const thresholdCrossed =
-        layoutMeasurement.height + contentOffset.y >=
-        contentSize.height - (threshold ?? 0);
-
-      if (isThresholdCrossed !== thresholdCrossed) {
-        setThresholdCrossed(thresholdCrossed);
-        setButtonVisible(!thresholdCrossed);
+  const isButtonVisible = useSharedValue(1);
+  const scrollViewHeight = useSharedValue(0);
+  const contentHeight = useSharedValue(0);
+  const offsetY = useScrollViewOffset(scrollViewRef);
+
+  useAnimatedReaction(
+    () =>
+      scrollViewHeight.value + Math.max(offsetY.value, 0) >=
+      contentHeight.value - (threshold ?? 0),
+    (crossed, previous) => {
+      if (crossed !== previous) {
+        // eslint-disable-next-line functional/immutable-data
+        isButtonVisible.value = withSpring(
+          crossed && scrollEnabled ? 0 : 1,
+          IOSpringValues.button
+        );
+        if (onThresholdCrossed) {
+          runOnJS(onThresholdCrossed)(crossed);
+        }
       }
-    },
-    [threshold, isThresholdCrossed]
+    }
   );
 
-  /**
-   * A side effect that calls the `onThresholdCrossed` callback whenever the value of `isThresholdCrossed` changes.
-   */
-  useEffect(() => {
-    onThresholdCrossed?.(isThresholdCrossed);
-  }, [onThresholdCrossed, isThresholdCrossed]);
-
   /**
    * A callback that is called whenever the size of the scrollable content changes. It updates the
    * state with the new content height.
    */
   const handleContentSizeChange = useCallback(
-    (_contentWidth: number, contentHeight: number) => {
-      setContentHeight(contentHeight);
-    },
-    []
+    // eslint-disable-next-line functional/immutable-data
+    (_w: number, h: number) => (contentHeight.value = h),
+    [contentHeight]
   );
 
   /**
    * A callback that is called whenever the size of the scroll view changes. It updates the state
    * with the new scroll view height.
    */
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    setScrollViewHeight(event.nativeEvent.layout.height);
-  }, []);
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) =>
+      // eslint-disable-next-line functional/immutable-data
+      (scrollViewHeight.value = event.nativeEvent.layout.height),
+    [scrollViewHeight]
+  );
 
   /**
    * A callback that is called when the "scroll to bottom" button is pressed. It scrolls the
    * scroll view to the bottom and hides the button.
    */
   const handleScrollDownPress = useCallback(() => {
-    setButtonVisible(false);
-    scrollViewRef.current?.scrollToEnd();
-  }, [scrollViewRef]);
+    runOnUI(() => {
+      "worklet";
+      // eslint-disable-next-line functional/immutable-data
+      isButtonVisible.value = withSpring(0, IOSpringValues.button);
+      const targetY = Math.max(0, contentHeight.value - scrollViewHeight.value);
+      scrollTo(scrollViewRef, 0, targetY, true);
+    })();
+  }, [scrollViewRef, contentHeight, scrollViewHeight, isButtonVisible]);
 
   /**
-   * Whether or not the "scroll to bottom" button needs to be displayed. It is only displayed
-   * when the scrollable content cannot fit inside the scroll view and the button is enabled
-   * (`scrollEnabled` is `true`).
+   * The "scroll to bottom" button component. It is wrapped in a reanimated View
+   * and has animated style applied to it.
    */
-  const needsScroll = useMemo(
-    () =>
-      scrollViewHeight > 0 &&
-      contentHeight > 0 &&
-      scrollViewHeight < contentHeight,
-    [scrollViewHeight, contentHeight]
-  );
 
-  /**
-   * Whether or not to render the "scroll to bottom" button. It is only rendered when the scroll view
-   * is enabled, needs to be scrolled, and the button is visible (`isButtonVisible` is `true`).
-   */
-  const shouldRenderScrollButton =
-    scrollEnabled && needsScroll && isButtonVisible;
+  const buttonTransitionStyle = useAnimatedStyle(() => ({
+    opacity: isButtonVisible.value,
+    transform: [{ scale: interpolate(isButtonVisible.value, [0, 1], [0.5, 1]) }]
+  }));
 
-  /**
-   * The "scroll to bottom" button component. It is wrapped in a reanimated view and has enter and exit
-   * animations applied to it.
-   */
   const scrollDownButton = (
-    <ScaleInOutAnimation
-      springConfig={IOSpringValues.button}
-      style={styles.scrollDownButton}
-      visible={shouldRenderScrollButton}
-    >
+    <Animated.View style={[styles.scrollDownButton, buttonTransitionStyle]}>
       <IconButtonSolid
         testID={"ScrollDownButton"}
         accessibilityLabel="Scroll to bottom"
         icon="arrowBottom"
         onPress={handleScrollDownPress}
       />
-    </ScaleInOutAnimation>
+    </Animated.View>
   );
 
   return (
     <>
-      <ScrollView
+      <Animated.ScrollView
         testID={"ScrollView"}
         ref={scrollViewRef}
         scrollEnabled={scrollEnabled}
         style={style}
-        onScroll={handleScroll}
-        scrollEventThrottle={8}
         onLayout={handleLayout}
         onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={contentContainerStyle}
@@ -226,7 +194,7 @@ const ForceScrollDownView = ({
             fixed={false}
           />
         )}
-      </ScrollView>
+      </Animated.ScrollView>
       {scrollDownButton}
     </>
   );

package/lib/commonjs/components/templates/__test__/ForceScrollDownView.test.js

@@ -1,115 +0,0 @@
-"use strict";
-
-var _reactNative = require("@testing-library/react-native");
-var _react = _interopRequireDefault(require("react"));
-var _reactNative2 = require("react-native");
-var _ForceScrollDownView = require("../ForceScrollDownView");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable functional/immutable-data */
-
-const tContent = "Some content";
-describe("ForceScrollDownView", () => {
-  jest.useFakeTimers();
-  it("should match snapshot", () => {
-    const tChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
-      children: tContent
-    });
-    const component = (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ForceScrollDownView.ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    expect(component).toMatchSnapshot();
-  });
-  it("renders the content correctly", () => {
-    const tChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
-      children: tContent
-    });
-    const {
-      getByText
-    } = (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ForceScrollDownView.ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    expect(getByText(tContent)).toBeDefined();
-  });
-  it("displays the scroll down button when necessary", async () => {
-    const tChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
-      children: tContent
-    });
-    const tScreenHeight = 1000;
-    const {
-      getByTestId,
-      queryByTestId
-    } = (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ForceScrollDownView.ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    const scrollView = getByTestId("ScrollView");
-
-    // Update scroll view height
-    (0, _reactNative.fireEvent)(scrollView, "layout", {
-      nativeEvent: {
-        layout: {
-          height: tScreenHeight
-        }
-      }
-    });
-
-    // Update scroll view content height
-    (0, _reactNative.fireEvent)(scrollView, "contentSizeChange", null, tScreenHeight - 500);
-
-    // Button should not be visible because content does not need scrolling
-    const buttonBefore = queryByTestId("ScrollDownButton");
-    expect(buttonBefore).toBeNull();
-
-    // Increase content height to force button to be shown
-    (0, _reactNative.fireEvent)(scrollView, "contentSizeChange", null, tScreenHeight + 500);
-    jest.advanceTimersByTime(500);
-
-    // Button should be visible now beacuse content needs scrolling
-    const buttonAfter = queryByTestId("ScrollDownButton");
-    expect(buttonAfter).not.toBeNull();
-  });
-  it("scrolls to the bottom when the button is pressed", () => {
-    const tChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
-      children: tContent
-    });
-    const tScreenHeight = 1000;
-    const {
-      getByTestId,
-      queryByTestId
-    } = (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ForceScrollDownView.ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    const scrollView = getByTestId("ScrollView");
-
-    // Update scroll view height
-    (0, _reactNative.fireEvent)(scrollView, "layout", {
-      nativeEvent: {
-        layout: {
-          height: tScreenHeight
-        }
-      }
-    });
-
-    // Update scroll view content height
-    (0, _reactNative.fireEvent)(scrollView, "contentSizeChange", null, tScreenHeight + 500);
-
-    // Button should be visible
-    const buttonBefore = getByTestId("ScrollDownButton");
-    expect(buttonBefore).not.toBeNull();
-
-    // Fire button press event
-    _reactNative.fireEvent.press(buttonBefore);
-
-    // Wait for the scroll animation
-    jest.advanceTimersByTime(500);
-
-    // Button should not be visible after scrolling
-    const buttonAfter = queryByTestId("ScrollDownButton");
-    expect(buttonAfter).toBeNull();
-  });
-});
-//# sourceMappingURL=ForceScrollDownView.test.js.map

package/lib/commonjs/components/templates/__test__/ForceScrollDownView.test.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_reactNative2","_ForceScrollDownView","_jsxRuntime","e","__esModule","default","tContent","describe","jest","useFakeTimers","it","tChildren","jsx","Text","children","component","render","ForceScrollDownView","threshold","expect","toMatchSnapshot","getByText","toBeDefined","tScreenHeight","getByTestId","queryByTestId","scrollView","fireEvent","nativeEvent","layout","height","buttonBefore","toBeNull","advanceTimersByTime","buttonAfter","not","press"],"sourceRoot":"../../../../../src","sources":["components/templates/__test__/ForceScrollDownView.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/templates/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ForceScrollDownView should match snapshot 1`] = `
-<RCTScrollView
-  onContentSizeChange={[Function]}
-  onLayout={[Function]}
-  onScroll={[Function]}
-  scrollEnabled={true}
-  scrollEventThrottle={8}
-  testID="ScrollView"
->
-  <View>
-    <Text>
-      Some content
-    </Text>
-  </View>
-</RCTScrollView>
-`;

package/lib/module/components/templates/__test__/ForceScrollDownView.test.js

@@ -1,113 +0,0 @@
-"use strict";
-
-/* eslint-disable functional/immutable-data */
-import { fireEvent, render } from "@testing-library/react-native";
-import React from "react";
-import { Text } from "react-native";
-import { ForceScrollDownView } from "../ForceScrollDownView";
-import { jsx as _jsx } from "react/jsx-runtime";
-const tContent = "Some content";
-describe("ForceScrollDownView", () => {
-  jest.useFakeTimers();
-  it("should match snapshot", () => {
-    const tChildren = /*#__PURE__*/_jsx(Text, {
-      children: tContent
-    });
-    const component = render(/*#__PURE__*/_jsx(ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    expect(component).toMatchSnapshot();
-  });
-  it("renders the content correctly", () => {
-    const tChildren = /*#__PURE__*/_jsx(Text, {
-      children: tContent
-    });
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    expect(getByText(tContent)).toBeDefined();
-  });
-  it("displays the scroll down button when necessary", async () => {
-    const tChildren = /*#__PURE__*/_jsx(Text, {
-      children: tContent
-    });
-    const tScreenHeight = 1000;
-    const {
-      getByTestId,
-      queryByTestId
-    } = render(/*#__PURE__*/_jsx(ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    const scrollView = getByTestId("ScrollView");
-
-    // Update scroll view height
-    fireEvent(scrollView, "layout", {
-      nativeEvent: {
-        layout: {
-          height: tScreenHeight
-        }
-      }
-    });
-
-    // Update scroll view content height
-    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight - 500);
-
-    // Button should not be visible because content does not need scrolling
-    const buttonBefore = queryByTestId("ScrollDownButton");
-    expect(buttonBefore).toBeNull();
-
-    // Increase content height to force button to be shown
-    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
-    jest.advanceTimersByTime(500);
-
-    // Button should be visible now beacuse content needs scrolling
-    const buttonAfter = queryByTestId("ScrollDownButton");
-    expect(buttonAfter).not.toBeNull();
-  });
-  it("scrolls to the bottom when the button is pressed", () => {
-    const tChildren = /*#__PURE__*/_jsx(Text, {
-      children: tContent
-    });
-    const tScreenHeight = 1000;
-    const {
-      getByTestId,
-      queryByTestId
-    } = render(/*#__PURE__*/_jsx(ForceScrollDownView, {
-      threshold: 100,
-      children: tChildren
-    }));
-    const scrollView = getByTestId("ScrollView");
-
-    // Update scroll view height
-    fireEvent(scrollView, "layout", {
-      nativeEvent: {
-        layout: {
-          height: tScreenHeight
-        }
-      }
-    });
-
-    // Update scroll view content height
-    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
-
-    // Button should be visible
-    const buttonBefore = getByTestId("ScrollDownButton");
-    expect(buttonBefore).not.toBeNull();
-
-    // Fire button press event
-    fireEvent.press(buttonBefore);
-
-    // Wait for the scroll animation
-    jest.advanceTimersByTime(500);
-
-    // Button should not be visible after scrolling
-    const buttonAfter = queryByTestId("ScrollDownButton");
-    expect(buttonAfter).toBeNull();
-  });
-});
-//# sourceMappingURL=ForceScrollDownView.test.js.map

package/lib/module/components/templates/__test__/ForceScrollDownView.test.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fireEvent","render","React","Text","ForceScrollDownView","jsx","_jsx","tContent","describe","jest","useFakeTimers","it","tChildren","children","component","threshold","expect","toMatchSnapshot","getByText","toBeDefined","tScreenHeight","getByTestId","queryByTestId","scrollView","nativeEvent","layout","height","buttonBefore","toBeNull","advanceTimersByTime","buttonAfter","not","press"],"sourceRoot":"../../../../../src","sources":["components/templates/__test__/ForceScrollDownView.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/templates/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ForceScrollDownView should match snapshot 1`] = `
-<RCTScrollView
-  onContentSizeChange={[Function]}
-  onLayout={[Function]}
-  onScroll={[Function]}
-  scrollEnabled={true}
-  scrollEventThrottle={8}
-  testID="ScrollView"
->
-  <View>
-    <Text>
-      Some content
-    </Text>
-  </View>
-</RCTScrollView>
-`;

package/lib/typescript/components/templates/__test__/ForceScrollDownView.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ForceScrollDownView.test.d.ts.map

package/lib/typescript/components/templates/__test__/ForceScrollDownView.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ForceScrollDownView.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/templates/__test__/ForceScrollDownView.test.tsx"],"names":[],"mappings":""}

package/src/components/templates/__test__/ForceScrollDownView.test.tsx

@@ -1,106 +0,0 @@
-/* eslint-disable functional/immutable-data */
-import { fireEvent, render } from "@testing-library/react-native";
-import React from "react";
-import { Text } from "react-native";
-import { ForceScrollDownView } from "../ForceScrollDownView";
-
-const tContent = "Some content";
-
-describe("ForceScrollDownView", () => {
-  jest.useFakeTimers();
-
-  it("should match snapshot", () => {
-    const tChildren = <Text>{tContent}</Text>;
-
-    const component = render(
-      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  it("renders the content correctly", () => {
-    const tChildren = <Text>{tContent}</Text>;
-
-    const { getByText } = render(
-      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
-    );
-
-    expect(getByText(tContent)).toBeDefined();
-  });
-
-  it("displays the scroll down button when necessary", async () => {
-    const tChildren = <Text>{tContent}</Text>;
-
-    const tScreenHeight = 1000;
-
-    const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
-    );
-
-    const scrollView = getByTestId("ScrollView");
-
-    // Update scroll view height
-    fireEvent(scrollView, "layout", {
-      nativeEvent: {
-        layout: {
-          height: tScreenHeight
-        }
-      }
-    });
-
-    // Update scroll view content height
-    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight - 500);
-
-    // Button should not be visible because content does not need scrolling
-    const buttonBefore = queryByTestId("ScrollDownButton");
-    expect(buttonBefore).toBeNull();
-
-    // Increase content height to force button to be shown
-    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
-
-    jest.advanceTimersByTime(500);
-
-    // Button should be visible now beacuse content needs scrolling
-    const buttonAfter = queryByTestId("ScrollDownButton");
-    expect(buttonAfter).not.toBeNull();
-  });
-
-  it("scrolls to the bottom when the button is pressed", () => {
-    const tChildren = <Text>{tContent}</Text>;
-
-    const tScreenHeight = 1000;
-
-    const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
-    );
-
-    const scrollView = getByTestId("ScrollView");
-
-    // Update scroll view height
-    fireEvent(scrollView, "layout", {
-      nativeEvent: {
-        layout: {
-          height: tScreenHeight
-        }
-      }
-    });
-
-    // Update scroll view content height
-    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
-
-    // Button should be visible
-    const buttonBefore = getByTestId("ScrollDownButton");
-    expect(buttonBefore).not.toBeNull();
-
-    // Fire button press event
-    fireEvent.press(buttonBefore);
-
-    // Wait for the scroll animation
-    jest.advanceTimersByTime(500);
-
-    // Button should not be visible after scrolling
-    const buttonAfter = queryByTestId("ScrollDownButton");
-    expect(buttonAfter).toBeNull();
-  });
-});

package/src/components/templates/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ForceScrollDownView should match snapshot 1`] = `
-<RCTScrollView
-  onContentSizeChange={[Function]}
-  onLayout={[Function]}
-  onScroll={[Function]}
-  scrollEnabled={true}
-  scrollEventThrottle={8}
-  testID="ScrollView"
->
-  <View>
-    <Text>
-      Some content
-    </Text>
-  </View>
-</RCTScrollView>
-`;