REF: useIsLargeSceen

Navigation.tsx

@@ -88,6 +88,7 @@ import LdkViewLogs from './screen/wallets/ldkViewLogs';
 import PaymentCode from './screen/wallets/paymentCode';
 import PaymentCodesList from './screen/wallets/paymentCodesList';
 import { BlueStorageContext } from './blue_modules/storage-context';
+import { useIsLargeScreen } from './hooks/useIsLargeScreen';
 
 const WalletsStack = createNativeStackNavigator();
 
@@ -407,10 +408,7 @@ const DrawerListContent = (props: any) => {
 
 const Drawer = createDrawerNavigator();
 const DrawerRoot = () => {
-  const dimensions = useWindowDimensions();
-  const isLargeScreen = useMemo(() => {
-    return Platform.OS === 'android' ? isTablet() : (dimensions.width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
-  }, [dimensions.width]);
+  const isLargeScreen = useIsLargeScreen();
 
   const drawerStyle: DrawerNavigationOptions = useMemo(
     () => ({

components/WalletsCarousel.js

@@ -10,7 +10,6 @@ import {
   TouchableOpacity,
   useWindowDimensions,
   View,
-  Dimensions,
   FlatList,
   Pressable,
 } from 'react-native';
@@ -21,9 +20,9 @@ import { LightningCustodianWallet, LightningLdkWallet, MultisigHDWallet } from '
 import WalletGradient from '../class/wallet-gradient';
 import { BlueSpacing10 } from '../BlueComponents';
 import { BlueStorageContext, WalletTransactionsStatus } from '../blue_modules/storage-context';
-import { isTablet, isDesktop } from '../blue_modules/environment';
 import { useTheme } from './themes';
 import { BlurredBalanceView } from './BlurredBalanceView';
+import { useIsLargeScreen } from '../hooks/useIsLargeScreen';
 
 const nStyles = StyleSheet.create({
   container: {
@@ -56,7 +55,7 @@ const NewWalletPanel = ({ onPress }) => {
   const { colors } = useTheme();
   const { width } = useWindowDimensions();
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
-  const isLargeScreen = Platform.OS === 'android' ? isTablet() : (width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
+  const isLargeScreen = useIsLargeScreen();
   const nStylesHooks = StyleSheet.create({
     container: isLargeScreen
       ? {
@@ -160,7 +159,7 @@ export const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelect
   const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
   const { width } = useWindowDimensions();
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
-  const isLargeScreen = Platform.OS === 'android' ? isTablet() : (width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
+  const isLargeScreen = useIsLargeScreen();
   const onPressedIn = () => {
     Animated.spring(scaleValue, { duration: 50, useNativeDriver: true, toValue: 0.9 }).start();
   };

helpers/getIsLargeScreen.ts

@@ -1,9 +0,0 @@
-import { Dimensions, Platform } from 'react-native';
-import { isTablet } from 'react-native-device-info';
-import { isDesktop } from '../blue_modules/environment';
-
-// Helper function to determine if the screen is large
-export const getIsLargeScreen = (): boolean => {
-  const width = Dimensions.get('screen').width;
-  return Platform.OS === 'android' ? isTablet() : (width >= width / 2 && isTablet()) || isDesktop;
-};

hooks/useIsLargeScreen.ts

@@ -0,0 +1,42 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Dimensions, Platform } from 'react-native';
+import DeviceInfo, { isTablet } from 'react-native-device-info';
+import { isDesktop } from '../blue_modules/environment';
+
+// Custom hook to determine if the screen is large
+export const useIsLargeScreen = () => {
+  const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
+  const screenWidth = useMemo(() => Dimensions.get('screen').width, []);
+
+  useEffect(() => {
+    const updateScreenUsage = () => {
+      const newWindowWidth = Dimensions.get('window').width;
+      if (newWindowWidth !== windowWidth) {
+        console.log(`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(() => {
+    // we dont want to return true on phones. only on tablets and desktops
+    const isTabletOrDesktop = isTablet() || isDesktop;
+    const halfScreenWidth = windowWidth >= screenWidth / 2;
+    const condition = isTabletOrDesktop && halfScreenWidth;
+    console.log(
+      `Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet or desktop: ${isTabletOrDesktop}, Is large screen: ${condition}`,
+    );
+    return condition;
+  }, [windowWidth, screenWidth]);
+
+  return isLargeScreen;
+};

screen/wallets/WalletsList.tsx

@@ -34,7 +34,7 @@ import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import A from '../../blue_modules/analytics';
 import * as fs from '../../blue_modules/fs';
 import { TWallet, Transaction } from '../../class/wallets/types';
-import { getIsLargeScreen } from '../../helpers/getIsLargeScreen';
+import { useIsLargeScreen } from '../../hooks/useIsLargeScreen';
 
 const WalletsListSections = { CAROUSEL: 'CAROUSEL', TRANSACTIONS: 'TRANSACTIONS' };
 
@@ -47,7 +47,6 @@ enum ActionTypes {
   SET_LOADING = 'SET_LOADING',
   SET_WALLETS = 'SET_WALLETS',
   SET_CURRENT_INDEX = 'SET_CURRENT_INDEX',
-  SET_IS_LARGE_SCREEN = 'SET_IS_LARGE_SCREEN',
   SET_REFRESH_FUNCTION = 'SET_REFRESH_FUNCTION',
 }
 
@@ -66,23 +65,17 @@ interface SetCurrentIndexAction {
   payload: number;
 }
 
-interface SetIsLargeScreenAction {
-  type: ActionTypes.SET_IS_LARGE_SCREEN;
-  payload: boolean;
-}
-
 interface SetRefreshFunctionAction {
   type: ActionTypes.SET_REFRESH_FUNCTION;
   payload: () => void;
 }
 
-type WalletListAction = SetLoadingAction | SetWalletsAction | SetCurrentIndexAction | SetIsLargeScreenAction | SetRefreshFunctionAction;
+type WalletListAction = SetLoadingAction | SetWalletsAction | SetCurrentIndexAction | SetRefreshFunctionAction;
 
 interface WalletListState {
   isLoading: boolean;
   wallets: TWallet[];
   currentWalletIndex: number;
-  isLargeScreen: boolean;
   refreshFunction: () => void;
 }
 
@@ -90,7 +83,6 @@ const initialState = {
   isLoading: false,
   wallets: [],
   currentWalletIndex: 0,
-  isLargeScreen: getIsLargeScreen(), // Set initial state based on condition
   refreshFunction: () => {},
 };
 
@@ -102,8 +94,6 @@ function reducer(state: WalletListState, action: WalletListAction) {
       return { ...state, wallets: action.payload };
     case ActionTypes.SET_CURRENT_INDEX:
       return { ...state, currentWalletIndex: action.payload };
-    case ActionTypes.SET_IS_LARGE_SCREEN:
-      return { ...state, isLargeScreen: action.payload };
     case ActionTypes.SET_REFRESH_FUNCTION:
       return { ...state, refreshFunction: action.payload };
     default:
@@ -113,7 +103,8 @@ function reducer(state: WalletListState, action: WalletListAction) {
 
 const WalletsList: React.FC = () => {
   const [state, dispatch] = useReducer<React.Reducer<WalletListState, WalletListAction>>(reducer, initialState);
-  const { isLoading, isLargeScreen } = state;
+  const { isLoading } = state;
+  const isLargeScreen = useIsLargeScreen();
   const walletsCarousel = useRef<any>();
   const currentWalletIndex = useRef<number>(0);
   const {
@@ -437,13 +428,6 @@ const WalletsList: React.FC = () => {
     });
   };
 
-  const onLayout = (_e: any) => {
-    dispatch({
-      type: ActionTypes.SET_IS_LARGE_SCREEN,
-      payload: Platform.OS === 'android' ? isTablet() : (width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop,
-    });
-  };
-
   const onRefresh = () => {
     refreshTransactions(true, false);
   };
@@ -456,7 +440,7 @@ const WalletsList: React.FC = () => {
   ];
 
   return (
-    <View style={styles.root} onLayout={onLayout}>
+    <View style={styles.root}>
       <View style={[styles.walletsListWrapper, stylesHook.walletsListWrapper]}>
         <SectionList<any | string, SectionData>
           removeClippedSubviews