diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 9b6d7b995e..c8ca3d0391 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -23,8 +23,9 @@ function getActiveBreakpoints({width}: {width: number}) { ) return { - active, - current: active[active.length - 1], + active: active[active.length - 1], + gtMobile: active.includes('gtMobile'), + gtTablet: active.includes('gtTablet'), } } @@ -35,15 +36,17 @@ export const Context = React.createContext<{ themeName: themes.ThemeName styles: themes.Theme breakpoints: { - current: BreakpointName | undefined - active: BreakpointName[] + active: BreakpointName | undefined + gtMobile: boolean + gtTablet: boolean } }>({ themeName: 'light', styles: themes.light, breakpoints: { - current: undefined, - active: [], + active: undefined, + gtMobile: false, + gtTablet: false, }, }) @@ -59,7 +62,7 @@ export function ThemeProvider({ React.useEffect(() => { const listener = Dimensions.addEventListener('change', ({window}) => { const bp = getActiveBreakpoints({width: window.width}) - if (bp.current !== breakpoints.current) setBreakpoints(bp) + if (bp.active !== breakpoints.active) setBreakpoints(bp) }) return listener.remove diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx index e402ef3ba7..c5e50daf3e 100644 --- a/src/view/screens/DebugNew.tsx +++ b/src/view/screens/DebugNew.tsx @@ -26,6 +26,11 @@ function BreakpointDebugger() { return (

Breakpoint Debugger

+ + Current breakpoint: {!breakpoints.gtMobile && mobile} + {breakpoints.gtMobile && !breakpoints.gtTablet && tablet} + {breakpoints.gtTablet && desktop} +
+ +

Breakpoints

+
+