React-native-render-html: Lists bullets and numbers are always Black

[kikoseijo]

Hi there,

Firstable, thanks for this library, its being awesome to render on react-native.

Nobody tried to change the baseFontColor and render lists? on a black background I changed font style with the prop:

baseFontStyle={{ fontSize: 14, lineHeight: 14 * 1.5, color: 'white' }}

But could not see bullets or list numbers.

As a solution I have extended the props of the baseFontStyle to this tags.

You can see the fixes here:

https://github.com/kikoseijo/react-native-render-html/commits/master

basically I did something like this for the <ol>

<Text style={[baseFontStyle, { marginRight: 5, fontSize: baseFontSize }]}>{index + 1})</Text>

and the following for the <ul>

...
backgroundColor: baseFontStyle.color ? baseFontStyle.color : 'black'

Solution its not the best I guess, but...

Bug, enhancement or my bad?

[houke]

I solved it by adding my own list prefix like this

listsPrefixesRenderers={{
  ol: (htmlAttribs, children, convertedCSSStyles, passProps) => {
    return (
      <Text style={}>
        {passProps.index + 1})
      </Text>
    );
  }
}}

After which my custom style was applied to the list prefix

[donni106]

I am also implementing my own listsPrefixesRenderers for ol to achieve a . instead of ).
Thanks to @houke for your answer, because I was wondering where to get the index from.
Now I know, it is in the passProps attribute!

And yes, the color is set per style on the Text.

Now I have a nice enumeration with dots.

1.
2.
3.

[GitHubTracey]

@houke That's a great option for the numbered lists, thank-you! Do you have any thoughts for the unordered lists? I'd really rather not having to find icons for each unordered list type when it's already in the html content. I poked through the output form each of the htmlAttribs, children, convertedCSSStyles, passProps and nothing obvious stands out to me...

Definitely think this should be a basic use case for sure.

[ziyafenn]

@donni106 how did you do that? I can't figure it out how to replace ) from ol :D

[donni106]

@ziyafenn sure, here a code snippet to replace ) in ol with .:

...
html={html}
listsPrefixesRenderers={{
  ol: (_htmlAttribs, _children, _convertedCSSStyles, passProps) => (
    <Text style={style}>{passProps.index + 1}.</Text>
  )
}}
...

[nbolender]

If anyone is looking for a way to fix this, here are the default renderers. You'll have to drop in your own font size and color.

...
listsPrefixesRenderers={{
    ul: (_htmlAttribs, _children, _convertedCSSStyles, passProps) => {
        return <View style={{
            marginRight: 10,
            width: myFontSize / 2.8,
            height: myFontSize / 2.8,
            marginTop: myFontSize / 2,
            borderRadius: myFontSize / 2.8,
            backgroundColor: myBulletColor,
        }}/>
    },
    ol: (_htmlAttribs, _children, _convertedCSSStyles, passProps) => {
        return <Text style={{ marginRight: 5, fontSize: myFontSize }}>{ passProps.index + 1 })</Text>
    },
}}
...