Markdown – Once UI

Markdown takes a Markdown string and draws it with the same components core's MDX components use on the web. Headings, body text, links, inline code, CodeBlock, quotes, List, Table, Media and Line all look the same as on your site. Use it for content you store as Markdown, such as posts, comments, release notes or help articles.

Basic usage

Pass the source as the child. The parser runs on the device and has no dependencies.

PostBody.tsx

import { Markdown } from "@once-ui-system/native";

export function PostBody({ body }: { body: string }) {
return <Markdown>{body}</Markdown>;
}

Links

By default, tapping a link opens its URL with Linking.openURL. Pass onLinkPress to route links inside your app instead.

Article.tsx

import { Markdown } from "@once-ui-system/native";
import { router } from "expo-router";
import { Linking } from "react-native";

export function Article({ body }: { body: string }) {
return (
  <Markdown
    onLinkPress={(href) =>
      href.startsWith("/") ? router.push(href) : Linking.openURL(href)
    }
  >
    {body}
  </Markdown>
);
}

What it reads

Blocks: # and underlined headings, paragraphs, fenced code with a language, > quotes, - and 1. lists (nested, and an ordered list keeps its first number), GFM tables with :---: alignment, --- rules, and an image on its own line.
Inline: **bold**, *italic*, ~~strikethrough~~, `code`, [links](url), <https://…> and bare URLs, and line breaks made with two trailing spaces or a backslash.

To get at the parsed tree, for example to build an excerpt, use parseMarkdown(source) and parseInline(text), which are exported too.

Differences from the web

A string, not MDX. On the web, MDX compiles at build time and can use components as tags. On a phone, Markdown parses plain Markdown when it renders. Raw HTML and MDX tags show up as text.
No heading anchors. Headings are announced as headers with their level, but they don't get link anchors.
Images are drawn with Media at full width. An image inside a sentence shows its alt text.

API reference

Prop	Type	Default	Description
children	string		The Markdown source. Required.
onLinkPress	(href: string) => void		Called when a link is tapped. Without it, Linking.openURL opens the link.

Markdown also takes every Flex prop for its column, such as gap, padding or maxWidth.