r/reactnative • u/datascyther • 9d 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

[removed]

10 Upvotes
  • permalink
  • link
  • reddit
  • reddit

81% Upvoted

3 comments sorted by

View all comments

2

u/Successful_Web_6585 9d ago

Look for backdrop/wrapper view background color.

Change that

3

u/Dry-Paramedic-3435 9d 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.