Chore/rework fullscreen configuration (#4142)

* feat(android): handle navigation bar status in full-screen mode
* chore: update default value of prop
* chore(android): rework fullscreen configuration

---------

Co-authored-by: mostafahasani <seyedmostafahassani@gmail.com>

examples/basic/package.json

@@ -17,6 +17,7 @@
     "expo": "^51.0.31",
     "expo-asset": "~10.0.10",
     "expo-image": "^1.12.15",
+    "expo-navigation-bar": "~3.0.7",
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-windows": "0.74.19"

examples/basic/src/VideoPlayer.tsx

@@ -1,8 +1,8 @@
 'use strict';
 
-import React, {type FC, useCallback, useRef, useState} from 'react';
+import React, {type FC, useCallback, useRef, useState, useEffect} from 'react';
 
-import {Platform, TouchableOpacity, View} from 'react-native';
+import {Platform, TouchableOpacity, View, StatusBar} from 'react-native';
 
 import Video, {
   VideoRef,
@@ -36,6 +36,7 @@ import styles from './styles';
 import {type AdditionalSourceInfo} from './types';
 import {bufferConfig, srcList, textTracksSelectionBy} from './constants';
 import {Overlay, toast, VideoLoader} from './components';
+import * as NavigationBar from 'expo-navigation-bar';
 
 type Props = NonNullable<unknown>;
 
@@ -104,6 +105,10 @@ const VideoPlayer: FC<Props> = ({}) => {
     goToChannel((srcListId + srcList.length - 1) % srcList.length);
   }, [goToChannel, srcListId]);
 
+  useEffect(() => {
+    NavigationBar.setVisibilityAsync('visible');
+  }, []);
+
   const onAudioTracks = (data: OnAudioTracksData) => {
     const selectedTrack = data.audioTracks?.find((x: AudioTrack) => {
       return x.selected;
@@ -226,6 +231,8 @@ const VideoPlayer: FC<Props> = ({}) => {
 
   return (
     <View style={styles.container}>
+      <StatusBar animated={true} backgroundColor="black" hidden={false} />
+
       {(srcList[srcListId] as AdditionalSourceInfo)?.noView ? null : (
         <TouchableOpacity style={viewStyle}>
           <Video
@@ -276,6 +283,7 @@ const VideoPlayer: FC<Props> = ({}) => {
             bufferingStrategy={BufferingStrategyType.DEFAULT}
             debug={{enable: true, thread: true}}
             subtitleStyle={{subtitlesFollowVideo: true}}
+            controlsStyles={{hideNavigationBarOnFullScreenMode: true, hideNotificationBarOnFullScreenMode: true}}
           />
         </TouchableOpacity>
       )}

examples/basic/yarn.lock

@@ -4893,6 +4893,14 @@ expo-modules-core@1.12.23:
   dependencies:
     invariant "^2.2.4"
 
+expo-navigation-bar@~3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/expo-navigation-bar/-/expo-navigation-bar-3.0.7.tgz#1830a302a89fa5c26cb27ce4cf6ac6c1d22907ff"
+  integrity sha512-KCNHyZ58zoN4xdy7D1lUdJvveCYNVQHGSX4M6xO/SZypvI6GZbLzKSN6Lx4GDGEFxG6Kb+EAckZl48tSiNeGYQ==
+  dependencies:
+    "@react-native/normalize-colors" "0.74.85"
+    debug "^4.3.2"
+
 expo@^51.0.31:
   version "51.0.31"
   resolved "https://registry.yarnpkg.com/expo/-/expo-51.0.31.tgz#edd623e718705d88681406e72869076dfeb485ff"