Loading the modal on first render of screen means backdrop doesn't show

[matt-dalton]

Environment

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Apple M1 Pro
    Memory: 22.05 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
    Watchman: 2023.08.14.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /Users/me/.rvm/rubies/ruby-2.7.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.5 => 0.68.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

Android

Versions

• Android: 13
• react-native-modal: 13.0.1
• react-native: 0.68.5
• react: 17.0.2

Description

I have a screen with a Modal on it, which is set to appear immediately (i.e. isVisible is true on the first render)

The problem can be summarised as (on Android):

• If I reload my app, the backdrop correctly appears
• If I navigate to the screen from somewhere else, the backdrop doesn't appear (or at least you can't see it)

Works (backdrop shows)

Doesn't work (backdrop doesn't show)

Some more info....

Here is my modal config:

    //Note I've tried with various combinations of the modal props below - and the behaviour is always the same
    return (
        <Modal
            // backdropColor={defaultTheme.palette.neutral[999]}
            // hasBackdrop
            // useNativeDriver
            // hideModalContentWhileAnimating
            // useNativeDriverForBackdrop
            // statusBarTranslucent
            // onBackdropPress={onBackdropPress}
            // hideModalContentWhileAnimating
            isVisible={isVisible}

            // coverScreen
            // avoidKeyboard={avoidKeyboard}
        >
            <View style={[styles.modalContainer, modalStyle]}>
                  // Inner modal
            </View>
    </Modal>

When the modal doesn't work, isVisible is true in the first render of the screen.

If I set a timeout before setting isVisible, the backdrop works. e.g.

   const [hasTimeoutCompleted, setHasTimeoutCompleted] = useState(false)
   useEffect(() => {
         if (!hasTimeoutCompleted) {
             setTimeout(() => {
                 setHasTimeoutCompleted(true)
             })
         }
     }, [])

    const isVisible = isVisibleFromComponentAbove && hasTimeoutCompleted

I also tried looking into what in the library code could have caused the issue. Just adding the console.log below means the backdrop then does work:

I've tried moving the modal onto different screens in our app and the behaviour is always the same.

I have also tried using the Flipper layout debugger to see if the modal is just invisible or not there at all. It looks like this same View is shown whether the bug is present or not:

=> so I guess the backdrop must be hidden vs not there?

I tried the suggestion to switch for react native modal, however the backdrop behaviour is different so not really applicable to this particular problem

Reproducible Demo

I'm afraid this is a little tricky. It seems very tied to the particular context of our codebase, which I can't share. The app isn't super quick on android, so I wonder if the bug happens because of a race condition that rears its head when there are performance bottlenecks? The fact that adding a console.log fixes it suggests something along those lines.

I had a look into the source code to look for any clues...could the fact makeBackdrop runs in the render function cause any issues? Is there anything stateful happening there?

Let me know if there's anything else I can try. Thanks!