REF: Single source of truth for useIsLargeScreen

components/Context/LargeScreenProvider.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useState, useEffect, useMemo, ReactNode } from 'react';
+import { Dimensions } from 'react-native';
+import { isTablet } from 'react-native-device-info';
+import { isDesktop } from '../../blue_modules/environment';
+
+interface ILargeScreenContext {
+  isLargeScreen: boolean;
+}
+
+export const LargeScreenContext = createContext<ILargeScreenContext | undefined>(undefined);
+
+interface LargeScreenProviderProps {
+  children: ReactNode;
+}
+
+export const LargeScreenProvider: React.FC<LargeScreenProviderProps> = ({ children }) => {
+  const [windowWidth, setWindowWidth] = useState<number>(Dimensions.get('window').width);
+  const screenWidth: number = useMemo(() => Dimensions.get('screen').width, []);
+
+  useEffect(() => {
+    const updateScreenUsage = (): void => {
+      const newWindowWidth = Dimensions.get('window').width;
+      if (newWindowWidth !== windowWidth) {
+        setWindowWidth(newWindowWidth);
+      }
+    };
+
+    const subscription = Dimensions.addEventListener('change', updateScreenUsage);
+    return () => subscription.remove();
+  }, [windowWidth]);
+
+  const isLargeScreen: boolean = useMemo(() => {
+    const isRunningOnTablet = isTablet();
+    const halfScreenWidth = windowWidth >= screenWidth / 2;
+    const condition = (isRunningOnTablet && halfScreenWidth) || isDesktop;
+    console.debug(
+      `LargeScreenProvider.isLargeScreen: width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet()}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
+    );
+    return condition;
+  }, [windowWidth, screenWidth]);
+
+  return <LargeScreenContext.Provider value={{ isLargeScreen }}>{children}</LargeScreenContext.Provider>;
+};

hooks/useIsLargeScreen.ts

@@ -1,41 +1,10 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useContext } from 'react';
-import { Dimensions } from 'react-native';
+import { LargeScreenContext } from '../components/Context/LargeScreenProvider';
-import { isTablet } from 'react-native-device-info';
-import { isDesktop } from '../blue_modules/environment';
 
-// Custom hook to determine if the screen is large
+export const useIsLargeScreen = (): boolean => {
-export const useIsLargeScreen = () => {
+  const context = useContext(LargeScreenContext);
-  const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
+  if (context === undefined) {
-  const screenWidth = useMemo(() => Dimensions.get('screen').width, []);
+    throw new Error('useIsLargeScreen must be used within a LargeScreenProvider');
-
+  }
-  useEffect(() => {
+  return context.isLargeScreen;
-    const updateScreenUsage = () => {
-      const newWindowWidth = Dimensions.get('window').width;
-      if (newWindowWidth !== windowWidth) {
-        console.debug(`Window width changed: ${newWindowWidth}`);
-        setWindowWidth(newWindowWidth);
-      }
-    };
-
-    // Add event listener for dimension changes
-    const subscription = Dimensions.addEventListener('change', updateScreenUsage);
-
-    // Cleanup function to remove the event listener
-    return () => {
-      subscription.remove();
-    };
-  }, [windowWidth]);
-
-  // Determine if the window width is at least half of the screen width
-  const isLargeScreen = useMemo(() => {
-    const isRunningOnTablet = isTablet();
-    const halfScreenWidth = windowWidth >= screenWidth / 2;
-    const condition = (isRunningOnTablet && halfScreenWidth) || isDesktop;
-    console.debug(
-      `Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet()}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
-    );
-    return condition;
-  }, [windowWidth, screenWidth]);
-
-  return isLargeScreen;
 };

index.tsx

@@ -8,6 +8,7 @@ import { BlueStorageProvider } from './blue_modules/storage-context';
 import A from './blue_modules/analytics';
 import { SettingsProvider } from './components/Context/SettingsContext';
 import { restoreSavedPreferredFiatCurrencyAndExchangeFromStorage } from './blue_modules/currency';
+import { LargeScreenProvider } from './components/Context/LargeScreenProvider';
 
 if (!Error.captureStackTrace) {
   // captureStackTrace is only available when debugging
@@ -21,11 +22,13 @@ const BlueAppComponent = () => {
   }, []);
 
   return (
-    <BlueStorageProvider>
+    <LargeScreenProvider>
-      <SettingsProvider>
+      <BlueStorageProvider>
-        <App />
+        <SettingsProvider>
-      </SettingsProvider>
+          <App />
-    </BlueStorageProvider>
+        </SettingsProvider>
+      </BlueStorageProvider>
+    </LargeScreenProvider>
   );
 };