r/reactnative • u/Sea-Arm9235 • 1d ago

Render images, videos and links in Markdown as your own React components (react-native-enriched-markdown)

We've added custom block renderers to Enriched Markdown, built together with Julius Marminge for T3 Code.

Images, videos and links on a line of their own can now be rendered by your React components, while the rest of the Markdown renders as before, with text selection, accessibility and streaming intact.

The video is a single Markdown document streaming in: a link becomes a spinning record, an image becomes a chord wheel. The custom components are powered by Reanimated.

It's one prop:

const renderers: MarkdownRenderers = {
  image: ({ url }) => <ZoomableImage uri={url} />,
  link: ({ url, label }) => <LinkCard url={url} title={label} />,
};


<EnrichedMarkdownText flavor="github" markdown={markdown} renderers={renderers} />

Try it in nightly:

npm i react-native-enriched-markdown@nightly

Docs: https://docs.swmansion.com/enriched-markdown/react-native/guides/custom-block-renderers

If it's useful to you, a ⭐ on GitHub helps more people find it: https://github.com/software-mansion/enriched-markdown

21 Upvotes

93% Upvoted

5 comments sorted by

3

u/blazejkustra 1d ago

You are making enriched markdown the ultimate tool for AI chat apps, so cool! ❤️

2

u/Sea-Arm9235 1d ago

Thanks a lot! ❤️ That's the plan 🚀

2

u/Shomriddho 1d ago

damn, this will be perfect for ai chats

1

u/Sea-Arm9235 1d ago

That's the idea! Tool results, file cards and link previews can all be your own components, right inside the streamed response 🔥

2

u/Tarantino133 1d ago

Keeping text selection and accessibility while swapping blocks for your own components is the hard part, nice work. Does the renderer get called again on every streamed chunk, or only once the line is complete? For an AI chat that's the difference between a card that flickers while tokens come in and one that just pops in once.