MarkdownTypography

Renders a markdown string natively, with theme-aware styling applied automatically. A thin wrapper around react-native-enriched-markdown's EnrichedMarkdownText — every native prop (parser flags, streaming, spoilers, context menus, and more) is passed straight through.

Styling comes from the theme by default (via useEnrichedMarkdownStyle), so a markdown string is the only required prop — no hook wiring needed.

Installation

MarkdownTypography requires react-native-enriched-markdown as a dependency:

npm install react-native-enriched-markdown

Basic Usage

import { MarkdownTypography } from '@multinaire/expo-ui';

<MarkdownTypography markdown={`# Hello\n\nSome **bold** and _italic_ text.`} />

Props

MarkdownTypography accepts every EnrichedMarkdownTextProps prop. The ones with theme-aware defaults:

Prop	Type	Default	Description
markdown	string	—	Raw markdown string to render.
markdownStyle	MarkdownStyle	theme default	Per-element style overrides merged on top of the theme-derived default.
selectionColor	ColorValue	colors.primary	Text selection highlight color.

Examples

Handling links

import { MarkdownTypography } from '@multinaire/expo-ui';
import { Linking } from 'react-native';

<MarkdownTypography
  markdown={content}
  onLinkPress={({ url }) => Linking.openURL(url)}
/>

Customizing styling

The component styles markdown from the theme automatically. To tweak a few elements, pass a partial markdownStyle — it is merged over the default:

<MarkdownTypography
  markdown={content}
  markdownStyle={{ h1: { color: 'red' } }}
/>

Advanced: reuse the style hook

Use useEnrichedMarkdownStyle directly when you need the resolved MarkdownStyle for your own EnrichedMarkdownText composition:

import { useEnrichedMarkdownStyle } from '@multinaire/expo-ui';
import { EnrichedMarkdownText } from 'react-native-enriched-markdown';

const { style } = useEnrichedMarkdownStyle();

<EnrichedMarkdownText markdown={content} markdownStyle={style} />;