(React Native) In bottom half modal, transparent background also sliding along with modal animationType='slide'

Question

I implemented a bottom half modal view in react native, which is sliding in from the bottom . I set the background of the modal view to transparent so the previous view is still visible, but the modal view is in focus. This is working fine and once it is open it also looks how I want it to look. My problem is, that the transparent background is also sliding in from the background and this does not look like a native implementation at all. What I want to achieve is, that the transparent background just appears while the modal view slides in from the bottom. Any idea on how to solve this?

Answer 1

To achieve a more native look, separate the animation of the background and the modal content. Use Animated from React Native:
• Animate the background using opacity (fade in quickly).
• Animate the modal using translateY (slide in from the bottom).

Make sure the background doesn’t slide in with the modal. Render the transparent background as a full-screen View with position: 'absolute', and animate only its opacity. This way, the background will instantly appear (or fade in) while the modal itself slides up, resulting in a smoother and more natural feel.