fix: Status banner contains extra space on header (#6510)

pagopa · Dec 5, 2024 · bd558bd · bd558bd
1 parent 14d6543
commit bd558bd
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/ts/components/ui/IOScrollView.tsx b/ts/components/ui/IOScrollView.tsx
@@ -44,6 +44,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { WithTestID } from "../../types/WithTestID";
+import { useStatusAlertProps } from "../../hooks/useStatusAlertProps";
 
 export type IOScrollViewActions =
   | {
@@ -160,6 +161,7 @@ export const IOScrollView = ({
   contentContainerStyle,
   testID
 }: IOScrollView) => {
+  const alertProps = useStatusAlertProps();
   const theme = useIOTheme();
 
   /* Navigation */
@@ -255,12 +257,22 @@ export const IOScrollView = ({
     if (headerConfig) {
       navigation.setOptions({
         header: () => (
-          <HeaderSecondLevel {...headerConfig} scrollValues={scrollValues} />
+          <HeaderSecondLevel
+            {...headerConfig}
+            ignoreSafeAreaMargin={!!alertProps}
+            scrollValues={scrollValues}
+          />
         ),
         headerTransparent: headerConfig.transparent
       });
     }
-  }, [headerConfig, navigation, scrollPositionAbsolute, snapOffset]);
+  }, [
+    headerConfig,
+    navigation,
+    scrollPositionAbsolute,
+    snapOffset,
+    alertProps
+  ]);
 
   const RefreshControlComponent = refreshControlProps ? (
     <RefreshControl {...refreshControlProps} />

diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/ts/components/ui/IOScrollViewWithLargeHeader.tsx
@@ -64,7 +64,6 @@ export const IOScrollViewWithLargeHeader = forwardRef<View, Props>(
       contextualHelp,
       contextualHelpMarkdown,
       faqCategories,
-      ignoreSafeAreaMargin = false,
       includeContentMargins = false,
       headerActionsProp = {},
       excludeEndContentMargin,
@@ -91,7 +90,6 @@ export const IOScrollViewWithLargeHeader = forwardRef<View, Props>(
     };
 
     const headerProps: ComponentProps<typeof HeaderSecondLevel> = {
-      ignoreSafeAreaMargin,
       ...useHeaderProps(
         canGoback
           ? {

diff --git a/ts/hooks/useHeaderSecondLevel.tsx b/ts/hooks/useHeaderSecondLevel.tsx
@@ -132,7 +132,6 @@ export const useHeaderSecondLevel = ({
     const enableDiscreteTransitionProps =
       enableDiscreteTransition && animatedRef
         ? {
-            ignoreSafeAreaMargin: !!alertProps,
             enableDiscreteTransition,
             animatedRef
           }
@@ -142,6 +141,7 @@ export const useHeaderSecondLevel = ({
       scrollValues,
       variant,
       backgroundColor,
+      ignoreSafeAreaMargin: !!alertProps,
       ...enableDiscreteTransitionProps
     };
   }, [

diff --git a/ts/screens/authentication/__tests__/cie/ActivateNfcScreen.test.tsx b/ts/screens/authentication/__tests__/cie/ActivateNfcScreen.test.tsx
@@ -23,6 +23,10 @@ jest.mock("../../../../store/hooks", () => ({
   useIOStore: jest.fn()
 }));
 
+jest.mock("../../../../hooks/useStatusAlertProps", () => ({
+  useStatusAlertProps: jest.fn()
+}));
+
 const mockNavigate = jest.fn();
 const mockReplace = jest.fn();
 jest.mock("@react-navigation/native", () => {

diff --git a/ts/screens/profile/__test__/LanguagesPreferencesScreen.test.tsx b/ts/screens/profile/__test__/LanguagesPreferencesScreen.test.tsx
@@ -17,6 +17,11 @@ jest.mock("../../../store/hooks", () => ({
   useIOStore: jest.fn()
 }));
 
+// Mock the useStatusAlertProps hook
+jest.mock("../../../hooks/useStatusAlertProps", () => ({
+  useStatusAlertProps: jest.fn()
+}));
+
 describe("LanguagesPreferencesScreen", () => {
   beforeAll(() => {
     jest.spyOn(Alert, "alert");