From 01870883d6062c43d275cad0d5d2012cf643df93 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 14 Sep 2023 18:15:17 -0500 Subject: clean up into hook --- src/lib/ThemeContext.tsx | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) (limited to 'src/lib/ThemeContext.tsx') 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(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 = ({ - theme, - children, -}) => { - const colorSchemeFromRN = useColorScheme() - const [statefulColorScheme, setStatefulColorScheme] = - React.useState(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(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 = ({ + theme, + children, +}) => { + const colorScheme = useColorScheme_FIXED() + const themeValue = getTheme(theme === 'system' ? colorScheme : theme) return ( {children} -- cgit 1.4.1