Transparent modal is transparent only once (or not at all)

[ppozniak]

Hello there.

Current Behavior

I want to use modal window, that isn't full screen and add a black overlay to it. Kind of ActionSheet I would say.

This is working fine (I guess?) However only once. When I close the modal, and open it up again the card isn't transparent anymore. Also upon opening it for the first time there's a small window where background isn't transparent but white for a flick of second.

The first time - black overlay is there

After closing and re-opening modal background isn't transparent anymore

Expected Behavior

I want it to look like ActionSheet.

Something like this

How to reproduce

https://snack.expo.io/r1ngTdBdM
However this snack seems to work even worse as you can never see what's behind ¯_(ツ)_/¯

Also please let me know if anyone knows better way to do this, I couldn't find solutions to this problem, and I need something more than ActionSheet.

Best regards.

Your Environment

software	version
react-navigation	1.0.0-beta.27
react-native	0.50.3

[brentvatne]

I don't suggest use react-navigation for a modal with a transparent background or other types of partial overlays currently. You're better off using some other modal component, like the one built into react-native, react-native-modal, or something similar.

You can follow the discussion around improving modal ergonomics in react-navigation here: react-navigation/rfcs#15

I think we need to write a section in the docs for how to do this kind of thing currently.

[jeandesravines]

Hi,

You can look at this. It was useful for my case which is similar to yours: https://stackoverflow.com/questions/48992961/react-navigation-modal-height?rq=1

In the bottom comments of the target url you can read that opacity: 0.99 is not necessary you can also write opacity: 1. Of cours it's a hack of react-navigation to take account of backgroundColor's definition

[brentvatne]

see transparentCard on stack config here: https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

[brentvatne]

example here: https://github.com/react-navigation/react-navigation-stack/blob/b79aaefcfc0a54ed06f0195880302d5956b8ac4e/example/src/TransparentStack.js