support backgroundColor in custom styles

[bockc]

Hey, I was wondering if it's possible to support the style prop backgroundColor for text blocks ?

Let's say I have those blocks:

0: {
  data: {},
  depth: 0,
  entityRanges: [],
  inlineStyleRanges: [],
  key: "6dml9",
  text: "Test",
  type: "unstyled",
},
1: {
  data: {},
  depth: 0,
  entityRanges: [{…}],
  inlineStyleRanges: [],
  key: "5dpc1",
  text: "@Coco Jumbo",
  type: "mention",
}

and this style:

mention: {
    lineHeight: 26,
    fontSize: 14,
    fontWeight: 'normal',
    backgroundColor: theme.color.blue.shade100,
  }

I'd expect the Text component corresponding to the second block with the mention style to have the background color I gave it, and looking pretty much like that:

Do you think that would be possible ? I know the backgroundColor style prop works fine with Text components in react-native, but if you didn't handle it maybe there's a reason, I'm just curious to know if you could manage to support it or not.

Or maybe I am doing something wrong ?

Anyway, great work with this package ;)

[bibek-magar]

Is css working on your native view?

[bockc]

@beevekmgr I'm not sure I fully understand your question, could you develop a little bit ?

[bibek-magar]

is draft js render working?? In my case css is not working but html view only working...

[bockc]

Yes it's working fine for me, I was even able to add custom styles to some elements. Unfortunately some CSS properties are just not supported and won't work, such as backgroundColor. You can define your own block styles, but if you're trying to use a CSS property that's not supported inside, it will be ignored. Take a look at the code, if I remember correctly, style props are assigned explicitly, which leads to some CSS being unavailable