chore: [IOPLT-989] Slightly improve ForceScrollDownView component (#423)

dmnplb · web-flow · commit e34f3134c869 · 2025-03-10T10:06:54.000+01:00
## Short description
This PR slightly improves the `ForceScrollDownView` component.

## List of changes proposed in this pull request
- Add the new `footerActions` prop: if set the component will include
`FooterActions`
- Make `threshold` mandatory to avoid a potential buggy behavior when
not properly configured
- Improve the `ScaleInOutAnimation` by adding an `opacity` transition.
The previous feeling is still conveyed.
- Prevent `useFooterActionsMeasurements` potential memory leaks

## How to test
Launch the example app and go to the **Force scroll down** page with
different devices
diff --git a/example/src/pages/ForceScrollDownViewPage.tsx b/example/src/pages/ForceScrollDownViewPage.tsx
@@ -1,24 +1,30 @@
+import { Body, ForceScrollDownView } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { SafeAreaView } from "react-native";
-import {
-  IOStyles,
-  ForceScrollDownView,
-  Body
-} from "@pagopa/io-app-design-system";
+import { Alert } from "react-native";
 import { Screen } from "../components/Screen";
 
 /**
  * This Screen is used to test components in isolation while developing.
  * @returns a screen with a flexed view where you can test components
  */
 export const ForceScrollDownViewPage = () => (
-  <SafeAreaView style={IOStyles.flex}>
-    <ForceScrollDownView>
-      <Screen>
-        {[...Array(50)].map((_el, i) => (
-          <Body key={`body-${i}`}>Repeated text</Body>
-        ))}
-      </Screen>
-    </ForceScrollDownView>
-  </SafeAreaView>
+  <ForceScrollDownView
+    footerActions={{
+      actions: {
+        type: "SingleButton",
+        primary: {
+          label: "Continua",
+          onPress: () => {
+            Alert.alert("Button pressed");
+          }
+        }
+      }
+    }}
+  >
+    <Screen>
+      {[...Array(34)].map((_el, i) => (
+        <Body key={`body-${i}`}>Repeated text</Body>
+      ))}
+    </Screen>
+  </ForceScrollDownView>
 );
diff --git a/src/components/common/ScaleInOutAnimation.tsx b/src/components/common/ScaleInOutAnimation.tsx
@@ -4,36 +4,32 @@ import { ViewStyle } from "react-native";
 import Animated, {
   LayoutAnimation,
   WithSpringConfig,
-  withDelay,
-  withSpring,
-  withTiming
+  withSpring
 } from "react-native-reanimated";
 
 type Props = {
   visible?: boolean;
   springConfig?: WithSpringConfig;
-  delayOut?: number;
-  delayIn?: number;
   children: React.ReactNode;
   style?: ViewStyle;
 };
 
 const ScaleInOutAnimation = ({
   visible = true,
   springConfig = { damping: 500, mass: 3, stiffness: 1000 },
-  delayOut = 0,
-  delayIn = 0,
   children,
   style
 }: Props) => {
   const enteringAnimation = (): LayoutAnimation => {
     "worklet";
     return {
       initialValues: {
-        transform: [{ scale: 0 }]
+        opacity: 0,
+        transform: [{ scale: 0.5 }]
       },
       animations: {
-        transform: [{ scale: withDelay(delayIn, withSpring(1, springConfig)) }]
+        opacity: withSpring(1, springConfig),
+        transform: [{ scale: withSpring(1, springConfig) }]
       }
     };
   };
@@ -42,10 +38,12 @@ const ScaleInOutAnimation = ({
     "worklet";
     return {
       initialValues: {
+        opacity: 1,
         transform: [{ scale: 1 }]
       },
       animations: {
-        transform: [{ scale: withDelay(delayOut, withTiming(0)) }]
+        opacity: withSpring(0, springConfig),
+        transform: [{ scale: withSpring(0.5, springConfig) }]
       }
     };
   };
diff --git a/src/components/layout/ForceScrollDownView.tsx b/src/components/layout/ForceScrollDownView.tsx
@@ -1,4 +1,6 @@
 import React, {
+  ComponentProps,
+  ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -13,29 +15,51 @@ import {
   ScrollViewProps,
   StyleSheet
 } from "react-native";
-import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
 import { IOSpringValues, IOVisualCostants } from "../../core";
 import { IconButtonSolid } from "../buttons";
+import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
+import { FooterActions } from "./FooterActions";
+import { useFooterActionsInlineMeasurements } from "./hooks";
 
-type ForceScrollDownViewProps = {
+type ForceScrollDownViewActions = {
   /**
-   * The content to display inside the scroll view.
+   * The distance from the bottom is computed automatically based on the actions.
    */
-  children: React.ReactNode;
+  threshold?: never;
+  footerActions: Omit<
+    ComponentProps<typeof FooterActions>,
+    "fixed" | "onMeasure"
+  >;
+};
+
+type ForceScrollDownViewCustomSlot = {
   /**
    * The distance from the bottom of the scrollable content at which the "scroll to bottom" button
-   * should become hidden. Defaults to 100.
+   * should become hidden.
    */
-  threshold?: number;
+  threshold: number;
+  footerActions?: never;
+};
+
+type ForceScrollDownViewSlot =
+  | ForceScrollDownViewActions
+  | ForceScrollDownViewCustomSlot;
+
+export type ForceScrollDownView = {
+  /**
+   * The content to display inside the scroll view.
+   */
+  children: ReactNode;
   /**
    * A callback that will be called whenever the scroll view crosses the threshold. The callback
    * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
    */
   onThresholdCrossed?: (crossed: boolean) => void;
-} & Pick<
-  ScrollViewProps,
-  "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
->;
+} & 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
@@ -44,26 +68,36 @@ type ForceScrollDownViewProps = {
  * `scrollEnabled` prop to `false`.
  */
 const ForceScrollDownView = ({
+  footerActions,
   children,
-  threshold = 100,
+  threshold: customThreshold,
   style,
   contentContainerStyle,
   scrollEnabled = true,
   onThresholdCrossed
-}: ForceScrollDownViewProps) => {
+}: ForceScrollDownView) => {
   const scrollViewRef = useRef<ScrollView>(null);
 
+  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<number>();
+  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>();
+  const [contentHeight, setContentHeight] = useState<number>(0);
 
   /**
    * Whether or not the scroll view has crossed the threshold from the bottom.
@@ -79,7 +113,7 @@ const ForceScrollDownView = ({
   /**
    * 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 updatr button visibility only when crossing the threshold.
+   * The callback is designed to update button visibility only when crossing the threshold.
    */
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -88,19 +122,14 @@ const ForceScrollDownView = ({
 
       const thresholdCrossed =
         layoutMeasurement.height + contentOffset.y >=
-        contentSize.height - threshold;
-
-      setThresholdCrossed(previousState => {
-        if (!previousState && thresholdCrossed) {
-          setButtonVisible(false);
-        }
-        if (previousState && !thresholdCrossed) {
-          setButtonVisible(true);
-        }
-        return thresholdCrossed;
-      });
+        contentSize.height - (threshold ?? 0);
+
+      if (isThresholdCrossed !== thresholdCrossed) {
+        setThresholdCrossed(thresholdCrossed);
+        setButtonVisible(!thresholdCrossed);
+      }
     },
-    [threshold]
+    [threshold, isThresholdCrossed]
   );
 
   /**
@@ -145,8 +174,8 @@ const ForceScrollDownView = ({
    */
   const needsScroll = useMemo(
     () =>
-      scrollViewHeight != null &&
-      contentHeight != null &&
+      scrollViewHeight > 0 &&
+      contentHeight > 0 &&
       scrollViewHeight < contentHeight,
     [scrollViewHeight, contentHeight]
   );
@@ -182,16 +211,22 @@ const ForceScrollDownView = ({
       <ScrollView
         testID={"ScrollView"}
         ref={scrollViewRef}
-        scrollIndicatorInsets={{ right: 1 }}
         scrollEnabled={scrollEnabled}
-        onScroll={handleScroll}
-        scrollEventThrottle={400}
         style={style}
+        onScroll={handleScroll}
+        scrollEventThrottle={8}
         onLayout={handleLayout}
         onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={contentContainerStyle}
       >
         {children}
+        {footerActions && (
+          <FooterActions
+            {...footerActions}
+            onMeasure={handleFooterActionsInlineMeasurements}
+            fixed={false}
+          />
+        )}
       </ScrollView>
       {scrollDownButton}
     </>
diff --git a/src/components/layout/__test__/ForceScrollDownView.test.tsx b/src/components/layout/__test__/ForceScrollDownView.test.tsx
@@ -13,7 +13,7 @@ describe("ForceScrollDownView", () => {
     const tChildren = <Text>{tContent}</Text>;
 
     const component = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     expect(component).toMatchSnapshot();
@@ -23,7 +23,7 @@ describe("ForceScrollDownView", () => {
     const tChildren = <Text>{tContent}</Text>;
 
     const { getByText } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     expect(getByText(tContent)).toBeDefined();
@@ -35,7 +35,7 @@ describe("ForceScrollDownView", () => {
     const tScreenHeight = 1000;
 
     const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     const scrollView = getByTestId("ScrollView");
@@ -72,7 +72,7 @@ describe("ForceScrollDownView", () => {
     const tScreenHeight = 1000;
 
     const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     const scrollView = getByTestId("ScrollView");
diff --git a/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap b/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap
@@ -6,12 +6,7 @@ exports[`ForceScrollDownView should match snapshot 1`] = `
   onLayout={[Function]}
   onScroll={[Function]}
   scrollEnabled={true}
-  scrollEventThrottle={400}
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
+  scrollEventThrottle={8}
   testID="ScrollView"
 >
   <View>
diff --git a/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts b/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FooterActionsInlineMeasurements } from "../FooterActionsInline";
 
 type UseFooterActionsInlineMeasurementsProps = {
@@ -25,11 +25,12 @@ export const useFooterActionsInlineMeasurements =
       safeBottomAreaHeight: 0
     });
 
-    const handleFooterActionsInlineMeasurements = (
-      values: FooterActionsInlineMeasurements
-    ) => {
-      setFooterActionsInlineMeasurements(values);
-    };
+    const handleFooterActionsInlineMeasurements = useCallback(
+      (values: FooterActionsInlineMeasurements) => {
+        setFooterActionsInlineMeasurements(values);
+      },
+      []
+    );
 
     return {
       footerActionsInlineMeasurements,
diff --git a/src/components/layout/hooks/useFooterActionsMeasurements.ts b/src/components/layout/hooks/useFooterActionsMeasurements.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FooterActionsMeasurements } from "../FooterActions";
 
 type UseFooterActionsMeasurementsProps = {
@@ -22,11 +22,12 @@ export const useFooterActionsMeasurements =
         safeBottomAreaHeight: 0
       });
 
-    const handleFooterActionsMeasurements = (
-      values: FooterActionsMeasurements
-    ) => {
-      setFooterActionsMeasurements(values);
-    };
+    const handleFooterActionsMeasurements = useCallback(
+      (values: FooterActionsMeasurements) => {
+        setFooterActionsMeasurements(values);
+      },
+      []
+    );
 
     return {
       footerActionsMeasurements,
