remove navigation bars when in fullscreen

apps/expo/package.json

@@ -30,6 +30,7 @@
     "expo-build-properties": "~0.11.1",
     "expo-constants": "~15.4.5",
     "expo-linking": "~6.2.2",
+    "expo-navigation-bar": "^2.8.1",
     "expo-router": "~3.4.6",
     "expo-screen-orientation": "~6.4.1",
     "expo-splash-screen": "~0.26.4",

apps/expo/src/app/videoPlayer.tsx

@@ -2,7 +2,9 @@ import type { AVPlaybackSource } from "expo-av";
 import React, { useEffect, useState } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import { ResizeMode, Video } from "expo-av";
+import * as NavigationBar from "expo-navigation-bar";
 import { useLocalSearchParams, useRouter } from "expo-router";
+import * as StatusBar from "expo-status-bar";
 
 import {
   findHighestQuality,
@@ -90,6 +92,8 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
         return stream;
       };
 
+      StatusBar.setStatusBarHidden(true);
+      await NavigationBar.setVisibilityAsync("hidden");
       setIsLoading(true);
       const stream = await fetchVideo();
 
@@ -133,6 +137,8 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
 
     return () => {
       void dismissFullscreenPlayer();
+      StatusBar.setStatusBarHidden(false);
+      void NavigationBar.setVisibilityAsync("visible");
     };
   }, [data, dismissFullscreenPlayer, presentFullscreenPlayer, router]);
 

pnpm-lock.yaml

@@ -67,6 +67,9 @@ importers:
       expo-linking:
         specifier: ~6.2.2
         version: 6.2.2(expo@50.0.5)
+      expo-navigation-bar:
+        specifier: ^2.8.1
+        version: 2.8.1(expo@50.0.5)
       expo-router:
         specifier: ~3.4.6
         version: 3.4.6(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0)
@@ -5590,6 +5593,18 @@ packages:
       invariant: 2.2.4
     dev: false
 
+  /expo-navigation-bar@2.8.1(expo@50.0.5):
+    resolution: {integrity: sha512-aT5G+7SUsXDVPsRwp8fF940ycka1ABb4g3QKvTZN3YP6kMWvsiYEmRqMIJVy0zUr/i6bxBG1ZergkXimWrFt3w==}
+    peerDependencies:
+      expo: '*'
+    dependencies:
+      '@react-native/normalize-color': 2.1.0
+      debug: 4.3.4
+      expo: 50.0.5(@babel/core@7.23.9)(@react-native/babel-preset@0.73.20)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /expo-router@3.4.6(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0):
     resolution: {integrity: sha512-yxl0QE4KAqLmLyH8AxWsGSV3M34jsAE8X75cOB2oaK0+Pu9VHSUf6w3iRi93IiJ0rOUXm8jKrjhfhZOrrNh7EA==}
     peerDependencies: