add react freeze

components/Home/component.tsx

@@ -7,10 +7,10 @@ import RecentlyPlayed from "./helpers/recently-played";
 import { useHomeContext } from "./provider";
 import { H3 } from "../Global/helpers/text";
 import Client from "../../api/client";
-import { usePlayerContext } from "../../player/provider";
-import { useCallback, useEffect } from "react";
+import { useCallback, useState } from "react";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useFocusEffect } from "@react-navigation/native";
+import { Freeze } from "react-freeze";
 
 export function ProvidedHome({ 
     navigation 
@@ -18,20 +18,25 @@ export function ProvidedHome({
     navigation: NativeStackNavigationProp<StackParamList>
 }): React.JSX.Element {
 
+    const [freeze, setFreeze] = useState<boolean>(false);
+
     const { refreshing: refetching, onRefresh } = useHomeContext()
 
     useFocusEffect(
         useCallback(() => {
 
-            console.debug("Mounted Queue");
+            console.debug("Mounted home");
+            setFreeze(false)
 
             return () => {
-                console.debug("Queue unmounted");
+                console.debug("Home unmounted");
+                setFreeze(true);
             }
         }, [])
     )
 
     return (
+        <Freeze freeze={freeze}>
             <ScrollView 
                 contentInsetAdjustmentBehavior="automatic"
                 refreshControl={
@@ -60,5 +65,6 @@ export function ProvidedHome({
                     <Playlists navigation={navigation}/>
                 </YStack>
             </ScrollView>
+        </Freeze>
     );
 }

index.js

@@ -5,8 +5,11 @@ import {name as appName} from './app.json';
 import { PlaybackService } from './player/service'
 import TrackPlayer from 'react-native-track-player';
 import Client from './api/client';
+import { enableFreeze } from "react-native-screens";
 
 Client.instance;
+enableFreeze(true);
+
 AppRegistry.registerComponent(appName, () => App);
 AppRegistry.registerComponent('RNCarPlayScene', () => App)
 TrackPlayer.registerPlaybackService(() => PlaybackService);

package-lock.json

@@ -27,6 +27,7 @@
         "invert-color": "^2.0.0",
         "lodash": "^4.17.21",
         "react": "18.3.1",
+        "react-freeze": "^1.0.4",
         "react-native": "0.77.0",
         "react-native-background-actions": "^4.0.1",
         "react-native-blurhash": "^2.1.0",

package.json

@@ -32,9 +32,11 @@
     "@tanstack/react-query-persist-client": "^5.66.0",
     "axios": "^1.7.9",
     "burnt": "^0.12.2",
+    "expo": "^52.0.0",
     "invert-color": "^2.0.0",
     "lodash": "^4.17.21",
     "react": "18.3.1",
+    "react-freeze": "^1.0.4",
     "react-native": "0.77.0",
     "react-native-background-actions": "^4.0.1",
     "react-native-blurhash": "^2.1.0",
@@ -54,8 +56,7 @@
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.3",
     "react-native-vector-icons": "^10.2.0",
-    "tamagui": "^1.124.17",
-    "expo": "^52.0.0"
+    "tamagui": "^1.124.17"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",