reactjsreact-nativereduxthemesnative-base

Changing theme on the fly with native-base


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


Solution

  • 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