clean up into hook

1 files changed, 22 insertions, 17 deletions

diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx
index 76e709180..f77b55151 100644
--- a/src/lib/ThemeContext.tsx
+++ b/src/lib/ThemeContext.tsx
@@ -3,7 +3,7 @@ import React, {ReactNode, createContext, useContext} from 'react'
 import {
   AppState,
   TextStyle,
-  useColorScheme,
+  useColorScheme as useColorScheme_BUGGY,
   ViewStyle,
   ColorSchemeName,
 } from 'react-native'
@@ -93,30 +93,35 @@ export const ThemeContext = createContext<Theme>(defaultTheme)
 
 export const useTheme = () => useContext(ThemeContext)
 
-const getTheme = (theme: ColorSchemeName) =>
-  theme === 'dark' ? darkTheme : defaultTheme
+function getTheme(theme: ColorSchemeName) {
+  return theme === 'dark' ? darkTheme : defaultTheme
+}
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  theme,
-  children,
-}) => {
-  const colorSchemeFromRN = useColorScheme()
-  const [statefulColorScheme, setStatefulColorScheme] =
-    React.useState<ColorSchemeName>(colorSchemeFromRN)
-  const colorScheme = isWeb ? colorSchemeFromRN : statefulColorScheme
-  const themeValue = getTheme(theme === 'system' ? colorScheme : theme)
+function useColorScheme_FIXED() {
+  const colorScheme = useColorScheme_BUGGY()
+  const [currentColorScheme, setCurrentColorScheme] =
+    React.useState<ColorSchemeName>(colorScheme)
 
   React.useEffect(() => {
-    if (!isWeb) return
+    // we don't need to be updating state on web
+    if (isWeb) return
     const subscription = AppState.addEventListener('change', state => {
       const isActive = state === 'active'
-
       if (!isActive) return
-
-      setStatefulColorScheme(colorSchemeFromRN)
+      setCurrentColorScheme(colorScheme)
     })
     return () => subscription.remove()
-  }, [colorSchemeFromRN])
+  }, [colorScheme])
+
+  return isWeb ? colorScheme : currentColorScheme
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  theme,
+  children,
+}) => {
+  const colorScheme = useColorScheme_FIXED()
+  const themeValue = getTheme(theme === 'system' ? colorScheme : theme)
 
   return (
     <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>