Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native stylesheet not updating on value change

$
0
0

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?

gif

Codesanbox

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles