react-native: [Navigator] Scene with transparent background doesn't show previous scene
The Modal docs say to use Navigator instead of Modal with a top-level Navigator. However, when setting backgroundColor: 'transparent'
on the scene being pushed, the previous scene is not visible below. So how do we actually go about simulating a Modal with Navigator?
If there’s a way to do this already then I’d be willing to create a PR to update the docs to reflect that.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 16 (3 by maintainers)
I modified navigator’s code in react native and reached the goal.
You only need to take the following two steps:
Config the next route’s sceneConfigs.
Modify navigator’s code, make the previous view keep static.
If you do not do this, the previous view will move to the bottom of the screen.
So, I made a Popup without Modal. Actually, this is a route, you can close this route in Android by pressing the back button.
What I want to know is how to config the duration of Navigator’s animation when push or pop a route?
@dragonwong Your solution is a great place to start. However I applied it a little bit differently:
This was so I just need to pass isPreViewStatic somewhere in the route object to trigger it.
One thing I noticed with this is when unmounting the component that I had this on, caused a re-render of the previous component causing the screen to flicker (more visible with transparent components)
In order to prevent that rerender I made the following change as well:
Thanks @dragonwong @samzanemesis for the contribution
@dragonwong Hello, I have modified your solution a bit to be simpler if you just want to hard encapsulate a certain transition to not hide the parent component, this can be useful for more people