Adding styles with the default ones

[avishayil]

Hello, I want to expand the Overlay style to include backgroundColor: 'rgba(0, 0, 0, 0.7)'. The problem is, when I define the theme like this:

const theme = {
    ...getTheme(),
    'shoutem.ui.Overlay': {
        '.darker': {
            backgroundColor: 'rgba(0, 0, 0, 0.7)'
        }
    }
}

It overrides the Overlay styles totally. How can I keep the default styles and just override the backgroundColor definition?

[martinezguillaume]

You can try something like this merge(getTheme(), 'shoutem.ui.SomeComponent': { backgroundColor: 'rgba(0, 0, 0, 0.7)' }); Use merge of lodash

[MutableLoss]

I have been trying to do accomplish this as well, and per the documentation it read like it was default behavior, until I added the StyleProvider component. This feels like something that should be catered to a bit more, or at least a topic catered to a bit more in the documentation?

I did find a few ways to accomplish this, but without installing shoutem/theme, and similar to the native stylesheet method:

...
<View style={styleTypes.selectedOption}>
  <NavigationBar
    style={styleTypes.bar}
    styleName="fade"
  />
</View>
...

const styleTypes = {
  selectedOption: {
    minWidth: 260,
    marginTop: 0,
    padding: 20,
  },
  bar: {
    container: {
      zIndex: 1,
      padding: 20
    }
  }
}

I know this is most likely far from the preferred method, and it may not even be a great method, but so far it has been the only simple solution I have found. Ideally I would have loved to keep the theme setup, but also have the option to retain the theme without having to add the defaults from theme.js in my theme. Even with the various methods I have found in the issues, it would be great to see a suggested method in the documents somewhere.

Originally I thought this would be an optional default behavior with the theme package, especially with multiple integration options. I'm sure as I progress it will be more apparent why I will want the behavior offered (especially with the builder), but it seems to be a common request to keep the defaults, and have the ability to add tweaks to the theme.

Besides all of what sounds like complaining, I absolutely love the shoutem project; it would just be great to see some more documentation to cover these common use cases, and user stories.

[MrBr]

Sorry guys for not replying before.

As @martinezguillaume mentioned, you have to do recursive merge, lodash has solved that problem with _merge.

@3DEsprit, only one theme can be active per time for now. We are considering to support something like multiple themes, but it is not in our roadmap at the moment. Recursive merge solves this problem pretty well.

If you pass certain style, like in you example it should be recursively merged with theme style. Your problem might have been lost default UI theme style once added StyleProvider.

I'll work on the documentation, it should be improved.

Closing this for now.

Thank you for the feedback.