Handling newline text nodes in React Native

[tsargent]

I am trying to use mdx in a React Native app, and I'm wondering how others have solved the problem where an empty line between two lines of text throws an error because text must be rendered with a Text component in React Native.

For example, I can get this to render successfully, by passing {h1: Text} to the components prop:

# Heading 1

Likewise, I can get this to render successfully, by passing {h2: Text} to the components prop:

## Heading 2

However, the following input throws the error Text strings must be rendered within a <Text> component:

# Heading 1

## Heading 2

This is because the line between the headings gets compiled to \\n which (I think?) React on the web can just render as text without wrapping it in an html element. So when compile compiles the mdx input above, it returns this as the value:

import {
  Fragment as _Fragment,
  jsx as _jsx,
  jsxs as _jsxs,
} from 'react/jsx-runtime';
function _createMdxContent(props) {
  const _components = {
    h1: 'h1',
    h2: 'h2',
    ...props.components,
  };
  return _jsxs(_Fragment, {
    children: [
      _jsx(_components.h1, {
        children: 'Heading 1',
      }),
      '\\n',
      _jsx(_components.h2, {
        children: 'Heading 2',
      }),
    ],
  });
}
export default function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || {};
  return MDXLayout
    ? _jsx(MDXLayout, {
        ...props,
        children: _jsx(_createMdxContent, {
          ...props,
        }),
      })
    : _createMdxContent(props);
}

It's the \\n child that causes the error in React Native. See the return statement of _createMdxContent

To see this, clone my demo repo here: https://github.com/tsargent/mdx-poc.

Install dependencies with yarn install
Install pods with npx pod-install
Run in the simulator yarn ios

Error with 2 lines in the mdx content:

If you remove either line in demo.mdx, it renders successfully:

The compilation is done in the metro config here: https://github.com/tsargent/mdx-poc/blob/main/metro.transformer.js#L9-L12

[ChristianMurphy]

Welcome @tsargent! 👋

MDX renders for web, and react-native doesn't fully support web content.
You could try a wrapper like https://github.com/danieldunderfelt/rn-mdx which translates all the markdown supported HTML, into the react-native equivalents.

[tsargent]

Thank you! That seems to solve my problem 🥳