React Native Line Parsing

[sgriff96]

Hi! I am attempting to use this library for React Native (though fully aware that that is not supported so no worries if this isn't possible).

I'm trying to define my own components for each type of markdown, but no matter what I seem to get an error in React Native for trying to render something without a <Text /> (React Native specific) element.

This is the markdown I'm passing in:

# test

test body

[link](https://www.google.com)

I've set a component for basically every single option in components at this rate. It seems like it breaks once there is a line break.

Any single line from here seems to work, ie
# test
test body
[link](https://www.google.com)

But once I make a new line it seems to try to render that without a React Native <Text> element.

I do have br replaced (br: ({ children }) => <Text>{children}</Text>,) but not sure if that's the proper element for this. Can anyone suggest what I might need to do to handle these line breaks?

[ChristianMurphy]

Welcome @sgriff96! 👋

When you say "this library", which are you referring to?

• https://github.com/remarkjs/react-markdown
• https://github.com/remarkjs/react-remark
• https://github.com/rehypejs/rehype-react
• https://github.com/mdx-js/mdx
• or something else entirely?

https://unifiedjs.com/learn/

Can anyone suggest what I might need to do to handle these line breaks?

Targeting line breaks feels like the wrong way of going about this.
Going back to the original ask:

I'm trying to define my own components for each type of markdown, but no matter what I seem to get an error in React Native for trying to render text without a Text element.

If you want to wrap text elements, you probably want a remark or rehype plugin (see: https://unifiedjs.com/learn/).
text does exist as a node type in the Abstract Syntax Tree, and you could wrap it in tags which usually wouldn't exist in HTML from that level in content transformations.

[sgriff96]

Oh shoot sorry, not super familiar with Github Discussions. I'm referring to remarkjs/react-markdown. Let me take a look into those plugins again (looked at them briefly from the react-markdown README) and get back to you. Thanks for the quick reply!

[sgriff96]

Hey @ChristianMurphy could you elaborate a bit on why targeting line breaks seems like the wrong way to do this? The problem seems to be how react-markdown interprets line breaks in the markdown, and is for some reason returning those as something (I don't know what) that's not part of the components options and thus rendering somehow what React Native interprets as text but not wrapped in <Text> which you must do in RN.

[ChristianMurphy]

Breaks are self closing and have no children https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

[ChristianMurphy]

The problem seems to be how react-markdown interprets line breaks in the markdown, and is for some reason returning those as something (I don't know what) that's not part of the components options

Text is not a component, so it is not part of the component options

[ChristianMurphy]

Again please read my initial comment

If you want to wrap text elements, you probably want a remark or rehype plugin (see: https://unifiedjs.com/learn/).
text does exist as a node type in the Abstract Syntax Tree, and you could wrap it in tags which usually wouldn't exist in HTML from that level in content transformations.

[sgriff96]

Sorry I think I didn't explain myself well initially (or I'm not understanding well, reading through some of the content in unifiedjs.com/learn was going over my head). So is react-markdown returning a <br /> for new lines in the markdown then? Unfortunately the error reporting in React Native leaves something to be desired, so I'm not sure exactly what it's reading and erroring on.

I'm not following what you mean by "Text is not a component, so it is not part of the component options". I know its not part of the components options in react-markdown. I was referring to how React Native requires any string to be wrapped in a <Text /> component (a RN component), so I'm trying to do this for example: p: ({ children }) => <Text>{children}</Text>,. Every time I've referred to Text/text etc has been in that context, not as like an html element or markdown element or anything else.

[ChristianMurphy]

react-markdown returning a
for new lines in the markdown then?

This isn't specifical to react-markdown, it is how HTML works.

I was referring to how React Native requires any string to be wrapped in a component (a RN component)

I'm well aware.
You need to translate HTML where text is not a component, to react native where it is.
To do so you need to change the structure of the document, which is what the Abstract Syntax Tree can do.

[wooorm]

This seems very much like remarkjs/react-markdown#741.

[wooorm]

What?! Please take time formulating and fixing your q

[ChristianMurphy]

@mwaleed-39 This is the discussion and Q&A forum for remark and react-markdown.
You don't appear to be using either in your application, from the limited code you have shown.

If you are looking for general React Native support, please see their support channels https://reactnative.dev/community/support

If you are using react-markdown or remark and believe that it is causing the issue.
Share how you are using these libraries, how you have configured them, and why you think these are the error and not something else in the application.
Following the support guidelines https://github.com/remarkjs/.github/blob/main/support.md

If you continue to spam incomprehensible and unrelated comments at the remark community, you will be blocked.