@pagopa/io-app-design-system 1.17.1 → 1.17.2

package/lib/typescript/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/lib/typescript/core/IOStyles.d.ts

@@ -10,6 +10,8 @@ interface IOVisualCostants {
     avatarSizeSmall: number;
     avatarSizeMedium: number;
     iconContainedSizeDefault: number;
+    scrollDownButtonRight: number;
+    scrollDownButtonBottom: number;
 }
 export declare const IOVisualCostants: IOVisualCostants;
 export declare const IOStyles: {

package/lib/typescript/core/IOStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,WAAW,EAGX,QAAQ,EACR,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;CAclC,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;CAYzB,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}
+{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,WAAW,EAGX,QAAQ,EACR,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAQ9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;CAclC,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;CAYzB,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -72,6 +72,7 @@
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
+    "@testing-library/react-native": "^12.4.0",
     "@types/jest": "^28.1.2",
     "@types/lodash": "^4.14.157",
     "@types/react": "~17.0.38",

package/src/components/buttons/ButtonLink.tsx

@@ -15,6 +15,7 @@ import {
   IOColors,
   IOScaleValues,
   IOSpringValues,
+  hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
@@ -28,7 +29,8 @@ import {
 import { HSpacer } from "../spacer/Spacer";
 import { buttonTextFontSize } from "../typography";
 
-export type ColorButtonLink = "primary";
+export type ColorButtonLink = "primary" | "contrast";
+
 export type ButtonLinkProps = WithTestID<{
   color?: ColorButtonLink;
   label: string;
@@ -62,6 +64,13 @@ const mapColorStates: Record<
       pressed: IOColors["blueIO-600"],
       disabled: IOColors["grey-700"]
     }
+  },
+  contrast: {
+    label: {
+      default: IOColors.white,
+      pressed: hexToRgba(IOColors.white, 0.85),
+      disabled: hexToRgba(IOColors.white, 0.5)
+    }
   }
 };
 
@@ -77,6 +86,13 @@ const mapLegacyColorStates: Record<
       pressed: IOColors["blue-600"],
       disabled: IOColors["grey-700"]
     }
+  },
+  contrast: {
+    label: {
+      default: IOColors.white,
+      pressed: hexToRgba(IOColors.white, 0.85),
+      disabled: hexToRgba(IOColors.white, 0.5)
+    }
   }
 };
 

package/src/components/common/ScaleInOutAnimation.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable functional/immutable-data */
+import React from "react";
+import { ViewStyle } from "react-native";
+import Animated, {
+  LayoutAnimation,
+  WithSpringConfig,
+  withDelay,
+  withSpring,
+  withTiming
+} 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 }]
+      },
+      animations: {
+        transform: [{ scale: withDelay(delayIn, withSpring(1, springConfig)) }]
+      }
+    };
+  };
+
+  const exitingAnimation = (): LayoutAnimation => {
+    "worklet";
+    return {
+      initialValues: {
+        transform: [{ scale: 1 }]
+      },
+      animations: {
+        transform: [{ scale: withDelay(delayOut, withTiming(0)) }]
+      }
+    };
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={style}
+      entering={enteringAnimation}
+      exiting={exitingAnimation}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+export { ScaleInOutAnimation };

package/src/components/layout/ForceScrollDownView.tsx

@@ -0,0 +1,210 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+  StyleSheet
+} from "react-native";
+import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
+import { IOSpringValues, IOVisualCostants } from "../../core";
+import { IconButtonSolid } from "../buttons";
+
+type ForceScrollDownViewProps = {
+  /**
+   * The content to display inside the scroll view.
+   */
+  children: React.ReactNode;
+  /**
+   * The distance from the bottom of the scrollable content at which the "scroll to bottom" button
+   * should become hidden. Defaults to 100.
+   */
+  threshold?: number;
+  /**
+   * 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"
+>;
+
+/**
+ * A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
+ * when pressed. The button is hidden when the scroll view reaches a certain threshold from the bottom, which is
+ * configurable by the `threshold` prop. The button, and the scrolling, can also be disabled by setting the
+ * `scrollEnabled` prop to `false`.
+ */
+const ForceScrollDownView = ({
+  children,
+  threshold = 100,
+  style,
+  contentContainerStyle,
+  scrollEnabled = true,
+  onThresholdCrossed
+}: ForceScrollDownViewProps) => {
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  /**
+   * 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>();
+
+  /**
+   * 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>();
+
+  /**
+   * 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);
+
+  /**
+   * 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.
+   */
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { layoutMeasurement, contentOffset, contentSize } =
+        event.nativeEvent;
+
+      const thresholdCrossed =
+        layoutMeasurement.height + contentOffset.y >=
+        contentSize.height - threshold;
+
+      setThresholdCrossed(previousState => {
+        if (!previousState && thresholdCrossed) {
+          setButtonVisible(false);
+        }
+        if (previousState && !thresholdCrossed) {
+          setButtonVisible(true);
+        }
+        return thresholdCrossed;
+      });
+    },
+    [threshold]
+  );
+
+  /**
+   * 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);
+    },
+    []
+  );
+
+  /**
+   * 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);
+  }, []);
+
+  /**
+   * 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]);
+
+  /**
+   * 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 != null &&
+      contentHeight != null &&
+      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;
+
+  /**
+   * 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}
+    >
+      <IconButtonSolid
+        testID={"ScrollDownButton"}
+        accessibilityLabel="Scroll to bottom"
+        icon="arrowBottom"
+        onPress={handleScrollDownPress}
+      />
+    </ScaleInOutAnimation>
+  );
+
+  return (
+    <>
+      <ScrollView
+        testID={"ScrollView"}
+        ref={scrollViewRef}
+        scrollIndicatorInsets={{ right: 1 }}
+        scrollEnabled={scrollEnabled}
+        onScroll={handleScroll}
+        scrollEventThrottle={400}
+        style={style}
+        onLayout={handleLayout}
+        onContentSizeChange={handleContentSizeChange}
+        contentContainerStyle={contentContainerStyle}
+      >
+        {children}
+      </ScrollView>
+      {scrollDownButton}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollDownButton: {
+    position: "absolute",
+    zIndex: 10,
+    right: IOVisualCostants.scrollDownButtonRight,
+    bottom: IOVisualCostants.scrollDownButtonBottom
+  }
+});
+
+export { ForceScrollDownView };

package/src/components/layout/HeaderFirstLevel.tsx

@@ -85,7 +85,7 @@ export const HeaderFirstLevel = ({
         <H3
           style={{ flexShrink: 1 }}
           numberOfLines={1}
-          color={backgroundColor === "dark" ? "white" : undefined}
+          color={backgroundColor === "dark" ? "white" : "black"}
         >
           {title}
         </H3>
@@ -94,7 +94,7 @@ export const HeaderFirstLevel = ({
             <>
               <IconButton
                 {...thirdAction}
-                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+                color={backgroundColor === "dark" ? "contrast" : "primary"}
               />
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
@@ -105,7 +105,7 @@ export const HeaderFirstLevel = ({
             <>
               <IconButton
                 {...secondAction}
-                color={backgroundColor === "dark" ? "contrast" : "neutral"}
+                color={backgroundColor === "dark" ? "contrast" : "primary"}
               />
               {/* Same as above */}
               <HSpacer size={16} />
@@ -114,7 +114,7 @@ export const HeaderFirstLevel = ({
           {type !== "base" && (
             <IconButton
               {...firstAction}
-              color={backgroundColor === "dark" ? "contrast" : "neutral"}
+              color={backgroundColor === "dark" ? "contrast" : "primary"}
             />
           )}
         </View>

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

@@ -0,0 +1,106 @@
+/* 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>{tChildren}</ForceScrollDownView>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders the content correctly", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const { getByText } = render(
+      <ForceScrollDownView>{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>{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>{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/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

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

package/src/components/layout/index.tsx

@@ -3,5 +3,6 @@ export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
+export * from "./ForceScrollDownView";
 export * from "./FooterWithButtons";
 export * from "./BlockButtons";

package/src/core/IOStyles.ts

@@ -22,6 +22,8 @@ interface IOVisualCostants {
   avatarSizeSmall: number;
   avatarSizeMedium: number;
   iconContainedSizeDefault: number;
+  scrollDownButtonRight: number;
+  scrollDownButtonBottom: number;
 }
 
 export const IOVisualCostants: IOVisualCostants = {
@@ -29,7 +31,9 @@ export const IOVisualCostants: IOVisualCostants = {
   headerHeight: 56,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66,
-  iconContainedSizeDefault: 44
+  iconContainedSizeDefault: 44,
+  scrollDownButtonRight: 24,
+  scrollDownButtonBottom: 24
 };
 
 export const IOStyles = StyleSheet.create({