iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
568 stars 167 forks source link

Style issues when using exported renderRules #148

Closed markholland closed 9 months ago

markholland commented 3 years ago

We're working on migrating from react-native-markdown-renderer and are trying to understand some differences we're seeing when using our existing rules that make use of the exported renderRules.

Here is an Expo Snack displaying the main issues we're seeing: https://snack.expo.dev/@markholland/react-native-markdown-display

We have a rule for list_item so that we can catch some cases and render something different, otherwise we call renderRules.list_Item. After changing to this library we're seeing that styles aren't being passed leading to flexDirection: 'row' not being applied causing the bullet point and text to appear on different lines.

This appears to be because in the renderRules.list_Item function only styles prefixed with _VIEW_SAFE_ are used but this won't be the case if we're using renderRules.list_item directly and passing only list_item styles not _VIEW_SAFE_list_item as used here https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js#L125

The second issue is when using the markdown-it emoji plugin. Previously with react-native-markdown-renderer emoji would be shown with the same font size as the content they're part of i.e. a heading. But this isn't the case with this library.

Maybe we're using this library incorrectly so any guidance would be much appeciated.