[BUG]: White spaces appear at the top and bottom of the screen after clicking the full-screen button in the default controls on Android

[ng-ha]

Version

6.2.0

What platforms are you having the problem on?

Android

System Version

Android 13.0 API 33

On what device are you experiencing the issue?

Real device, Simulator

Architecture

Old architecture

What happened?

White spaces appear at the top and bottom of the screen after clicking the full-screen button in the video controls on Android, then exit the full-screen mode.

https://github.com/TheWidlarzGroup/react-native-video/assets/115610452/e748a998-0998-49c6-9d65-c0faf1432d5a

Reproduction

No response

Reproduction

Step to reproduce this bug are: Click button fullscreen then exit fullscreen mode,

<Video source={{ uri: 'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_5mb.mp4', }} resizeMode="contain" style={{flex: 1}} controls muted />

[ng-ha]

@freeboub Can you, please, take a look at this issue ?

[seyedmostafahasani]

@ng-ha, can you use width and height instead of flex? For example: style={{width: SCREEN_WIDTH, height: 300}}

[ivaniuk7531]

I have the same issue. I use device width and height for the video component and get the same behavior. I use the latest version of react-native-video package.

[freeboub]

I reviewed the video provided a second time and it doesn't seem to be react native video issue as there is another element between the video and the white space.

Can you triple check my comment please ? Would be interesting to get a sample app to reproduce the issue also

[ng-ha]

It's definitely a bug in the package. After entering and exiting full-screen mode using the default controls, not only the current screen but the entire app is wrapped by top and bottom padding. It seems like there's something wrong with the full-screen mode.

My solution is to use custom controls instead of the default ones, if anyone is interested.

[LiuBergaria]

It seems the ReactExoplayerView is setting decorFitsSystemWindows to false on fullscreen entering and then to true on exiting, however the original value may not be always true. I've created this patch to store the original value and reset it on fullscreen exit

diff --git a/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
index e0a14a7..1166992 100644
--- a/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
+++ b/node_modules/react-native-video/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
@@ -201,6 +201,7 @@ public class ReactExoplayerView extends FrameLayout implements
     private long resumePosition;
     private boolean loadVideoStarted;
     private boolean isFullscreen;
+    private boolean originalFitsSystemWindows;
     private boolean isInBackground;
     private boolean isPaused;
     private boolean isBuffering;
@@ -2215,6 +2216,7 @@ public class ReactExoplayerView extends FrameLayout implements
                 fullScreenPlayerView.show();
             }
             UiThreadUtil.runOnUiThread(() -> {
+                originalFitsSystemWindows = window.getDecorView().getFitsSystemWindows();
                 WindowCompat.setDecorFitsSystemWindows(window, false);
                 controller.hide(WindowInsetsCompat.Type.systemBars());
                 controller.setSystemBarsBehavior(WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
@@ -2228,7 +2230,7 @@ public class ReactExoplayerView extends FrameLayout implements
                 setControls(controls);
             }
             UiThreadUtil.runOnUiThread(() -> {
-                WindowCompat.setDecorFitsSystemWindows(window, true);
+                WindowCompat.setDecorFitsSystemWindows(window, originalFitsSystemWindows);
                 controller.show(WindowInsetsCompat.Type.systemBars());
                 eventEmitter.fullscreenDidDismiss();
             });

Does it makes sense? It fixed the problem on my side!

[ng-ha]

@LiuBergaria It works! It fixed on my side too. Thank you for the patch!

@freeboub please, take a look at this for next release.