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
+
+