React-native-render-html: Cannot override list margins (ul, ol li)

[sampsasaarela]

It seems that there is no way to override list margins.

Padding left is hard coded for ul and ol tags here: https://github.com/archriss/react-native-render-html/blob/master/src/HTMLRenderers.js#L100

And margin bottom is hard coded for li tags here: https://github.com/archriss/react-native-render-html/blob/master/src/HTMLRenderers.js#L93

Am I correct? Is there any workaround for this? I think it should be possible to override those values somehow.

[Exilz]

Hi, you're correct, there is no simple way to change these styles for now.

Maybe we could add a style prop that would be merged with all the default styles for the renderers supplied with the plugin. I don't want to create too much additional props to tweak styling here and there. I feel like there's too much props already.

In the meantime, you can just copy/paste the renderer and change these values however you see fit and add your custom renderer to your renderers prop.

[Exilz]

This should be fixed in 3.6.0.

[AlexCatch]

This doesn't seem to be fixed, passing a style with margin inside seems to have no effect.

[donni106]

The marginBottom: 10 for list items is in line 101 now: https://github.com/archriss/react-native-render-html/blob/master/src/HTMLRenderers.js#L101

Will there be a prop in some future version, or do we need to create a custom renderer to change the margin?

[pataar]

Any solution for this?

[mitchdowney]

@pataar maybe I'll regret this, but a hacky workaround that seems to work for me is to set marginLeft: -16 on the ul custom tag style.

ul: {
  listStyleType: 'none',
  marginBottom: 0,
  marginLeft: -16,
  marginRight: 0,
  marginTop: 0,
  paddingLeft: 0
},
li: {
  listStyleType: 'none'
}

[systemride]

This should still be open, there's still no way to override the li element styles.

[jsamr]

@systemride You should be able to set margins for lists in the foundry pre-release, see #430 for instructions on how to try it out.