From 8943708ff52d82c235e70c349a46f8ef522b230d Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Mon, 4 Nov 2024 21:35:26 +0000 Subject: [PATCH] fix: update versions and use native-edge-to-edge --- app.json | 3 +- app/(auth)/(tabs)/_layout.tsx | 100 +++++++++++------------ app/(auth)/play-music.tsx | 10 +-- app/(auth)/play-offline-video.tsx | 8 +- app/(auth)/play-video.tsx | 7 +- app/_layout.tsx | 5 +- bun.lockb | Bin 578862 -> 578847 bytes components/DownloadItem.tsx | 2 +- hooks/useAndroidNavigationBar.ts | 17 ---- hooks/useNavigationBarVisibility.ts | 27 ------ package.json | 4 +- plugins/withNativeStyles.js | 122 ---------------------------- 12 files changed, 64 insertions(+), 241 deletions(-) delete mode 100644 hooks/useAndroidNavigationBar.ts delete mode 100644 hooks/useNavigationBarVisibility.ts delete mode 100644 plugins/withNativeStyles.js diff --git a/app.json b/app.json index ee1e3abb..3da9786f 100644 --- a/app.json +++ b/app.json @@ -100,7 +100,8 @@ "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching." } ], - "./plugins/withNativeStyles.js" + ["react-native-edge-to-edge"], + ["react-native-bottom-tabs", { "theme": "material2" }] ], "experiments": { "typedRoutes": true diff --git a/app/(auth)/(tabs)/_layout.tsx b/app/(auth)/(tabs)/_layout.tsx index 49fe0752..9291fdea 100644 --- a/app/(auth)/(tabs)/_layout.tsx +++ b/app/(auth)/(tabs)/_layout.tsx @@ -1,4 +1,3 @@ -import * as NavigationBar from "expo-navigation-bar"; import React, { useEffect } from "react"; import { Platform, View } from "react-native"; @@ -19,6 +18,7 @@ import type { } from "@react-navigation/native"; import {} from "@expo/vector-icons/Ionicons"; import { Colors } from "@/constants/Colors"; +import { SystemBars } from "react-native-edge-to-edge"; export const NativeTabs = withLayoutContext< BottomTabNavigationOptions, @@ -28,58 +28,54 @@ export const NativeTabs = withLayoutContext< >(Navigator); export default function TabLayout() { - useEffect(() => { - if (Platform.OS === "android") { - NavigationBar.setBackgroundColorAsync("#121212"); - NavigationBar.setBorderColorAsync("#121212"); - } - }, []); - return ( - - - - require("@/assets/icons/house.fill.png") - : () => ({ sfSymbol: "house" }), + <> + + ); } diff --git a/app/(auth)/play-music.tsx b/app/(auth)/play-music.tsx index 4138ecc2..f49f9fee 100644 --- a/app/(auth)/play-music.tsx +++ b/app/(auth)/play-music.tsx @@ -1,7 +1,4 @@ -import { Text } from "@/components/common/Text"; -import AlbumCover from "@/components/posters/AlbumCover"; import { Controls } from "@/components/video-player/Controls"; -import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar"; import { useOrientation } from "@/hooks/useOrientation"; import { useOrientationSettings } from "@/hooks/useOrientationSettings"; import { useWebSocket } from "@/hooks/useWebsockets"; @@ -20,9 +17,9 @@ import * as Haptics from "expo-haptics"; import { Image } from "expo-image"; import { useFocusEffect } from "expo-router"; import { useAtomValue } from "jotai"; -import { debounce } from "lodash"; import React, { useCallback, useMemo, useRef, useState } from "react"; -import { Dimensions, Pressable, StatusBar, View } from "react-native"; +import { Dimensions, Pressable, View } from "react-native"; +import { SystemBars } from "react-native-edge-to-edge"; import { useSharedValue } from "react-native-reanimated"; import Video, { OnProgressData, VideoRef } from "react-native-video"; @@ -176,7 +173,6 @@ export default function page() { const { orientation } = useOrientation(); useOrientationSettings(); - useAndroidNavigationBar(); useWebSocket({ isPlaying: isPlaying, @@ -194,7 +190,7 @@ export default function page() { }} className="flex flex-col items-center justify-center" > -