React Native Render HTML bullet list is not centered with text - django

Question

I'm using react-native-render-html library to display data from Django Rest Framework stored in RichTextUploadingField from django-ckeditor. As basic styling is working properly I have a problem with the <ul> tag - text is not centered with circle/square/number as shown in the image. I tried using renderersProps like:
<RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />
But it works for specific text size. If I change the text size in style in Django admin, the element and text aren't centered again. Is there any option on how to fix it or what causes the problem?

Answer 1

You could add a custom CSS class to unordered list items only. Then apply your styles to that CSS class.
// this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
const { children, name } = el;
if (name === 'ul' && children && children.length) {
children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
}
}
// define your styles for your custom class
const classesStyles = {
"ul-li": {
lineHeight: '21px', // for me adjusting lineHeight did the job
}
}
// in your JSX
<RenderHtml
source={source}
contentWidth={width}
tagsStyles={tagsStyles}
... // other props you may have
domVisitors={{onElement}} // first alter your html
classesStyles={classesStyles} // then apply styles
/>
Sources:
classesstyles
onElement