From 61cb948f3dc97966f44c13c5a251e16fbd059bdc Mon Sep 17 00:00:00 2001 From: Jorrin Date: Mon, 12 Feb 2024 20:51:56 +0100 Subject: [PATCH] remove navigation bars when in fullscreen --- apps/expo/package.json | 1 + apps/expo/src/app/videoPlayer.tsx | 6 ++++++ pnpm-lock.yaml | 15 +++++++++++++++ 3 files changed, 22 insertions(+) diff --git a/apps/expo/package.json b/apps/expo/package.json index df8453a..9c420ca 100644 --- a/apps/expo/package.json +++ b/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", diff --git a/apps/expo/src/app/videoPlayer.tsx b/apps/expo/src/app/videoPlayer.tsx index 81b34c0..ad52d09 100644 --- a/apps/expo/src/app/videoPlayer.tsx +++ b/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 = ({ data }) => { return stream; }; + StatusBar.setStatusBarHidden(true); + await NavigationBar.setVisibilityAsync("hidden"); setIsLoading(true); const stream = await fetchVideo(); @@ -133,6 +137,8 @@ const VideoPlayer: React.FC = ({ data }) => { return () => { void dismissFullscreenPlayer(); + StatusBar.setStatusBarHidden(false); + void NavigationBar.setVisibilityAsync("visible"); }; }, [data, dismissFullscreenPlayer, presentFullscreenPlayer, router]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3bb8ff5..1986990 100644 --- a/pnpm-lock.yaml +++ b/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: