[IOPLT-278] Makes HeaderSecondLevel handle no go back action button and modal representation with no extra space on top

example/src/navigation/navigator.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { HeaderSecondLevel } from "@pagopa/io-app-design-system";
 import { Accordion } from "../pages/Accordion";
 import { DSAdvice } from "../pages/Advice";
 import { DSAlert } from "../pages/Alert";
@@ -324,7 +325,22 @@ const AppNavigator = () => (
         name={APP_ROUTES.SCREENS.FULL_SCREEN_MODAL.route}
         component={ListItems}
         options={{
-          headerShown: false
+          headerShown: true,
+          header: ({ navigation }) => (
+            <HeaderSecondLevel
+              title={APP_ROUTES.SCREENS.FULL_SCREEN_MODAL.title}
+              transparent
+              isModal
+              type="singleAction"
+              firstAction={{
+                icon: "closeMedium",
+                onPress: () => {
+                  navigation.goBack();
+                },
+                accessibilityLabel: ""
+              }}
+            />
+          )
         }}
       />
     </Stack.Group>

example/src/pages/HeaderSecondLevelForModal.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { useState } from "react";
+import { Alert, View, LayoutChangeEvent } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue
+} from "react-native-reanimated";
+import { useNavigation } from "@react-navigation/native";
+import {
+  Body,
+  H3,
+  HeaderSecondLevel,
+  IOVisualCostants,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+
+// This is defined as about the half of a default ListItem… component
+const defaultTriggerOffsetValue: number = 32;
+
+export const HeaderSecondLevelScreen = () => {
+  const [triggerOffsetValue, setTriggerOffsetValue] = useState(
+    defaultTriggerOffsetValue
+  );
+  const translationY = useSharedValue(0);
+
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+
+  const getTitleHeight = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setTriggerOffsetValue(height);
+  };
+
+  const scrollHandler = useAnimatedScrollHandler(event => {
+    // eslint-disable-next-line functional/immutable-data
+    translationY.value = event.contentOffset.y;
+  });
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerTransparent: true,
+      header: () => (
+        <HeaderSecondLevel
+          scrollValues={{
+            contentOffsetY: translationY,
+            triggerOffset: triggerOffsetValue
+          }}
+          title={"Questo è un titolo lungo, ma lungo lungo davvero, eh!"}
+          // goBack={() => navigation.goBack()}
+          // backAccessibilityLabel="Torna indietro"
+          transparent={true}
+          type="singleAction"
+          firstAction={{
+            icon: "help",
+            onPress: () => {
+              Alert.alert("Contextual Help");
+            },
+            accessibilityLabel: ""
+          }}
+          // secondAction={{
+          //   icon: "add",
+          //   onPress: () => {
+          //     Alert.alert("add");
+          //   },
+          //   accessibilityLabel: ""
+          // }}
+          // thirdAction={{
+          //   icon: "coggle",
+          //   onPress: () => {
+          //     Alert.alert("Settings");
+          //   },
+          //   accessibilityLabel: ""
+          // }}
+        />
+      )
+    });
+  }, [navigation, translationY, triggerOffsetValue]);
+
+  return (
+    <Animated.ScrollView
+      contentContainerStyle={{
+        marginTop: insets.top + IOVisualCostants.headerHeight,
+        paddingBottom: insets.bottom,
+        paddingHorizontal: IOVisualCostants.appMarginDefault
+      }}
+      onScroll={scrollHandler}
+      scrollEventThrottle={8}
+      snapToOffsets={[0, triggerOffsetValue]}
+      snapToEnd={false}
+      decelerationRate="normal"
+    >
+      <View
+        onLayout={getTitleHeight}
+        // style={{ backgroundColor: IOColors["hanPurple-500"] }}
+      >
+        <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
+      </View>
+      <VSpacer />
+      {[...Array(50)].map((_el, i) => (
+        <Body key={`body-${i}`}>Repeated text</Body>
+      ))}
+    </Animated.ScrollView>
+  );
+};

src/components/layout/HeaderSecondLevel.tsx

@@ -26,13 +26,22 @@ type ScrollValues = {
   triggerOffset: number;
 };
 
+type BackProps =
+  | {
+      goBack: () => void;
+      backAccessibilityLabel: string;
+    }
+  | {
+      goBack?: never;
+      backAccessibilityLabel?: never;
+    };
+
 type CommonProps = WithTestID<{
   scrollValues?: ScrollValues;
   title: string;
-  goBack: () => void;
-  backAccessibilityLabel: string;
   // Visual attributes
   transparent?: boolean;
+  isModal?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -63,7 +72,8 @@ interface ThreeActions extends CommonProps {
   thirdAction: ActionProp;
 }
 
-export type HeaderSecondLevel = Base | OneAction | TwoActions | ThreeActions;
+export type HeaderSecondLevel = BackProps &
+  (Base | OneAction | TwoActions | ThreeActions);
 
 const HEADER_BG_COLOR: IOColors = "white";
 const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
@@ -106,6 +116,7 @@ export const HeaderSecondLevel = ({
   title,
   type,
   transparent = false,
+  isModal = false,
   testID,
   firstAction,
   secondAction,
@@ -155,14 +166,21 @@ export const HeaderSecondLevel = ({
     >
       <Animated.View
         testID={testID}
-        style={[{ marginTop: insets.top }, styles.headerInner]}
+        style={[isModal ? {} : { marginTop: insets.top }, styles.headerInner]}
       >
-        <IconButton
-          icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-          color="neutral"
-          onPress={goBack}
-          accessibilityLabel={backAccessibilityLabel}
-        />
+        {goBack ? (
+          <IconButton
+            icon={Platform.select({
+              android: "backAndroid",
+              default: "backiOS"
+            })}
+            color="neutral"
+            onPress={goBack}
+            accessibilityLabel={backAccessibilityLabel}
+          />
+        ) : (
+          <HSpacer size={32} />
+        )}
         <Animated.Text
           numberOfLines={1}
           style={[