I am trying to toggle between light and dark theme on the runtime by following the documentation. When I toggle the theme within a component, the toggle function in App.js is called, but setting the theme does not have any effect.
In the component after creating theme-context.ts
import { ThemeContext } from '../../../theme-context';
themeContext.toggleTheme();
this is the App.js code
// Kick off initial async loading actions, like loading fonts and RootStore
useEffect(() => {
;(async () => {
setupRootStore().then(setRootStore)
})()
}, [])
const [theme, setTheme] = React.useState('light');
const toggleTheme = () => {
const nextTheme = theme === 'light' ? 'dark' : 'light';
setTheme(nextTheme);
console.log("Toggle Theme pressed")
};
if (!rootStore) return null
// otherwise, we're ready to render the app
return (
<RootStoreProvider value={rootStore}>
<SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
<IconRegistry icons={EvaIconsPack} />
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ApplicationProvider {...eva} theme={eva.light}>
{!rootStore.authStore.isLoggedIn && !startedPressed ? <WelcomeSliderScreen pressed={getStartedPressed}></WelcomeSliderScreen> :
<RootNavigator
ref={navigationRef}
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
}
</ApplicationProvider>
</ThemeContext.Provider>
</SafeAreaProvider>
</RootStoreProvider>
)
}
export default App
setTheme(nextTheme); is called but does not have any effect. Also setTheme('dark'); is not working.
