fix: Check cardStyleInterpolator name to allow for custom animation as well

[drager]

We got a custom cardStyleInterpolator in our app that actually calls forModalPresentationIOS 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:

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>
}

[github-actions]

Hey drager! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	765564a
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/63e9d7d40898b90008451722
😎 Deploy Preview	https://deploy-preview-11209--react-navigation-example.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[satya164]

Thank you for the PR

[codecov-commenter]

Codecov Report

Base: 74.09% // Head: 74.09% // No change to project coverage 👍

Coverage data is based on head (b0c37dc) compared to base (061fb13).
Patch coverage: 0.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11209   +/-   ##
=======================================
  Coverage   74.09%   74.09%           
=======================================
  Files         176      176           
  Lines        5598     5598           
  Branches     2193     2193           
=======================================
  Hits         4148     4148           
  Misses       1401     1401           
  Partials       49       49           

Impacted Files	Coverage Δ
packages/stack/src/views/Stack/CardStack.tsx	84.10% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[satya164]

Please fix the lint errors so that this can be merged

[github-actions]

Hey @drager! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[drager]

Please fix the lint errors so that this can be merged

Done!

[cixio]

Hi, I think with this change there is a new bug on iOS (only on production build):

stack@6.3.12

stack@6.3.13

The gray background comes to view when the animation is complete.

Should I open a new issue?

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[satya164]

@cixio feel free to send a PR. the function name is likey minified in production and causing this. so the fix would be to do something like this:

i !==
  findLastIndex((scenes, scene) => {
    const { cardStyleInterpolator } = scene.descriptor.options;

    return (
      cardStyleInterpolator === forModalPresentationIOS ||
      cardStyleInterpolator?.name === "forModalPresentationIOS"
    );
  });

The implementation of findLastIndex could be:

const findLastIndex = (array, callback) => {
  for (var i = array.length - 1; i >= 0; i--) {
    if (callback(array[i])) {
      return i;
    }
  }

  return -1;
};

[cixio]

I'd love to do a PR, but I honestly have no idea what's going on here. I could only determine that the bug must be due to this change. Sorry :(

[satya164]

@cixio please try @react-navigation/stack@6.3.14

[cixio]

works perfekt. thanks! 🥇