Rendering rich text in React Native

Thanks to rich-text-react-render, we can render Contentful rich text inside a React app. Moreover, some defaults are provided for DOM rendering (using tags like <p>, <h1> and so on).

However, it is not possible to render these tags in a React Native app, as React Native uses custom components, not DOM elements (for example <Text> for text).

Fortunately, rich-text-react-renderer makes possible to override the default components and allows to provide a custom renderer for each type of content.

Then, it is up to the user to provide their own React Native renderer.

Do you think it could be a good idea to provide a default renderer for React Native as well?

People might override it to use their own components for easier styling, but this could make it easier to get started using Contentful with React Native.

[Khaledgarbaya]

Since the react-renderer is flexible enough I think we can have a package that just exports a renderer option to add the rich-text-react-renderer

Example:

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { reactNativeRenderer } from '@contentful/rich-text-react-renderer';

documentToReactComponents(document, reactNativeRenderer)

[neil-gebbie-smarterley]

For anyone looking for a solution, you can use this as a starting point. Your use case will be different based on where your using it, but for most people it’s enough to get started. I’ve edited the code inside the github comment box so if there is errors or formatting issues sorry about that.

const contentfulToReactnative = {
    renderMark: {
      [MARKS.UNDERLINE]: (text) => {
        return text;
      },
      [MARKS.BOLD]: (text) => {
        return <Text>{text}</Text>;
      },
      [MARKS.ITALIC]: (text) => {
        return <Text>{text}</Text>;
      },
      [MARKS.CODE]: (text) => {
        return <Text>{text}</Text>;
      },
    },
    renderNode: {
      [INLINES.HYPERLINK]: (node) => {
        return null;
      },
      [BLOCKS.EMBEDDED_ENTRY]: (node) => {
        return null;
      },
      [BLOCKS.PARAGRAPH]: (_node, children) => {
        return <Text>{children}</Text>;
      },
      [BLOCKS.EMBEDDED_ASSET]: (node) => {
        return null;
      },
      [BLOCKS.HEADING_1]: (_node, children) => <Text>{children}</Text>,
      [BLOCKS.HEADING_2]: (_node, children) => <Text>{children}</Text>,
      [BLOCKS.HEADING_3]: (_node, children) => <Text>{children}</Text>,
      [BLOCKS.HEADING_4]: (_node, children) => <Text>{children}</Text>,
      [BLOCKS.HEADING_5]: (_node, children) => <Text>{children}</Text>,
      [BLOCKS.HEADING_6]: (_node, children) => <Text>{children}</Text>,
      [BLOCKS.UL_LIST]: (_node, children) => {
        return (
          <View>
            {children.map((child, i) => {
              return child;
            })}
          </View>
        );
      },
      [BLOCKS.OL_LIST]: (_node, children) => {
        return children.map((child, i) => {
          return child;
        });
      },
      [BLOCKS.LIST_ITEM]: (_node, child) => {
        return <View>{child}</View>;
      },
      [BLOCKS.QUOTE]: (_node, child) => {
        return <Text>{child}</Text>;
      },
      [BLOCKS.HR]: (_node, child) => {
        return <Text>{child}</Text>;
      },
    },
};

And then you can do this:

import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
documentToReactComponents(objFromContentful, contentfulToReactnative)