chore: [IOPID-2077] Add correct title in settings section (#6066)

## Short description
In order to have a correct display of the title in the header between
the display in ‘profile’ (first-level header) and that in ‘settings’
(second-level header), it was necessary to change the rendering logic of
the entire section.

## List of changes proposed in this pull request
- Create component that contains all logic and core render of the screen
- Create component that renders the correct wrapper component of the
screen

## Demo
<p>

| 🤖 Android 🤖 | 🍏 iOS 🍏 |
| - | - |
| <video
src="https://github.com/user-attachments/assets/2eb2617c-093a-4a53-9ff8-96c8ea5e8eee"/>
| <video
src="https://github.com/user-attachments/assets/e9787ef7-4b2d-48d0-b3fc-10a4b739c86a"/>
|

</p>

## How to test
Run the application and follow the demo instructions

---------

Co-authored-by: Damiano Plebani <[email protected]>

ts/screens/profile/ProfileMainScreen.tsx

@@ -2,7 +2,6 @@ import {
   Banner,
   ContentWrapper,
   Divider,
-  HeaderSecondLevel,
   IOVisualCostants,
   ListItemAction,
   ListItemNav,
@@ -15,7 +14,6 @@ import React, {
   memo,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState
@@ -25,7 +23,6 @@ import AppVersion from "../../components/AppVersion";
 import { LightModalContext } from "../../components/ui/LightModal";
 import { setShowProfileBanner } from "../../features/profileSettings/store/actions";
 import { showProfileBannerSelector } from "../../features/profileSettings/store/selectors";
-import { useHeaderProps } from "../../hooks/useHeaderProps";
 import { useTabItemPressWhenScreenActive } from "../../hooks/useTabItemPressWhenScreenActive";
 import I18n from "../../i18n";
 import { useIONavigation } from "../../navigation/params/AppParamsList";
@@ -36,6 +33,7 @@ import { isSettingsVisibleAndHideProfileSelector } from "../../store/reducers/ba
 import { TranslationKeys } from "../../../locales/locales";
 import { isDebugModeEnabledSelector } from "../../store/reducers/debug";
 import { isDevEnv } from "../../utils/environment";
+import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader";
 import DeveloperModeSection from "./DeveloperModeSection";
 import useContentWithFF from "./useContentWithFF";
 
@@ -54,17 +52,11 @@ const ListItem = memo(ListItemNav);
 /**
  * A screen to show all the options related to the user profile
  */
-const ProfileMainScreen = () => {
+const ProfileMainScreenFC = () => {
   const { hideModal } = React.useContext(LightModalContext);
   const dispatch = useIODispatch();
   const navigation = useIONavigation();
   const { show } = useIOToast();
-  const isSettingsVisibleAndHideProfile = useIOSelector(
-    isSettingsVisibleAndHideProfileSelector
-  );
-  const contextualHelpTitleContent = useContentWithFF(
-    "profile.main.contextualHelpTitle"
-  );
   const isDebugModeEnabled = useIOSelector(isDebugModeEnabledSelector);
   const showProfileBanner = useIOSelector(showProfileBannerSelector);
   const [tapsOnAppVersion, setTapsOnAppVersion] = useState(0);
@@ -228,30 +220,8 @@ const ProfileMainScreen = () => {
 
   const logoutLabel = I18n.t("profile.logout.menulabel");
 
-  const headerProps = useHeaderProps({
-    title: "",
-    backAccessibilityLabel: I18n.t("global.buttons.back"),
-    goBack: () => navigation.goBack(),
-    showHelp: true,
-    faqCategories: ["profile"],
-    contextualHelpMarkdown: {
-      title: contextualHelpTitleContent as TranslationKeys,
-      body: isSettingsVisibleAndHideProfile
-        ? "profile.main.contextualHelpContent"
-        : "profile.main.legacyContextualHelpContent"
-    }
-  });
-
-  useLayoutEffect(() => {
-    if (isSettingsVisibleAndHideProfile) {
-      navigation.setOptions({
-        header: () => <HeaderSecondLevel {...headerProps} />
-      });
-    }
-  }, [headerProps, isSettingsVisibleAndHideProfile, navigation]);
-
   return (
-    <ScrollView ref={scrollViewContentRef}>
+    <>
       {showProfileBanner && (
         <ContentWrapper>
           <VSpacer size={16} />
@@ -292,7 +262,46 @@ const ProfileMainScreen = () => {
       </ContentWrapper>
       {/* Developer Section */}
       {(isDebugModeEnabled || isDevEnv) && <DeveloperModeSection />}
-      {/* End Page */}
+    </>
+  );
+};
+
+const ProfileMainScreen = () => {
+  const contextualHelpTitleContent = useContentWithFF(
+    "profile.main.contextualHelpTitle"
+  );
+  const isSettingsVisibleAndHideProfile = useIOSelector(
+    isSettingsVisibleAndHideProfileSelector
+  );
+  const scrollViewContentRef = useRef<ScrollView>(null);
+
+  useTabItemPressWhenScreenActive(
+    () => scrollViewContentRef.current?.scrollTo({ y: 0, animated: true }),
+    false
+  );
+
+  if (isSettingsVisibleAndHideProfile) {
+    return (
+      <IOScrollViewWithLargeHeader
+        title={{
+          label: I18n.t("global.buttons.settings")
+        }}
+        headerActionsProp={{ showHelp: true }}
+        contextualHelpMarkdown={{
+          title: contextualHelpTitleContent as TranslationKeys,
+          body: isSettingsVisibleAndHideProfile
+            ? "profile.main.contextualHelpContent"
+            : "profile.main.legacyContextualHelpContent"
+        }}
+        faqCategories={["profile"]}
+      >
+        <ProfileMainScreenFC />
+      </IOScrollViewWithLargeHeader>
+    );
+  }
+  return (
+    <ScrollView ref={scrollViewContentRef}>
+      <ProfileMainScreenFC />
       <VSpacer size={24} />
     </ScrollView>
   );