From 0b3cb45ce28c8a1f7867b91fa2816b690c689f0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20H=C3=A5kansson?= <jesper@jesperh.se>
Date: Mon, 13 Feb 2023 08:50:34 +0100
Subject: [PATCH] fix: Check cardStyleInterpolator name to allow for custom
 animation as well (#11209)

We got a custom `cardStyleInterpolator` in our app that actually calls
[forModalPresentationIOS](https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx#L93)
but we add some own customizations to it. This worked fine in `v5` of
react-navigation, and started to act weird after the upgrade to `v6`,
the screen under the modal was displayed right until the animation was
finished, then the screen under disappeared, which is unintended.

This PR just checks for the name instead. Making it do the same as this
check:
https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/views/Stack/Card.tsx#L580
and will allow for custom cardStyleInterpolators.

This can be reproduced by creating your own cardStyleIntepolator and
then call `forModalPresentationIOS`:

```ts
import type {StackCardInterpolationProps} from "@react-navigation/stack";
import {CardStyleInterpolators} from "@react-navigation/stack";

export const forModalPresentationIOS = ({
    index,
    current,
    next,
    inverted,
    layouts,
    insets,
    ...rest
}: StackCardInterpolationProps) => {
    const defaultAnimations = CardStyleInterpolators.forModalPresentationIOS({
        index,
        current,
        next,
        inverted,
        layouts,
        insets,
        ...rest,
    });
    return defaultAnimations
};


const ModalStack = createStackNavigator<ModalStackParamList>();

export function ModalNavigator() {
    return (
        <ModalStack.Navigator>
            <ModalStack.Screen
                name='Modal'
                component={() => <View />}
                options={{
                    gestureEnabled: true,
                    gestureDirection: "vertical",
                    cardOverlayEnabled: true,
                    cardStyleInterpolator: forModalPresentationIOS
               }}
            />
        </ModalStack.Navigator>
}
```
---
 packages/stack/src/views/Stack/CardStack.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
index 2c0311ad06..565d81c91e 100755
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/packages/stack/src/views/Stack/CardStack.tsx
@@ -18,10 +18,7 @@ import {
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
-import {
-  forModalPresentationIOS,
-  forNoAnimation as forNoAnimationCard,
-} from '../../TransitionConfigs/CardStyleInterpolators';
+import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
 import {
   DefaultTransition,
   ModalFadeTransition,
@@ -523,8 +520,10 @@ export default class CardStack extends React.Component<Props, State> {
           : getIsModalPresentation(options.cardStyleInterpolator)
           ? i !==
             scenes
-              .map((scene) => scene.descriptor.options.cardStyleInterpolator)
-              .lastIndexOf(forModalPresentationIOS)
+              .map(
+                (scene) => scene.descriptor.options.cardStyleInterpolator.name
+              )
+              .lastIndexOf('forModalPresentationIOS')
           : true,
       } = options;