I'm trying to implement dark theme in an app. I'm currently being told to use native-base to implement this. I can successfully switch themes, but it requires me to reload the app to have any affect.
My logic on theme changing is at the app level as so
<StyleProvider style={ getTheme(this.state.theme === 'light' ? platform : darkplatform) }>
With the theme being changed in module level state on re-render like this
console.log(`darkTheme enabled? ${isDarkThemeEnabled}`);
if (isDarkThemeEnabled && this.state.theme === 'light') {
this.setState(() => ({
theme: 'dark',
}));
} else if (!isDarkThemeEnabled && this.state.theme === 'dark') {
this.setState(() => ({
theme: 'light',
}));
}
};
Not ideal logic, I know, but according to the console logs I have placed in the app.js render method, it is being re-rendered and the theme is being switched on toggle in the style provider. The rest of the components in the app successfully implement native base, they use the current theme, but only switch after the app is refreshed. I've also made sure that they are all re-rendering on state change, but the theme stays the same
Update: SOME components change on the fly, but not all. Any reason for this? It seems to be random, some of my view tags are changing, but not all, not even all of them in the same component
Edit: I am using redux, all of my components are re-rendering on state change, but curiously only some of the themes are changing
How I eventually fixed it (kinda):
Ran npm i --save git+https://github.com/GeekyAnts/theme
Had to do this since the npm version of theme does not have clearThemeCache();
Within my app.js
Added
import { clearThemeCache } from 'native-base-shoutem-theme';
and clearThemeCache();
to the method that was updating component state on dark theme change
From here I had to re-render EVERY component in the entire app on dark theme toggle, since some nativebase components were not re rendering on dark theme change