I have a Theme Context that exposes all the colors in my app, in light and dark mode. I just set this up and it works fine, but the styles don't get updated, even though the actual values are changing. I replicated it in Codesanbox and it does indeed work, but why not in my app?
Here are my files in my project (the problem is in ./pages/switcher.tsx
:
./context/Theme.tsx
:
const ThemeProvider: React.FC<{}> = ({ children }) => { const [theme, setTheme] = useState<ThemeOptions>('light') return (<ThemeContext.Provider value={{ theme, setTheme }}> {children}</ThemeContext.Provider> )}
./hooks/useTheme.ts
:
const useTheme = (): UseThemeHook => { const { theme, setTheme } = useContext(ThemeContext)! if (theme === 'dark') { return { theme: darkTheme, // returns all colors setTheme, // along with the function to switch themes } } return { theme: lightTheme, setTheme, }}
./App.tsx
:
const App = () => { return (<ThemeProvider> // children</ThemeProvider> )}
./pages/switcher.tsx
:
const Swither: React.FC<SwitherProps> = ({}) => { const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null) const [enabled, setEnabled] = useState(false) const { theme, setTheme } = useTheme() useEffect(() => { setUser(auth().currentUser) }, []) return (<View style={{ ...Layout.layout, ...Layout.default }}> {user ? (<> // styles here do not update but this text does<Text style={{ color: theme.text }}>Theme: {theme.text}</Text><Switch trackColor={{ false: '#767577', true: '#81b0ff' }} thumbColor={enabled ? '#f5dd4b' : '#f4f3f4'} ios_backgroundColor="#3e3e3e" onValueChange={() => { setEnabled(!enabled) setTheme(value => (value === 'light' ? 'dark' : 'light')) }} value={enabled} /></> ) : (<Text>User is null</Text> )}</View> )}
All the files are available here