forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #1451 from bluesky-social/eric/theme-switching-web
fix theme switching on web without refresh
authored by
Eric Bailey
and committed by
GitHub
84b7edd9
50f81166
+33
-21
+33
-21
src/lib/ThemeContext.tsx
+33
-21
src/lib/ThemeContext.tsx
···
1
+
import {isWeb} from 'platform/detection'
1
2
import React, {ReactNode, createContext, useContext} from 'react'
2
3
import {
3
4
AppState,
4
5
TextStyle,
5
-
useColorScheme,
6
+
useColorScheme as useColorScheme_BUGGY,
6
7
ViewStyle,
7
8
ColorSchemeName,
8
9
} from 'react-native'
···
92
93
93
94
export const useTheme = () => useContext(ThemeContext)
94
95
95
-
export const ThemeProvider: React.FC<ThemeProviderProps> = ({
96
-
theme,
97
-
children,
98
-
}) => {
99
-
const colorSchemeFromRN = useColorScheme()
100
-
const [nativeColorScheme, setNativeColorScheme] =
101
-
React.useState<ColorSchemeName>(colorSchemeFromRN)
96
+
function getTheme(theme: ColorSchemeName) {
97
+
return theme === 'dark' ? darkTheme : defaultTheme
98
+
}
99
+
100
+
/**
101
+
* With RN iOS, we can only "trust" the color scheme reported while the app is
102
+
* active. This is a workaround until the bug is fixed upstream.
103
+
*
104
+
* @see https://github.com/bluesky-social/social-app/pull/1417#issuecomment-1719868504
105
+
* @see https://github.com/facebook/react-native/pull/39439
106
+
*/
107
+
function useColorScheme_FIXED() {
108
+
const colorScheme = useColorScheme_BUGGY()
109
+
const [currentColorScheme, setCurrentColorScheme] =
110
+
React.useState<ColorSchemeName>(colorScheme)
102
111
103
112
React.useEffect(() => {
113
+
// we don't need to be updating state on web
114
+
if (isWeb) return
104
115
const subscription = AppState.addEventListener('change', state => {
105
116
const isActive = state === 'active'
106
-
107
117
if (!isActive) return
108
-
109
-
setNativeColorScheme(colorSchemeFromRN)
118
+
setCurrentColorScheme(colorScheme)
110
119
})
111
120
return () => subscription.remove()
112
-
}, [colorSchemeFromRN])
121
+
}, [colorScheme])
122
+
123
+
return isWeb ? colorScheme : currentColorScheme
124
+
}
113
125
114
-
const value =
115
-
theme === 'system'
116
-
? nativeColorScheme === 'dark'
117
-
? darkTheme
118
-
: defaultTheme
119
-
: theme === 'dark'
120
-
? darkTheme
121
-
: defaultTheme
126
+
export const ThemeProvider: React.FC<ThemeProviderProps> = ({
127
+
theme,
128
+
children,
129
+
}) => {
130
+
const colorScheme = useColorScheme_FIXED()
131
+
const themeValue = getTheme(theme === 'system' ? colorScheme : theme)
122
132
123
-
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
133
+
return (
134
+
<ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
135
+
)
124
136
}