Navigating to a modal screen from action sheet causes issues in iOS with React Native 0.73

[fikkatra]

After upgrading to React Native 0.73, we experience issues when navigating from within an action sheet to a modal screen (using react-navigation), and hiding the action sheet when doing so. The issue only occurs in iOS and are probably related to iOS not allowing more than one (native) modal. It worked fine in RN v0.72.

This is the setup: the app has a page with an action sheet. From within the action sheet, it is possible to navigate to another screen, which is configured as a modal screen. On iOS, it slides out from the bottom. Before navigating to the modal screen, we close the action sheet using SheetManager.hide(), then execute the navigation.

This is the code that hides the action sheet and navigates to the modal screen:

  const navigateToModal = async () => {
    await SheetManager.hide(sheetId);
    navigation.navigate('Modal')
  }

What we observe:

• If we navigate to the modal screen from the page itself (not from the action sheet), everything works fine
• If we navigate from the action sheet, the Modal screen does not open. Even worse: after doing this, the navigation for every modal screen in the entire app breaks

The screencast below illustrates the behavior:

• Navigate to the modal screen from a button on the page itself => works fine
• Close modal screen and open action sheet
• Navigate to the modal screen from a button within the action sheet => does not work
• Now, the navigation from the page (which previously worked) does not work anymore

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2024-03-06.at.17.54.27.mp4

Some other observations:

• If we pass isModal={false} the issue does not occur. However, this impacts the layout of our app.
• The app behaves in a slightly different way if we omit await from SheetManager.hide. In this case, the modal opens briefly, then disappears. It does not break any future navigations.
• If we don't execute SheetManager.hide at all, everything works fine. However, the action sheet is still visible after closing the Modal screen, which is not what we want.

I don't see any errors being logged. Since everything works fine if we omit SheetManager.hide, I'm assuming the problem is within this library.

Here is a simple code repo that reproduces the issue.

Currently using v0.9.2 of this library, but rolling back to v0.8 does not fix the issue.

[LiamBrenner]

@fikkatra I experienced a similar issue, but on React Native 0.71, and I managed to fix the issue by wrapping the navigation call in a setTimeout, in my case something like:

  const action = await SheetManager.show('my-sheet', {
    payload: {...},
  });

  if (action === 'EDIT') {
    setTimeout(() => {
      navigation.push('MyScreen', { ... });
    }, 100);
  } else if (action === 'DELETE') {
    ...
  }

[chengfengfengwang]

Maybe we need to wait until sheet close entirely then navigate to a new native modal ?