iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
564 stars 166 forks source link

Lists (both Ordered and Unordered) fail to render correctly if alignItems style in parent element #218

Open rajiv-penagonda opened 2 months ago

rajiv-penagonda commented 2 months ago

Greetings, before I get started with the issue description, I want to thank you for the wonderful package that you have made. I see great potential for using this in my project where lot of help content and user readable material will have to be rendered and this tool is a gem for it.

During my evaluation, I noticed that Markdown component does not render lists correctly if the parent element View has style attribute alignItems specified to any value (center, align-start, align-end). I have attached a screenshot as well as sample code below. Could you please let me know if there is a workaround or anything I should do to use it correctly?

Regards,

failing-case.txt failing-case

josheverett commented 1 month ago

Just ran into this as well, however in my case the trigger was an ancestor view having a flexDirection other than column or column-reverse.

josheverett commented 1 month ago

A partial workaround is to set the following styles:

bullet_list_content: {
  flex: undefined,
},
ordered_list_content: {
  flex: undefined,
}
jordansbenjamin commented 1 month ago

Hey @josheverett, thanks for the solution. It worked like a charm, I am quite curious how you came to the discovery that an ancestor view with a flexDirection set other than column or column-reverse is causing this issue?

josheverett commented 2 weeks ago

@jordansbenjamin found it by just removing things until the behavior changed, plus a little trial and error. Once I found that one flexDirection value was a trigger, I tried the rest of the possible values to see which others would trigger it.