react-native-simple-markdown: Single line break breaks layout

A single line break \n somehow breaks the layout leading to very strange spaces. Expected behavior would be that it is just ignored.

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 5
  • Comments: 16 (2 by maintainers)

Most upvoted comments

@afilp I just manually added a method to convert single \n to double like this.

addLineBreak(content) {
        const newContent = content.replace(/\n/g, (m) => {
            return m + m;
        });
        return newContent;
  }

<Markdown blacklist={['list']}>
      {this.addLineBreak(content)}
</Markdown>

I guess It is the easiest way to handle this problem for now.

this happened to me in latest version

using 2 \n solved:

\n\n

Ideally the post processing of the tree from rn-markdown-parser would just be a modification to that library. But that was beyond the time frame of about a day since the library code was hard to understand.

I created a gist with my markdown code:

https://gist.github.com/MrLoh/b6142cde26d49d8f080a37f59fa22b06

The markdown-parser generates the AST based on rn-markdown-parser. It’s a little customized for my needs with thinks like an image block.

The Article is how I render it (pretty straight forward similar to this library)