Best way to support react-native?

[bi3ri]

Hello and happy new year!

As the title suggests, I want to use remark / rehype to render markdown in a React Native application. I've already read about some other attempts, but the problem so far was how rehype handled text elements, so they can be transformed into components.

Now, my question is: What would be the best/easiest solution for this?

From my point of view, I see two options:
a) Write something like remark-react-native and skip rehype altogether. Something similar was done with remark-react, but it was deprecated because it was less pluggable and missing the rich plugin ecosystem of rehype.
b) Write a plugin that can transform text into elements.

The unified ecosystem can be a bit intimidating with all its plugins, different ASTs, parsers, and processors, so I am happy for any suggestion and wink in the right direction! :)

Thanks in advance!
Johannes

[ChristianMurphy]

Welcome @bi3ri! 👋

As with so many things in Engineering "best" and "easiest" are very relative to what your goal is. 😉 🙂

For easiest, as in least code to maintain, you could leverage the existing rehype ecosystem, and add an HTML to react-native translator on the tail end.
There are some existing solutions like https://meliorence.github.io/react-native-render-html/ which can take HTML text and render it in react-native.

If you want to avoid serializing to text before rendering.
I'd recommend leaning on https://github.com/rehypejs/rehype-react (a thing wrapper around https://github.com/syntax-tree/hast-util-to-jsx-runtime).
Rather than focusing on how to render, focus on how to adjust/rework the HTML AST to make it compatible with the react-native JSX runtime.
There are guides at https://unifiedjs.com/learn/ which introduce how to work with syntax trees.

[wooorm]

There is no console output for console.log(node) inside h2 at all.

In your demo there is no “h2” in the markdown. Components only get used if their corresponding thing is used.

As it seems that overwriting components with other components is not possible,

It’s quite possible.

a)

I specifically wonder what you want to do with emphasis in there

b)

Do you want every heading and paragraph turned into a separate view? Or is there one view for the whole?

[bi3ri]

In your demo there is no “h2” in the markdown. Components only get used if their corresponding thing is used.

That is right, sorry! I tried many things and this was the last. I did also try the h2 case e.g. "## Hello World!", though with the same result.

It’s quite possible.

Oh okay, then there must be a problem somewhere else. Do you have an idea where that could be?

I specifically wonder what you want to do with emphasis in there

Mhm, isn't <em> the tag for emphasis? I dont't see where I am using them.

Do you want every heading and paragraph turned into a separate view? Or is there one view for the whole?

That's what a different library did, but you are right probably you don't need to wrap the <Text> element inside <View> element.

[wooorm]

That is right, sorry! I tried many things and this was the last. I did also try the h2 case e.g. "## Hello World!", though with the same result.

Oh okay, then there must be a problem somewhere else. Do you have an idea where that could be?

Indeed there is another problem!

You made a function useRemarkSync that returns the result of processSync.
You call console.log on what it returns, and see in your console that a particular object is logged.

If you read the readme about processSync, or the readme of rehype-react, you will find that processSync returns a file object. On that file, there is a result property. That is where the result is.

React does not know about our files. React only knows about the thing at result.

diff --git a/App.js b/App.js
index 16c438f..344c6dc 100644
--- a/App.js
+++ b/App.js
@@ -25,6 +25,7 @@ const components = {
   // this does not work
   h2: (props) => {
     const { node } = props;
+    console.log('called: ', arguments)
     return <Text>{node.value}</Text>;
   },
 };
@@ -37,7 +38,8 @@ export const useRemarkSync = (source = {}) =>
     .processSync(source);
 
 export default function App() {
-  const content = useRemarkSync("# Hello World");
+  const file = useRemarkSync("## Hello World");
+  const content = file.result;
   console.log(content);
 
   return <View style={styles.container}>{content}</View>;

Mhm, isn't <em> the tag for emphasis? I dont't see where I am using them.

That is correct! You are not using <em>. But I need to know how you want to handle that case. Otherwise I can’t advise you best on what to do.

[bi3ri]

Oh, okay, now I understand what the problem was! The transformation occurs when the result is rendered. I had thought it happened before. That's why I wasn't too concerned about the result I was rendering; I assumed that without a transformation, it would throw errors anyway.

const components = {

  // this does not work
  h2: (props) => {
    console.log("--- inside h2 ---")
    console.log("props: ", props);
    const { children } = props;
    return <Text>{children}</Text>;
  },
};

export const useRemarkSync = (source = {}) =>
  unified()
    .use(remarkParse)
    .use(remarkToRehype)
    .use(rehypeReact, { ...production, components })
    .processSync(source);

export default function App() {
  const file = useRemarkSync("## Hello World!");
  console.log("file: ", file);
  const content = file.result;
  console.log("content: ", content);

  return <View style={styles.container}>{content}</View>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

This produces the following logs:

 LOG  file:  {"cwd": "/", "data": {}, "history": [], "messages": [], "result": <React.Fragment><h2>Hello World</h2></React.Fragment>, "value": "## Hello World"}
 LOG  content:  <React.Fragment><h2>Hello World</h2></React.Fragment>
 LOG  --- inside h2 ---
 LOG  props:  {"children": "Hello World"}
Android Bundling complete 44ms
 LOG  file:  {"cwd": "/", "data": {}, "history": [], "messages": [], "result": <React.Fragment><h2>Hello World!</h2></React.Fragment>, "value": "## Hello World!"}
 LOG  content:  <React.Fragment><h2>Hello World!</h2></React.Fragment>
 LOG  --- inside h2 ---
 LOG  props:  {"children": "Hello World!"}

This is particularly confusing because when I define this component:

const components = {
  // this works
  h1: "h4",
};

And change the input markdown to "# Hello World!", it generates the following logs:

 LOG  file:  {"cwd": "/", "data": {}, "history": [], "messages": [], "result": <React.Fragment><h4>rHello World!</h4></React.Fragment>, "value": "# Hello World!"}
 LOG  content:  <React.Fragment><h4>rHello World!</h4></React.Fragment>
 ERROR  Error: Text strings must be rendered within a <Text> component.

So in this case the transform happens before rendering.
Thanks, for the help! :)

That is correct! You are not using <em>. But I need to know how you want to handle that case. Otherwise I can’t advise you best on what to do.

I haven't given it much thought yet, but in other projects, they just use nested elements with the style set to italic, for example:

<Text> This is normal text... <Text style={{ fontStyle: "italic" }}> this text is italic </Text></Text>

By default, there is no style inheritance in React Native, except for Text subtrees. So the approach above should also work if you nest other elements inside each other, like an emphasis inside a heading, for example.

[wooorm]

Looks like you’re on your way now. Good luck! Some more thoughts if you get stuck:

The transformation occurs when the result is rendered.

Not quite I think, “the” transformation has happened.
But in React, components are called when they are rendered.
And when changes happen, they get rendered again.
If a subtree doesn’t render, React doesn’t call the components inside it.
You could call rendering “transformation” but I don’t think that’s the right model to think about how React works.

You’re asking a lot about the symptomps, but not about what actual input should lead to what actual output. What about em in a heading? Everything in a View or one View with everything in it? I think it will help to look at a sample of all that’s possible in markdown and then look at what you’d like to show it as. Emphasis in links? Block quotes? List items? Etc.

for example:

Can you use the markdown syntax for code to format your code? Now it gets interpreted as markdown.
The text resetting might be problematic when emphasis is used inside strong, or emphasis in a link, etc. (*a **b** c*, [a *b* c](url))