NativeBase: Changing theme is not propagated to connectedComponents

When StyleProvider theme is changed it does not get propagated to the ConnectedComponents(components that are decorated with connectStyle). After some debugging I found this issue is due to a bug in native-base-shoutem-theme connectStyle.js, specifically getOrSetStylesInCache method.

    getOrSetStylesInCache(context, props, styleNames, path) {
      if (themeCache && themeCache[path.join('>')]) {
        // console.log('**************');

        return themeCache[path.join('>')];
      } else {
        resolvedStyle = this.resolveStyle(context, props, styleNames);
        if (Object.keys(themeCache).length < 10000) {
          themeCache[path.join('>')] = resolvedStyle;
        }
        return resolvedStyle;
      }
    }

Looks like it is using the cached version of the theme for current component. The fix is to remove the if block that is looking for the cached version of the style for the current component. The cache is still used for lookup of parent styles.

      getOrSetStylesInCache(context, props, styleNames, path) {
        resolvedStyle = this.resolveStyle(context, props, styleNames);
        if (Object.keys(themeCache).length < 10000) {
          themeCache[path.join('>')] = resolvedStyle;
        }
        return resolvedStyle;
      }

I have a sample code to demonstrate this issue Github repo

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 14
  • Comments: 21 (6 by maintainers)

Most upvoted comments

@SupriyaKalghatgi Can you apply this solution about clean the cache? Because in this case the control of cache is the developer responsibility. It’s a better solution in this moment, please reconsider it. Thanks 😄

This problem still ocurrs, having the same trouble here. Any plans for a new release of native-base with a new version of native-base-shoutem-theme containing @Micjoyce PR Add function to clear the theme cache #5 ?

Hey guys,

Looks like this cache is also an issue for hot reloading of a component styles. Do you plan to add api to somehow invalidate the cache?

Any updates? Is this library still maintained? It’s a very small PR that would save people from monkey patching the library…

I, too, have encountered this issue now. Seeing the age of this request makes me weary on relying on NativeBase in any of my projects.

I’d love to see this fixed! 😄

Need this pull request for this to be fixed: https://github.com/GeekyAnts/theme/pull/5

Did anyone manage to get this to work? Is it possible to update the theme on the fly by just passing a new style object to the provider? This would be similar to the material-ui library for react web… where you can easily switch themes on the fly, re-render the root, and voila!