Tweak rendering of top headers so they always appear even during load (#4982)

Co-authored-by: Eric Bailey <git@esb.lol>

src/alf/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dimensions} from 'react-native'
+import {useMediaQuery} from 'react-responsive'
 
 import {createThemes, defaultTheme} from '#/alf/themes'
 import {Theme, ThemeName} from '#/alf/types'
@@ -12,52 +12,15 @@ export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
 
-type BreakpointName = keyof typeof breakpoints
-
-/*
- * Breakpoints
- */
-const breakpoints: {
-  [key: string]: number
-} = {
-  gtPhone: 500,
-  gtMobile: 800,
-  gtTablet: 1300,
-}
-function getActiveBreakpoints({width}: {width: number}) {
-  const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(
-    breakpoint => width >= breakpoints[breakpoint],
-  )
-
-  return {
-    active: active[active.length - 1],
-    gtPhone: active.includes('gtPhone'),
-    gtMobile: active.includes('gtMobile'),
-    gtTablet: active.includes('gtTablet'),
-  }
-}
-
 /*
  * Context
  */
 export const Context = React.createContext<{
   themeName: ThemeName
   theme: Theme
-  breakpoints: {
-    active: BreakpointName | undefined
-    gtPhone: boolean
-    gtMobile: boolean
-    gtTablet: boolean
-  }
 }>({
   themeName: 'light',
   theme: defaultTheme,
-  breakpoints: {
-    active: undefined,
-    gtPhone: false,
-    gtMobile: false,
-    gtTablet: false,
-  },
 })
 
 export function ThemeProvider({
@@ -74,18 +37,6 @@ export function ThemeProvider({
     })
   }, [])
   const theme = themes[themeName]
-  const [breakpoints, setBreakpoints] = React.useState(() =>
-    getActiveBreakpoints({width: Dimensions.get('window').width}),
-  )
-
-  React.useEffect(() => {
-    const listener = Dimensions.addEventListener('change', ({window}) => {
-      const bp = getActiveBreakpoints({width: window.width})
-      if (bp.active !== breakpoints.active) setBreakpoints(bp)
-    })
-
-    return listener.remove
-  }, [breakpoints, setBreakpoints])
 
   return (
     <Context.Provider
@@ -93,9 +44,8 @@ export function ThemeProvider({
         () => ({
           themeName: themeName,
           theme: theme,
-          breakpoints,
         }),
-        [theme, themeName, breakpoints],
+        [theme, themeName],
       )}>
       {children}
     </Context.Provider>
@@ -107,5 +57,12 @@ export function useTheme() {
 }
 
 export function useBreakpoints() {
-  return React.useContext(Context).breakpoints
+  const gtPhone = useMediaQuery({minWidth: 500})
+  const gtMobile = useMediaQuery({minWidth: 800})
+  const gtTablet = useMediaQuery({minWidth: 1300})
+  return {
+    gtPhone,
+    gtMobile,
+    gtTablet,
+  }
 }