Reapply "fix: #104 #103 #102"

This reverts commit 6c1db4bbb9.

fix #104 fix #102 fix #103

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -45,6 +45,7 @@ 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);
 
@@ -63,9 +64,7 @@ const Page = () => {
   const [sortBy, setSortBy] = useAtom(sortByAtom);
   const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
 
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.Orientation.PORTRAIT_UP
-  );
+  const [orientation, setOrientation] = useAtom(orientationAtom);
 
   const getNumberOfColumns = useCallback(() => {
     if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
@@ -73,7 +72,7 @@ const Page = () => {
     if (screenWidth < 960) return 6;
     if (screenWidth < 1280) return 7;
     return 6;
-  }, [screenWidth]);
+  }, [screenWidth, orientation]);
 
   useLayoutEffect(() => {
     setSortBy([
@@ -90,22 +89,6 @@ 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 () => {
@@ -417,6 +400,7 @@ const Page = () => {
       contentInsetAdjustmentBehavior="automatic"
       data={flatData}
       renderItem={renderItem}
+      extraData={orientation}
       keyExtractor={keyExtractor}
       estimatedItemSize={244}
       numColumns={getNumberOfColumns()}