From a3d06ab8cd7fc2153256e587a9efac2c2523db76 Mon Sep 17 00:00:00 2001
From: Fabio Bombardi <16268789+shadowsheep1@users.noreply.github.com>
Date: Tue, 30 Jul 2024 10:30:32 +0200
Subject: [PATCH] fix: regression inside `IdentificationModal` in
 `validatingTask` mode (#6067)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 <83651704+Ladirico@users.noreply.github.com>
---
 ts/screens/modal/IdentificationModal.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/ts/screens/modal/IdentificationModal.tsx b/ts/screens/modal/IdentificationModal.tsx
index 4c35f1f9200..9924f2d206d 100644
--- a/ts/screens/modal/IdentificationModal.tsx
+++ b/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,