Merge pull request #6453 from BlueWallet/layoutfix

Update useIsLargeScreen.ts
This commit is contained in:
GLaDOS 2024-04-24 01:17:49 +00:00 committed by GitHub
commit 0bf4c3fc23
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,6 +1,7 @@
import { useState, useEffect, useMemo } from 'react';
import { Dimensions } from 'react-native';
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 = () => {
@ -27,12 +28,11 @@ export const useIsLargeScreen = () => {
// 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 for now
const isRunningOnTablet = isTablet();
const isRunningOnTabletOrDesktop = isTablet() || isDesktop;
const halfScreenWidth = windowWidth >= screenWidth / 2;
const condition = isRunningOnTablet && halfScreenWidth;
const condition = isRunningOnTabletOrDesktop && halfScreenWidth;
console.log(
`Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet or desktop: ${isRunningOnTablet}, Is large screen: ${condition}`,
`Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isRunningOnTabletOrDesktop}, Is large screen: ${condition}`,
);
return condition;
}, [windowWidth, screenWidth]);