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

[rajiv-penagonda]

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

[josheverett]

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]

A partial workaround is to set the following styles:

bullet_list_content: {
  flex: undefined,
},
ordered_list_content: {
  flex: undefined,
}

[jordansbenjamin]

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]

@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.

[bvanderdrift]

A partial workaround is to set the following styles:

bullet_list_content: {
  flex: undefined,
},
ordered_list_content: {
  flex: undefined,
}

Might also want to add flexShrink: 1 to both, since it might cause overflow by simply setting it to undefined

Before shrink:

After shrink: