fix: regression inside IdentificationModal in validatingTask mode (…

…#6067)

## Short description
This PR fixes a UI regression inside `IdentificationModal` when used to
validate a task. The top right "X", is below the status bar and not
tappable.

| ❌ | ✅ |
|--------|--------|
| <img
src="https://github.com/user-attachments/assets/93805a23-13b1-45fc-bda1-70ae49833d1a"
width="250" /> | <img
src="https://github.com/user-attachments/assets/6c436519-d91e-43b1-b4d0-11d1ea0d96b2"
width="250" /> |

<details><summary>Authentication Mode (is the same)</summary>
<p>

| Before | After |
|--------|--------|
| <img
src="https://github.com/user-attachments/assets/910bd079-db44-4712-9fcc-459c3738aba1"
width="250" /> | <img
src="https://github.com/user-attachments/assets/111387f4-b964-417a-88ee-df9836ffcaf1"
width="250" /> |

</p>
</details> 

## List of changes proposed in this pull request
- Fix UI regression by replacing `SafeAreaView` that it seems not
working anymore inside `<Modal>` and using `insets.top` instead.

## How to test
Test the `IdentificationModal` while entering the app and to validate a
task (for example while changing the PIN code in Profile -> Security
section).

Co-authored-by: Alice Di Rico <[email protected]>

ts/screens/modal/IdentificationModal.tsx

@@ -25,8 +25,8 @@ import {
   View
 } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { useDispatch } from "react-redux";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import I18n from "../../i18n";
 import {
   identificationCancel,
@@ -256,6 +256,8 @@ const IdentificationModal = () => {
     />
   ));
 
+  const { top: topInset } = useSafeAreaInsets();
+
   const pictogramKey: IOPictograms = isValidatingTask ? "passcode" : "key";
 
   // Managing the countdown and the remaining attempts
@@ -339,9 +341,12 @@ const IdentificationModal = () => {
       onRequestClose={onRequestCloseHandler}
     >
       {Platform.OS === "ios" && <StatusBar barStyle={"light-content"} />}
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: blueColor }]}>
+      <View style={[styles.contentWrapper, { backgroundColor: blueColor }]}>
         {isValidatingTask && (
-          <View accessible style={styles.closeButton}>
+          <View
+            accessible
+            style={[styles.closeButton, { marginTop: topInset }]}
+          >
             <ContentWrapper>
               <VSpacer size={VERTICAL_PADDING} />
               <IconButton
@@ -418,13 +423,13 @@ const IdentificationModal = () => {
             </View>
           </ContentWrapper>
         </ScrollView>
-      </SafeAreaView>
+      </View>
     </Modal>
   );
 };
 
 const styles = StyleSheet.create({
-  safeArea: { flexGrow: 1 },
+  contentWrapper: { flexGrow: 1 },
   closeButton: {
     zIndex: 100,
     flexGrow: 1,