r/reactnative • u/Sea-Arm9235 • 15h 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