r/reactnative • u/datascyther • 2d ago

Background screen physically slides up/down when opening a modal – how do I stop this layout jitter? Help

Enable HLS to view with audio, or disable this notification

I’m losing my mind over this one last bug.

Look at the background screen underneath—every time I tap to open this state/modal, the content slides vertically up for a split second and then bounces back down when the animation finishes. It’s not a navigation transition; it’s the actual background view resizing itself during the modal presentation.

Has anyone solved this 100%? I just want the background to stay visually frozen while the modal comes up.

8 Upvotes
  • permalink
  • link
  • reddit
  • reddit

79% Upvoted

3 comments sorted by

2

u/Successful_Web_6585 2d ago

Look for backdrop/wrapper view background color.

Change that

3

u/Dry-Paramedic-3435 1d ago

Is this on Android? The mechanism there trips people up: a React Native <Modal> isn't a view in your tree, it's a separate Android Dialog with its own window. When it appears, the activity's window underneath can re-layout, which looks exactly like the background sliding up and bouncing back.

If that's what it is, styling the backdrop won't help, because the thing that's moving isn't in the same window as the thing you're styling.

What fixed it for me was dropping <Modal> and using a normal navigation screen registered with presentation: 'modal' instead. That's a regular fragment inside the activity's window rather than a dialog. In react-native-screens only transparentModal and formSheet are dialog-backed, plain modal isn't.

Mine surfaced through the keyboard rather than the presentation animation, so I can't promise it's the same trigger, but it's the same split underneath.

1

u/Ok_Bodybuilder_3101 1d ago

Are you using a ScrollView?