Update breakpoint handling

src/alf/index.tsx

@@ -23,8 +23,9 @@ function getActiveBreakpoints({width}: {width: number}) {
   )
 
   return {
-    active,
+    active: active[active.length - 1],
-    current: 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 | undefined
-    active: BreakpointName[]
+    gtMobile: boolean
+    gtTablet: boolean
   }
 }>({
   themeName: 'light',
   styles: themes.light,
   breakpoints: {
-    current: undefined,
+    active: undefined,
-    active: [],
+    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

src/view/screens/DebugNew.tsx

@@ -26,6 +26,11 @@ function BreakpointDebugger() {
   return (
     <View>
       <H3 style={[styles.padding.pb.m]}>Breakpoint Debugger</H3>
+      <Text style={[styles.padding.pb.m]}>
+        Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
+        {breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
+        {breakpoints.gtTablet && <Text>desktop</Text>}
+      </Text>
       <Text
         style={[
           styles.padding.pa.m,
@@ -257,6 +262,10 @@ export function DebugScreen() {
             </View>
           </View>
 
+          <View>
+            <H3 style={[styles.padding.pb.m, styles.font.bold]}>Breakpoints</H3>
+          </View>
+
           <Alf theme="light">
             <ThemedSection />
           </Alf>