Ui: Change Divider's Color

[tonyneel923]

Is there a way to change the divider component's color?

[SoHotSoup]

Hi @tonyneel923! Yes, all @shoutem/ui components are completely customizable, you can either write your own theme or pass the style as a prop to Divider. Here is initial Divider's style:

  'shoutem.ui.Divider': {
    '.line': {
      '.small': {
        width: 55,
      },
      '.center': {
        alignSelf: 'center',
      },
      paddingTop: 0,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderColor: Colors.DIVIDER_LINE,
    },

    '.section-header': {
      [INCLUDE]: ['sectionHeaderDivider'],
    },

    alignSelf: 'stretch',
    backgroundColor: Colors.LIGHT,
    paddingTop: 25,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

Take a look at this file for more info...
https://github.com/shoutem/ui/blob/develop/theme.js

[tonyneel923]

Thanks for the example it helped a lot!

[tonyneel923]

I know I closed this but I had a question. If I define my own theme is there any way of combining mine and yours together?

[tonyneel923]

So I figured out how to use that theme.js and combine with mine. Which got me thinking maybe this could be a feature in shoutem? @SoHotSoup

[SoHotSoup]

@tonyneel923 Shoutem already has that feature. StyleProvider could accept theme and send it through context to all its child components. Take a look at this http://shoutem.github.io/docs/ui-toolkit/theme/introduction.

So if you want to expand theme.js with your custom style try something like this:

import getTheme from '@shoutem/ui';

const theme = {
...getTheme(),
  'shoutem.ui.SomeComponent': {
     // style
  },
};

...

<StyleProvider theme={theme}>
</StyleProvider>

[tonyneel923]

Awesome. Really love the library keep up the great work!

[javiercr]

@SoHotSoup sorry if I'm hijacking the thread but... does that approach allows to overwrite a single style property?

In other words, let's say I want just to change the backgroundColor for shoutem.ui.SomeComponent:

es6 const theme = { ...getTheme(), 'shoutem.ui.SomeComponent': { backgroundColor: 'red' }, };

Would this preserve the existing styles defined for the default theme other than backgroundColor? I tried this and it seems it doesn't work (i.e. I would need to list the full style for the component). I just wanna check with you guys to make sure I am not doing anything wrong.

[tonyneel923]

@javiercr you would need to merge those two objects together without overwriting. I used lodash merge since it is already included with react native. Something like:

let theme = _.merge(getTheme(), 'shoutem.ui.SomeComponent': { backgroundColor: 'red' });

[javiercr]

That works :) Thank you!