hide android nav bar when reading

stumpapp · Mar 2, 2025 · 509629e · 509629e
1 parent d414f81
commit 509629e
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 10 deletions.
diff --git a/apps/expo/app.json b/apps/expo/app.json
@@ -29,7 +29,10 @@
 				"monochromeImage": "./assets/images/android-monochrome.png",
 				"backgroundColor": "#ffffff"
 			},
-			"package": "com.stumpapp.stump"
+			"package": "com.stumpapp.stump",
+			"androidNavigationBar": {
+				"visible": "immersive"
+			}
 		},
 		"web": {
 			"bundler": "metro",

diff --git a/apps/expo/app/opds/[id]/publication/read.tsx b/apps/expo/app/opds/[id]/publication/read.tsx
@@ -1,4 +1,5 @@
 import { useKeepAwake } from 'expo-keep-awake'
+import * as NavigationBar from 'expo-navigation-bar'
 import { useEffect, useMemo, useState } from 'react'
 
 import { ImageBasedReader } from '~/components/book/reader'
@@ -13,7 +14,6 @@ type ImageDimension = {
 	ratio: number
 }
 
-// TODO: refactor to use imagebasedreader when able
 export default function Screen() {
 	useKeepAwake()
 	const {
@@ -55,6 +55,13 @@ export default function Screen() {
 		}
 	}, [setShowControls])
 
+	useEffect(() => {
+		NavigationBar.setVisibilityAsync('hidden')
+		return () => {
+			NavigationBar.setVisibilityAsync('visible')
+		}
+	}, [])
+
 	return (
 		<ImageBasedReader
 			initialPage={currentPage}

diff --git a/apps/expo/app/server/[id]/_layout.tsx b/apps/expo/app/server/[id]/_layout.tsx
@@ -123,6 +123,8 @@ export default function Screen() {
 		[activeServer, router, saveServerToken],
 	)
 
+	// TODO: attempt reauth automatically when able
+
 	const onAuthError = useCallback(async () => {
 		// Get rid of the token
 		if (activeServer) {

diff --git a/apps/expo/app/server/[id]/books/[id]/read.tsx b/apps/expo/app/server/[id]/books/[id]/read.tsx
@@ -8,6 +8,7 @@ import {
 	useUpdateMediaProgress,
 } from '@stump/client'
 import { useKeepAwake } from 'expo-keep-awake'
+import * as NavigationBar from 'expo-navigation-bar'
 import { useLocalSearchParams } from 'expo-router'
 import { useCallback, useEffect } from 'react'
 
@@ -97,7 +98,9 @@ export default function Screen() {
 	 */
 	useEffect(
 		() => {
+			NavigationBar.setVisibilityAsync('hidden')
 			return () => {
+				NavigationBar.setVisibilityAsync('visible')
 				queryClient.refetchQueries({ queryKey: [sdk.media.keys.getByID, bookID], exact: false })
 				queryClient.refetchQueries({ queryKey: [sdk.media.keys.inProgress], exact: false })
 			}

diff --git a/apps/expo/components/book/reader/image/Footer.tsx b/apps/expo/components/book/reader/image/Footer.tsx
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import { Image } from 'expo-image'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { View } from 'react-native'
+import { Platform, View } from 'react-native'
 import { FlatList, Pressable } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -22,6 +22,9 @@ dayjs.extend(duration)
 const HEIGHT_MODIFIER = 2 / 3
 const WIDTH_MODIFIER = 2 / 3
 
+// TODO: account for image ratio when rendering in gallery
+// TODO: double spread when double spread is enabled and gallery is visible
+
 export default function Footer() {
 	const { sdk } = useSDK()
 	const { isTablet, height, width } = useDisplay()
@@ -356,7 +359,7 @@ export default function Footer() {
 				/>
 			)}
 
-			<View className="gap-2 px-1">
+			<View className={cn('gap-2 px-1', { 'pb-1': Platform.OS === 'android' })}>
 				{footerControls === 'images' && (
 					<Progress
 						className="h-1 bg-[#898d94]"

diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -46,7 +46,7 @@
 		"expo-image": "~2.0.4",
 		"expo-keep-awake": "~14.0.3",
 		"expo-linking": "~7.0.5",
-		"expo-navigation-bar": "~4.0.7",
+		"expo-navigation-bar": "~4.0.8",
 		"expo-router": "~4.0.16",
 		"expo-secure-store": "~14.0.1",
 		"expo-splash-screen": "~0.29.20",

diff --git a/yarn.lock b/yarn.lock
@@ -4755,6 +4755,11 @@
   resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.76.6.tgz#c2688aee5a824ad5331bb2b01791b024cd6643ea"
   integrity sha512-1n4udXH2Cla31iA/8eLRdhFHpYUYK1NKWCn4m1Sr9L4SarWKAYuRFliK1fcLvPPALCFoFlWvn8I0ekdUOHMzDQ==
 
+"@react-native/normalize-colors@0.76.7":
+  version "0.76.7"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.76.7.tgz#dbf0a44e1a9a9ccae4dbb124b389eeedbd33976c"
+  integrity sha512-ST1xxBuYVIXPdD81dR6+tzIgso7m3pa9+6rOBXTh5Xm7KEEFik7tnQX+GydXYMp3wr1gagJjragdXkPnxK6WNg==
+
 "@react-native/normalize-colors@^0.74.1":
   version "0.74.88"
   resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.74.88.tgz#46f4c7270c8e6853281d7dd966e0eb362068e41a"
@@ -11881,12 +11886,12 @@ expo-modules-core@2.1.4:
   dependencies:
     invariant "^2.2.4"
 
-expo-navigation-bar@~4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/expo-navigation-bar/-/expo-navigation-bar-4.0.7.tgz#d7640b223ed9dec899d46c799a332ec7ec2f928d"
-  integrity sha512-0dU6nU4XzLBFfkX7KTeYj6qX/3W/peYV9LjKymBsRPY0/uVgEcgFgS+omQAZE6DVD4Duy3GcT+91ozCUmvEEdA==
+expo-navigation-bar@~4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/expo-navigation-bar/-/expo-navigation-bar-4.0.8.tgz#69e09259f1ef7ac0b3bd79d98488358ab339173e"
+  integrity sha512-rmQkCCwfYeR29GTPwoNuN7eWE8bYCW5UGJ/5CnZQxIaiBmOeepoDXu50AzEM5ZFPMK6J12nvyu1yj0ujbLUpsQ==
   dependencies:
-    "@react-native/normalize-colors" "0.76.6"
+    "@react-native/normalize-colors" "0.76.7"
     debug "^4.3.2"
 
 expo-router@~4.0.16: