Find alternative to delay when showing multiple bottom sheets sequentially on iOS

[guarani]

There is iOS-specific tech-debt in the project where if <BottomSheet> is presented and we wish to present another <BottomSheet> after closing the first, we have to put a delay in-between (e.g. 100ms delay). Without the delay, the hiding of the first bottom sheet closes the second bottom sheet as it's being presented.

See https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/missing/edit.native.js#L160-L174

Related discussion (in this project)

There is some discussion around this problem which I've quote below:

• Utilization of delay on iOS when opening the picker because it was observed that without it, the inserter's close behavior closes the picker while it's opening. I know we aren't fond of utilizing delay in our UI code, so the only other option would be to somehow pass the dismissal event of the Inserter bottom sheet down to the MediaUpload component. I wasn't sure how to do that at a glance and I wasn't sure it was worth the effort since, I have seen Timeout / delay use cases across the codebase, so a second opinion on this before merge would be helpful.

  [RNMobile] Simplify media insertion flow Part 2 - media upload #29547

• Again, it looks like others have had issues with dismissing modals and immediately presenting another screen, but it's hard to tell if they were fixed by using the onModalHide prop.
  It's hard to say if 100ms will always work of if it could fail on some iOS devices. Are there any alternatives you're aware of?

  [RNMobile] Unsupported fallback spike #21150 (comment)

Links about this issue

This issue appears to be a problem with react-native-modal (which powers the <BottomSheet> component) and there are some issues here:

• use onModalHide, cannot show one bay one!!! react-native-modal/react-native-modal#305
• UI will been stuck when show another modal react-native-modal/react-native-modal#378
• cannot show one by one react-native-modal/react-native-modal#303
• Opening another modal using onModalHide not working. react-native-modal/react-native-modal#234
• Can't immediatly open a new modal after closing one react-native-modal/react-native-modal#192
• multiple modals not working react-native-modal/react-native-modal#171

[dcalhoun]

I happened upon this GitHub issue. I encountered the same issue while working #25810. Thanks to some guidance from @geriux, rather than immediately opening the second modal, we used onHandleClosingBottomSheet to "register" a callback to open the second modal once the first modal closed. We then closed the first modal.

gutenberg/packages/components/src/mobile/picker/index.ios.js

Lines 45 to 49 in 6ef9e82

	if ( selected.requiresModal && isBottomSheetOpened ) {
	onHandleClosingBottomSheet( () => {
	onChange( selected.value );
	} );
	closeBottomSheet();

I'm not sure if this approach is directly applicable to all scenarios encountering this limitation of react-native-modal, but I figured I'd share my experience here for posterity regardless.

Additionally, react-native-modal/react-native-modal#491 may have improved the situation in regards to animations interfering with the timing of callback invocations. It may be worthwhile to make sure we have the latest version of react-native-modal pulled into the project.

Lastly, the inability to display multiple modals on iOS stems from React Native core's Modal, on which react-native-model depends. There is an open feature request to add the ability, but I would imagine it is unlikely to be completed anytime soon. So, relying upon the aforementioned callbacks is likely the best solution for the foreseeable future.