StatusBar hidden with drawBehind causes content to jump

[mrousavy]

🐛 Bug Report

Screen A has:

statusBar: {
  visible: true,
  drawBehind: true,
}

Screen B has:

statusBar: {
  visible: false,
  drawBehind: true,
}

This works fine on iOS but causes the content to jump on some Android devices.

Note: I say some because this issue only affects Android devices where the StatusBar is larger than 24 pixels. (e.g. phones with notches, ..)

bugreport.mp4

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Create Screen A and B from above
2. Navigate from Screen A to Screen B using showModal

Expected behavior

I expect the statusBar visible: false prop to not affect the drawBehind property, aka the content should not jump

(Write what you thought would happen.)

Actual Behavior

The content jumps. See demo video

Your Environment

• React Native Navigation version: 7.8.4-snapshot.1439
• React Native version: 0.64.0-rc.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): All Android phones with StatusBar height > 24

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale]

The issue has been closed for inactivity.

[mrousavy]

bad bot

[mrousavy]

@swabbass did you find some time to investigate this yet?

[swabbass]

ome time to investigate

@mrousavy can you check RNN master and give us feedback on this issue?

[guyca]

RNN doesn't calculate StatusBar size correctly. It's pretty much hardcoded to 24/25 dp. We should get rid of the current mechanism and infer insets from WindowInsets. Perhaps we can use chrisbanes/insetter, it should cover all of our use cases.