Merge pull request #5572 from LedgerHQ/bugfix/stax-invalid-picture

fix(stax): loading multiple invalid pictures and going back will navigate on correct page

.changeset/pretty-poems-lie.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Loading multiple invalid picture for stax and using the back arrow navigate to the correct page

apps/ledger-live-mobile/src/screens/CustomImage/ErrorScreen.tsx

@@ -1,5 +1,5 @@
 import { Flex } from "@ledgerhq/native-ui";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { SafeAreaView } from "react-native-safe-area-context";
 import styled from "styled-components/native";
@@ -25,11 +25,31 @@ const buttonClickedEventProperties = {
   button: "upload another image",
 };
 
-const ErrorScreen = ({ route }: NavigationProps) => {
+const ErrorScreen = ({ route, navigation }: NavigationProps) => {
   const [isModalOpened, setIsModalOpened] = useState(false);
   const { params } = route;
   const { error, device } = params;
 
+  // Only keep 1 instance of error page in the navigation
+  useEffect(() => {
+    const navigationState = navigation.getState();
+    const { index, routes } = navigationState;
+    const firstErrorPageIndex = routes.findIndex(
+      (route: { name: string }, id: number) =>
+        route.name === ScreenName.CustomImageErrorScreen && index !== id,
+    );
+
+    if (firstErrorPageIndex !== -1) {
+      const filteredRoutes = routes.filter((route, id) => id !== firstErrorPageIndex);
+
+      navigation.reset({
+        ...navigationState,
+        index: filteredRoutes.length - 1,
+        routes: filteredRoutes,
+      });
+    }
+  }, [navigation]);
+
   const { t } = useTranslation();
 
   const closeModal = useCallback(() => {