Feature: Hiding Nav Bar

[BilalHadid]

Version

6.4.3

What platforms are you having the problem on?

Android

System Version

Android

On what device are you experiencing the issue?

Real device, Simulator

Architecture

Old architecture

What happened?

When the full-screen view is activated, the default controls are shown, and the mobile bottom navigation bar remains visible, even in full-screen mode. To address this issue, consider upgrading the FullScreenPlayerView found under com => brentvatne => exoplayer.

Code Implementation
To enable immersive mode and hide the navigation bar, override the onAttachedToWindow method:

override fun onAttachedToWindow() {
super.onAttachedToWindow()
// Enable immersive mode to hide the navigation bar
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
or View.SYSTEM_UI_FLAG_FULLSCREEN
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
)

if (reactExoplayerView.preventsDisplaySleepDuringVideoPlayback) {
    mKeepScreenOnHandler.post(mKeepScreenOnUpdater)
}

}

Resetting UI Visibility
To reset the UI visibility to default, override the onDetachedFromWindow method:

override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
// Reset UI visibility to default
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
)
}

Reproduction

repository link

Reproduction

Step to reproduce this bug are: When the full-screen view is activated

[seyedmostafahasani]

@BilalHadid I don’t think this issue is a bug. Also, I think it’s better to keep the navigation bar visible so users can access functionalities like the back button, minimize, and other features available through the navigation bar.
WDYT? @freeboub @KrzysztofMoch

[freeboub]

This is a design choice... RNV should give the flexibility to users (i mean the app) to decide!
So you are both right :)

[seyedmostafahasani]

@freeboub
We can remove the bug label from this issue. I can add a new prop to handle it. What is your opinion?

[BilalHadid]

@seyedmostafahasani @freeboub Thanks, everyone! Could you please check one more thing? When we set fullScreen={true}, the default controls should be hidden. Even though I used the controls prop and set it to false, the default controls are still appearing. Could you look into this?

[seyedmostafahasani]

@BilalHadid, you cannot show custom controllers in full-screen mode. You can only display them in normal mode because the controls for full-screen mode are handled on the native side.

I have a suggestion for implementing a custom controller layout in full-screen mode. Instead of using the setFullScreen or other methods when the user presses the full-screen button, you can handle full-screen on the JS side. Specifically, you can create a new screen, and upon pressing the full-screen button, you can navigate to this new screen. This way, you can have your custom controller in full-screen mode.

[JerakRus]

I noticed that if you use fullscreen={true} on Android, the status bar becomes black and does not return to its original color after closing the video. This looks like a mistake

[seyedmostafahasani]

I noticed that if you use fullscreen={true} on Android, the status bar becomes black and does not return to its original color after closing the video. This looks like a mistake

It will be fixed in this PR(3914).