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

[timsonater]

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]

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

[timsonater]

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]

@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]

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

[BrodaNoel]

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]

@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.

[BrodaNoel]

@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.

[BrodaNoel]

@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)

[ghost]

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.

[BrodaNoel]

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

[BrodaNoel]

@bradbumbalough PR created #169

[bradbyte]

🎉 This issue is included in version 3.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[diosney]

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.

[randomor]

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

[stealkiller06]

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>

[vasylnahuliak]

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

JFYI: for me useModal works in v4.0.1