React-native-navigation: showModal and dismissModal animation on iOS

[zabojad]

Issue Description

I'm trying to change the default animation used to show and dismiss some specific modal. By default on iOS, it slides from the bottom to the top of the screen. In one particular case, I want it to fade in / fade out.

So here is my code to open the modal:

react.native.navigation.Navigation.showModal({
        component: {
            name: 'my-modal',
            options: {
                overlay: {
                    interceptTouchOutside: true,
                },
                layout: {
                    backgroundColor: 'transparent',
                    componentBackgroundColor: 'transparent',
                },
#if android
                modalPresentationStyle: OverCurrentContext,
#elseif ios
                modalPresentationStyle: OverFullScreen,
#end
                animations: {
                    showModal: {
                        alpha: {
                            from: .0,
                            to: 1.0
                        }
                    },
                    dismissModal: {
                        alpha: {
                            from: 1.0,
                            to: .0
                        }
                    },
                }
            }
        }
    });

That works as expected on Android. On iOS, the animation setting seems to be ignored.

I've tried to change

                animations: {
                    showModal: {
                        alpha: {
                            from: .0,
                            to: 1.0
                        }
                    },

by:

                animations: {
                    showModal: {
                        content: {
                            alpha: {
                            from: .0,
                            to: 1.0
                            }
                        }
                    },

But then it is even worse, the default "slide" animation is still there but it seems my component root react comp has been removed and only its children are visible.

Obviously, I am missing something. Could someone please explain me what em I doing wrong with these animation settings ?

---

Environment

• React Native Navigation version: 3.7.0
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): all

[zabojad]

Hey @yogevbd ! I know you are one of the iOS guys of the project :). Would you have any suggestion for me for this issue? Thanks in advance.

[Andarius]

I have a similar issue where the screen goes black when setting alpha (here on dismiss):

Navigation.showModal({
component: {
    name: screen,
    passProps: props,
    options: {
        animations: {
            dismissModal: {
                alpha: {
                    from: 1,
                    to: 0,
                    duration: 200,
                },
            },
        },
        modalPresentationStyle: 'overCurrentContext',
        layout: {
            backgroundColor: 'rgba(0, 0, 0, 0.1)',
            componentBackgroundColor: 'rgba(0, 0, 0, 0.1)',
        },
    },
},
})

Here is an example:

### Environment
* React Native Navigation version: 6.5.0
* React Native version: 0.62.0
* Platform(s) (iOS, Android, or both?): iOS
* Device info (Simulator/Device? OS version? Debug/Release?): all

[zabojad]

@yogevbd @guyca this is some pretty basic animation settings, why does it not work on iOS ? Is there any limitation or something ? If so, what could be done instead ?

[sm2017]

@yogevbd @guyca I have same issue + https://github.com/wix/react-native-navigation/issues/6172

[zabojad]

:( it is really annoying that we cannot get any info on this? @guyca @yogevbd is it by design that ios modal cannot have their show/dismiss animation customized? Should we use an overlay instead?

[ghost]

We're facing the same issue reported by @Andarius as well.

[tarikchakur]

Facing the same issue as @Andarius and @karimb1.

[twelvearrays]

We are having the same issue as well. ShowModal with an alpha animation works if we leave the opposite animation for dismissModal alpha off. We can fade-in but fade-out leaves us with a black screen.

[jinshin1013]

@zabojad Hi there, would you mind try a couple things for me?

Firstly, is upgrading the RNN to the latest an option for you? If it is, I recommend you do as there have been lots of improvement since 3.7.0.

Another thing I want you to try is to use a stack layout when showing modals as below:

// index.js
  const onPress = () => {
    Navigation.showModal({
      stack: {
        children: [
          {
            component: {
              name: "MODAL",
              options: {
                layout: {
                  backgroundColor: 'transparent',
                  componentBackgroundColor: 'transparent',
                },
                modalPresentationStyle: OptionsModalPresentationStyle.overFullScreen,
                animations: {
                  showModal: {
                    alpha: {
                      from: 0,
                      to: 1,
                      duration: 500,
                    },
                  },
                  dismissModal: {
                    alpha: {
                      from: 1,
                      to: 0,
                      duration: 500,
                    },
                  },
                },
              },
            },
          },
        ],
      },
    })
  }

// Modal.js
Modal.options = {
  // Hide the top bar if you do not need it.
  topBar: { visible: false }
}

With these, you can add custom modal animation as you can see in the below gif.

[Andarius]

It works for me @jinshin1013 , thanks (still the black screen issue though)

[jinshin1013]

@Andarius The black screen issue is being addressed in this https://github.com/wix/react-native-navigation/pull/6238 PR.

[jinshin1013]

Closing the issue as these problems have been addressed in the latest version.

[ghost]

Thank you @jinshin1013, any idea when can we expect this change to be released 🙏

[jinshin1013]

@karimb1 Sorry for the late response :( I would not be able to comment on that unfortunately as it depends on the Wix internal schedule (I'm not a Wix staff hahhaa) but it won't be too long. So hold tight!

Edit:
Published in v6.7.2

[ghost]

Thank you @jinshin1013 for the clarification, no problem at all, we're just super happy this has actually been fixed 😄 regardless of schedule !

[jinshin1013]

@karimb1 Sorry it was my bad, I pre-emptively assumed the new release included all the changes but apparently it only included a single patch. Could you try 6.7.2-snapshot.1024 instead?

[ghost]

@jinshin1013, thank you, yes this version works, the black screen anomaly no longer occurs, however before the alpha dismiss animation starts to run, there seems to be a quick flicker, as if the modal hides and shows very rapidly (Once).

You can observe this by using a longer animation duration (Ex: 1000).

Thanks

[jinshin1013]

@karimb1 Hmm interesting, would you be able to create a new issue regarding the new problem please?

[ghost]

@jinshin1013 Done 👍