Modal transition glitches if one modal is hidden and other shown at the same time (iOS only)

Environment

  Expo CLI 3.27.14 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.20.1 - /var/folders/kc/w3zg_rmd6vnd_5w22fw154yh0000gn/T/yarn--1602600352442-0.37023497130992244/node
      Yarn: 1.22.5 - /var/folders/kc/w3zg_rmd6vnd_5w22fw154yh0000gn/T/yarn--1602600352442-0.37023497130992244/yarn
      npm: 6.14.4 - ~/.asdf/installs/nodejs/10.20.1/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    IDEs:
      Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~39.0.2 => 39.0.3
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2
      react-native-web: ~0.13.12 => 0.13.18
    Expo Workflow: managed

Platforms

iOS only

Versions

• iOS: simulator, 14.0.1
• react-native-modal: 11.5.6
• react-native: 0.63.2
• react: 16.13.1

Description

When switching between two modals using the same piece of state, on iOS the animation glitches and the 2nd modal never shows up. It’s there and it’s covering the content, breaking any pressable buttons underneath but it’s not visible (can be made visible by manually switching the isVisible prop off and on in React Native Debugger).

This does not happen on Android (there’s a bit of visual glitching but otherwise it’s fine) but does so on both iPhone and the simulator.

Reproducible Demo

https://snack.expo.io/gRtAP3xNO

• Open demo on iPhone or download it and open locally on the iOS simulator
• Press Trigger first modal
• Press Trigger second modal

Expected outcome:

First modal fades away and second modal takes its place

Actual result

First modal disappears but second modal never shows up.

Note

This might be a duplicate of #481 or they may have a similar root cause

Workaround until this issue is fixed

• Don’t use one piece of state to switch between two modals
• When switching between modals, close the first one and wrap the code flipping the visibility of the second one in InteractionManager.runAfterInteractions to allow the first fade out animation to finish

[pistonsky]

No need for any timeouts here. It’s a well-known issue: you can’t just simultaneously switch between modals. It’s also bad for UX. Instead, you should wait for one modal to finish its closing animation (by using onModalHide), and only after that show another modal.

[hbiede]

Even when using onModalHide I’m running into issues when I want to display for example an Alert.alert from onModalHide…

It will show up for a split second and disappear.

If I use setTimeout(func, 10), it will work. Has anyone else encountered this?

This was solved in #491. You should be able to use () => InteractionManager.runAfterInteractions(func) in onModalClose