diff --git a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx index 77b2e3ff..327d11b5 100644 --- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx +++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx @@ -45,7 +45,6 @@ import { import { FlashList } from "@shopify/flash-list"; import { Loader } from "@/components/Loader"; import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { orientationAtom } from "@/utils/atoms/orientation"; const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter); @@ -64,7 +63,9 @@ const Page = () => { const [sortBy, setSortBy] = useAtom(sortByAtom); const [sortOrder, setSortOrder] = useAtom(sortOrderAtom); - const [orientation, setOrientation] = useAtom(orientationAtom); + const [orientation, setOrientation] = useState( + ScreenOrientation.Orientation.PORTRAIT_UP + ); const getNumberOfColumns = useCallback(() => { if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3; @@ -72,7 +73,7 @@ const Page = () => { if (screenWidth < 960) return 6; if (screenWidth < 1280) return 7; return 6; - }, [screenWidth, orientation]); + }, [screenWidth]); useLayoutEffect(() => { setSortBy([ @@ -89,6 +90,22 @@ const Page = () => { ]); }, []); + useEffect(() => { + const subscription = ScreenOrientation.addOrientationChangeListener( + (event) => { + setOrientation(event.orientationInfo.orientation); + } + ); + + ScreenOrientation.getOrientationAsync().then((initialOrientation) => { + setOrientation(initialOrientation); + }); + + return () => { + ScreenOrientation.removeOrientationChangeListener(subscription); + }; + }, []); + const { data: library, isLoading: isLibraryLoading } = useQuery({ queryKey: ["library", libraryId], queryFn: async () => { @@ -400,7 +417,6 @@ const Page = () => { contentInsetAdjustmentBehavior="automatic" data={flatData} renderItem={renderItem} - extraData={orientation} keyExtractor={keyExtractor} estimatedItemSize={244} numColumns={getNumberOfColumns()} diff --git a/app/_layout.tsx b/app/_layout.tsx index 8f852130..db1a105e 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -13,12 +13,11 @@ import { Stack, useRouter } from "expo-router"; import * as ScreenOrientation from "expo-screen-orientation"; import * as SplashScreen from "expo-splash-screen"; import { StatusBar } from "expo-status-bar"; -import { Provider as JotaiProvider, useAtom } from "jotai"; +import { Provider as JotaiProvider } from "jotai"; import { useEffect, useRef } from "react"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import "react-native-reanimated"; import * as Linking from "expo-linking"; -import { orientationAtom } from "@/utils/atoms/orientation"; SplashScreen.preventAutoHideAsync(); @@ -46,7 +45,6 @@ export default function RootLayout() { function Layout() { const [settings, updateSettings] = useSettings(); - const [orientation, setOrientation] = useAtom(orientationAtom); useKeepAwake(); @@ -73,24 +71,8 @@ function Layout() { ); }, [settings]); - useEffect(() => { - const subscription = ScreenOrientation.addOrientationChangeListener( - (event) => { - console.log(event.orientationInfo.orientation); - setOrientation(event.orientationInfo.orientation); - } - ); - - ScreenOrientation.getOrientationAsync().then((initialOrientation) => { - setOrientation(initialOrientation); - }); - - return () => { - ScreenOrientation.removeOrientationChangeListener(subscription); - }; - }, []); - const url = Linking.useURL(); + const router = useRouter(); if (url) { const { hostname, path, queryParams } = Linking.parse(url); diff --git a/utils/atoms/orientation.ts b/utils/atoms/orientation.ts deleted file mode 100644 index 19c40dad..00000000 --- a/utils/atoms/orientation.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as ScreenOrientation from "expo-screen-orientation"; -import { Orientation } from "expo-screen-orientation"; -import { atom } from "jotai"; - -export const orientationAtom = atom( - ScreenOrientation.OrientationLock.PORTRAIT_UP -);