On android, action sheets will open behind modals, not in front of them.

Question

On android, action sheets will open behind modals, not in front of them.

timsonater opened this issue 4 years ago · comments

When opening action sheets within modals on android devices, the modal covers the action sheet and it cannot be accessed unless the modal is closed. Anyone else having this issue?

BradByte · Answer 1 · Wed Apr 08 2020 02:51:16 GMT+0800 (China Standard Time)

Thanks for reporting this -- how are you triggering modals in your app? Can you provide an example with an Expo Snack?

timsonater · Answer 2 · Wed Apr 08 2020 05:33:08 GMT+0800 (China Standard Time)

No problem! I'm just using a simple built in useState hook (in component.js). Here is a quick demo I threw together in snack, as you can see the action sheet opens in front of the modal on IOS but behind the modal on Android. Feel free to let me know if I'm doing anything weird

https://snack.expo.io/IPS!_L319

BradByte · Answer 3 · Thu Apr 09 2020 22:45:34 GMT+0800 (China Standard Time)

@timsonater I'm not sure if this is possible.. given that the Android action sheet is just an absolutely positioned view. I wonder if it would be possible to use a Modal for it instead of a view. I'll play with it and see what happens.

BradByte · Answer 4 · Thu Apr 09 2020 22:45:48 GMT+0800 (China Standard Time)

A SO with a similar need.. https://stackoverflow.com/questions/39766350/bring-view-on-top-of-modal-using-zindex-style-with-react-native.

Broda Noel · Answer 5 · Thu Apr 23 2020 07:18:58 GMT+0800 (China Standard Time)

I'm having exactly the same issue on Android. Working good on iOS.

I forked the snack, to create the same version but using the {isModalShown && <Modal />}, instead of the visible prop on Modal. Still the same error.

@bradbumbalough I'm reading in your link that ReactNative added zIndex recently. Should you maybe add a 99999 zIndex or something like that?

EDIT: I just saw that I will be impossible to show it because the Modal is always on top of everything.
Which is weird because it works on iOS

BradByte · Answer 6 · Thu Apr 23 2020 20:05:23 GMT+0800 (China Standard Time)

@BrodaNoel thanks for the feedback. The reason it works in iOS is because it's not a custom component, but the actual native APIs being invoked. So, if Android had an equivalent API that we could use it would probably work too since they would handle it being rendered on top.

The only thing I'm thinking could work is to render the action sheet in a modal instead of an absolutely positioned view.

Broda Noel · Answer 7 · Thu Apr 23 2020 21:45:01 GMT+0800 (China Standard Time)

@bradbumbalough well... That makes totally sense. It should work, yes. The action-sheet works naturally as a Modal window, so, it would even make sense semantically.

Some months ago, React Native had some problems when 2 modals were opened at the same time, but right now it is fixed, so, we should not have any problems now while opening a second modal (the action-sheet) when a first modal is opened.

The problem was this:
View Home opens Modal A, and Modal A opens Modal B. If View Home closes Modal A, the Modal B was still opened with no way to close it. Kind of crash.
Now it works well, so, this scenario would NOT be a problem:
View Home opens Modal A, and Modal A opens Action Sheet. If Home closes Modal A, the action sheet will automatically be closed first, and then Modal A.

Broda Noel · Answer 8 · Thu Apr 23 2020 21:48:30 GMT+0800 (China Standard Time)

@bradbumbalough my project is blocked by this issue, so, if you don't have the time to check it out, please let me know and I can try to send a PR. Just send me some clues and I'll do my best to fix it (anyways, seems like the fix should be something simple around here)

Deleted user · Answer 9 · Fri Apr 24 2020 15:49:18 GMT+0800 (China Standard Time)

Stumbled into this as well, it would be nice to get the ActionSheet in front of the Modal on Android too.

It also seems like the Expo developer menu opens behind any Modals. This however happens on both Android and iOS.

Broda Noel · Answer 10 · Fri Apr 24 2020 22:33:25 GMT+0800 (China Standard Time)

@positimo yeah, agree, I also see the Expo menu behind the modal, on iOS

Broda Noel · Answer 11 · Mon Apr 27 2020 08:29:24 GMT+0800 (China Standard Time)

@bradbumbalough PR created #169

BradByte · Answer 12 · Wed May 06 2020 21:28:26 GMT+0800 (China Standard Time)

🎉 This issue is included in version 3.7.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Diosney · Answer 13 · Sat May 16 2020 11:59:53 GMT+0800 (China Standard Time)

It didnt't worked by having a global <ActionSheetProvider> at the app component, and the connectActionSheet at the modal component.

After lot of trial and error, had to:

Move the modal content to its own component,
Set connectActionSheet at the modal content component,
Add the content component directly inside <Modal>,
Wrap the content component inside <Modal> in a <ActionSheetProvider>

After that, worked ok.

Shaomeng Zhang · Answer 14 · Fri Jun 12 2020 05:19:51 GMT+0800 (China Standard Time)

Added useModal after upgrading to v3.8, but it doesn't work. 😞

Frank Manuel Peña Rosario · Answer 15 · Sat Sep 05 2020 02:46:35 GMT+0800 (China Standard Time)

Added useModal after upgrading to v3.8, but it doesn't work. 😞

What worked for me was using ActionSheetProvider in the modal.

Like this:
<Modal
animationType="slide"
statusBarTranslucent={true}
transparent={false}
visible={modalChangeProduct}
onRequestClose={() => {
setModalChangeProduct(false);
}}
>

      {modalChangeProduct && (
        <ProductModal
          product={item}
          done={()=> navigation.goBack()}
          closeModal={() => setModalChangeProduct(false)}
        />
      )}
</ActionSheetProvider>
  </Modal>

Vasyl Nahuliak · Answer 16 · Mon Sep 11 2023 19:54:31 GMT+0800 (China Standard Time)

Added useModal after upgrading to v3.8, but it doesn't work. 😞

JFYI: for me useModal works in v4.0.1