fix(stax): stax image loader only allow one error page in navigation

LedgerHQ · Nov 28, 2023 · 5e7b558 · 5e7b558
1 parent 134cb77
commit 5e7b558
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/apps/ledger-live-mobile/src/components/RootNavigator/CustomImageNavigator.tsx b/apps/ledger-live-mobile/src/components/RootNavigator/CustomImageNavigator.tsx
@@ -12,7 +12,6 @@ import Step0Welcome from "../../screens/CustomImage/Step0Welcome";
 import PreviewPreEdit from "../../screens/CustomImage/PreviewPreEdit";
 import PreviewPostEdit from "../../screens/CustomImage/PreviewPostEdit";
 import NFTGallerySelector from "../../screens/CustomImage/NFTGallerySelector";
-import { NavigationHeaderBackButton } from "../NavigationHeaderBackButton";
 import { CustomImageNavigatorParamList } from "./types/CustomImageNavigator";
 
 export default function CustomImageNavigator() {
@@ -48,11 +47,11 @@ export default function CustomImageNavigator() {
       <Stack.Screen
         name={ScreenName.CustomImageErrorScreen}
         component={ErrorScreen}
-        options={({ navigation }) => ({
+        options={{
           title: "",
-          headerLeft: () => <NavigationHeaderBackButton onPress={() => navigation.popToTop()} />,
+          headerLeft: undefined,
           gestureEnabled: false,
-        })}
+        }}
       />
       <Stack.Screen
         name={ScreenName.CustomImagePreviewPreEdit}

diff --git a/apps/ledger-live-mobile/src/screens/CustomImage/ErrorScreen.tsx b/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(() => {