fix: fix showing back button with headerMode=screen. fixes #8508

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -32,7 +32,6 @@ export type Props = {
   scenes: (Scene<Route<string>> | undefined)[];
   getPreviousScene: (props: {
     route: Route<string>;
-    index: number;
   }) => Scene<Route<string>> | undefined;
   getFocusedRoute: () => Route<string>;
   onContentHeightChange?: (props: {
@@ -79,10 +78,7 @@ export default function HeaderContainer({
 
         const isFocused = focusedRoute.key === scene.route.key;
         const previous =
-          getPreviousScene({
-            route: scene.route,
-            index: i,
-          }) ?? parentPreviousScene;
+          getPreviousScene({ route: scene.route }) ?? parentPreviousScene;
 
         // If the screen is next to a headerless screen, we need to make the header appear static
         // This makes the header look like it's moving with the screen

packages/stack/src/views/Stack/CardContainer.tsx

@@ -32,7 +32,6 @@ type Props = TransitionPreset & {
   cardStyle?: StyleProp<ViewStyle>;
   getPreviousScene: (props: {
     route: Route<string>;
-    index: number;
   }) => Scene<Route<string>> | undefined;
   getFocusedRoute: () => Route<string>;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
@@ -162,7 +161,7 @@ function CardContainer({
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
   const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
-  const previousScene = getPreviousScene({ route: scene.route, index });
+  const previousScene = getPreviousScene({ route: scene.route });
 
   return (
     <Card

packages/stack/src/views/Stack/CardStack.tsx

@@ -336,31 +336,21 @@ export default class CardStack extends React.Component<Props, State> {
     return state.routes[state.index];
   };
 
-  private getPreviousScene = ({
-    route,
-    index,
-  }: {
-    route: Route<string>;
-    index: number;
-  }) => {
-    const previousRoute = this.props.getPreviousRoute({ route });
+  private getPreviousScene = ({ route }: { route: Route<string> }) => {
+    const { getPreviousRoute } = this.props;
+    const { scenes } = this.state;
 
-    let previous: Scene<Route<string>> | undefined;
+    const previousRoute = getPreviousRoute({ route });
 
     if (previousRoute) {
-      // The previous scene will be shortly before the current scene in the array
-      // So loop back from current index to avoid looping over the full array
-      for (let j = index - 1; j >= 0; j--) {
-        const s = this.state.scenes[j];
+      const previousScene = scenes.find(
+        (scene) => scene.route.key === previousRoute.key
+      );
 
-        if (s && s.route.key === previousRoute.key) {
-          previous = s;
-          break;
-        }
-      }
+      return previousScene;
     }
 
-    return previous;
+    return undefined;
   };
 
   render() {