React-native-navigation: dismissModal alpha animation on iOS

[ghost]

Issue Description

This is a follow up to an original issue that was reported here: https://github.com/wix/react-native-navigation/issues/6195

Which was subsequently fixed, however there seems to be a regression in the form of a flicker before the alpha animation starts.

Steps to Reproduce / Code Snippets / Screenshots

const component = {
    name: "example.modal",

    options: {
        layout: {
            backgroundColor: "transparent",
            componentBackgroundColor: "transparent"
        },

        modalPresentationStyle: OptionsModalPresentationStyle.overCurrentContext,

        topBar: {
            visible: false
        },

        animations: {
            showModal: {
                waitForRender: true,
                alpha: {
                    duration: 200,
                    from: 0,
                    to: 1
                }
            },

            dismissModal: {
                alpha: {
                    duration: 2000,
                    from: 1,
                    to: 0
                }
            }
        }
    }
};

Navigation.showModal({
    stack: {
        children: [ { component } ]
    }
});

A long animation duration was set on purpose so that you can clearly see the flicker before the animation starts.

By flicker I mean the modal disappears and shows up again in the span of less than a second.

---

Environment

• React Native Navigation version: 6.7.2-snapshot.1024
• React Native version: 0.63.0-rc.1
• Platform(s) iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6s, running 13.5.1

Thanks

[ghost]

Hello @jinshin1013, are you able to reproduce this issue 🙏 , if you need more details plz let me know.

[jinshin1013]

@karimb1 I'm so sorry about the delay 😓 Haven't had a chance to look into this more. Will get to the issue as soon as I get some time. Thanks for your patience.

[ghost]

@jinshin1013 Thank you very much, take your time 🙏

[jinshin1013]

Hi @karimb1 ✋ I finally got around to this issue. However, I was not able to reproduce the problem in the Playground app. I've used the same config as what you have provided in the issue, but couldn't see the flicker :(

Would you be able to provide the minimal reproduction on the Github so I can have a look?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.