EnrichedText

EnrichedText is a read-only component that renders rich text from an HTML string. It accepts the same HTML format produced by EnrichedTextInput.

Reference

import { EnrichedText } from 'react-native-enriched-html';

function App() {
  return (
    <EnrichedText style={{ fontSize: 16 }}>
      {'<p>Hello <b>world</b></p>'}
    </EnrichedText>
  );
}

Type definitions

interface EnrichedTextProps extends ViewProps {
  ref?: RefObject<EnrichedTextInstance | null>;
  children: string;
  style?: TextStyle;
  htmlStyle?: EnrichedTextHtmlStyle;
  useHtmlNormalizer?: boolean;
  sanitizationConfig?: SanitizationConfig;
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
  numberOfLines?: number;
  selectable?: boolean;
  selectionColor?: ColorValue;
  allowFontScaling?: boolean;
  onLinkPress?: (event: OnLinkPressEvent) => void;
  onMentionPress?: (event: OnMentionPressEvent) => void;
}

Props

All props are optional except children.

allowFontScaling

If true, the text respects the system's accessibility font scaling settings.

Type	Default	Platforms
boolean	true	Android, iOS

children

Required

The HTML string to render. Accepts the HTML format produced by EnrichedTextInput. See Supported tags for the full tag set.

Type	Default	Platforms
string	-	Android, iOS, Web

style

Standard React Native TextStyle applied to the text.

Type	Default	Platforms
TextStyle	-	Android, iOS, Web

htmlStyle

Customizes styles of HTML elements, including press colors for interactive elements. See EnrichedTextHtmlStyle.

Type	Default	Platforms
EnrichedTextHtmlStyle	-	Android, iOS, Web

useHtmlNormalizer

If true, external HTML (for example from Google Docs, Word, or web pages) is normalized before rendering. This converts arbitrary HTML into the canonical tag subset that the enriched parser understands. See Normalization.

Type	Default	Platforms
boolean	true	Android, iOS, Web

sanitizationConfig

Web-only configuration for the HTML sanitization step applied to children before rendering.

interface SanitizationConfig {
  linkRegex?: RegExp;
}

• linkRegex - a regular expression deciding which link URIs survive sanitization.

caution

linkRegex maps directly to DOMPurify's ALLOWED_URI_REGEXP, so it replaces the default allow-list rather than extending it. Because this regex affects all URI-containing attributes (e.g. src in <img>), remember to keep the standard protocols you still want to permit.

<EnrichedText
  sanitizationConfig={{
    // Permit the usual protocols plus a custom "custom://" scheme.
    linkRegex:
      /^(?:(?:(?:f|ht)tps?|mailto|tel|custom):|[^a-z]|[a-z+.-]+(?:[^a-z+.:-]|$))/i,
  }}
>
  {'<p><a href="custom://item/42">link</a></p>'}
</EnrichedText>

Type	Default	Platforms
SanitizationConfig	-	Web

ellipsizeMode

How the text should be truncated when numberOfLines is set and the text overflows.

• head - truncates at the beginning, e.g. ...wxyz
• middle - truncates in the middle, e.g. ab...yz
• tail - truncates at the end, e.g. abcd...
• clip - clips the text without inserting an ellipsis

Type	Default	Platforms
'head' | 'middle' | 'tail' | 'clip'	'tail'	Android, iOS

note

On Android, when numberOfLines is set to a value higher than 1, only tail works correctly.

numberOfLines

Limits the number of displayed lines. Set to 0 for unlimited lines.

Type	Default	Platforms
number	0	Android, iOS

selectable

If true, the text can be selected by the user (for example for copy/paste).

Type	Default	Platforms
boolean	false	Android, iOS, Web

selectionColor

The color of the text selection highlight.

Type	Default	Platforms
color	system default	Android, iOS, Web

onLinkPress

Called when the user presses a link element. Receives an OnLinkPressEvent containing the link's URL. See Links for more on how links are created and detected.

interface OnLinkPressEvent {
  url: string;
}

Type	Platforms
(event: OnLinkPressEvent) => void	Android, iOS, Web

onMentionPress

Called when the user presses a mention element. Receives an OnMentionPressEvent with the mention's text, indicator character, and custom attributes. See Mentions for more on how mentions are created.

interface OnMentionPressEvent {
  text: string;
  indicator: string;
  attributes: Record<string, string>;
}

Type	Platforms
(event: OnMentionPressEvent) => void	Android, iOS, Web

EnrichedTextHtmlStyle type

Extends HtmlStyle with additional press-state styling for interactive elements. All properties from HtmlStyle are supported except a and mention, which are replaced by the extended versions below.

interface EnrichedTextHtmlStyle extends Omit<HtmlStyle, 'a' | 'mention'> {
  a?: {
    color?: ColorValue;
    textDecorationLine?: 'underline' | 'none';
    pressColor?: ColorValue;
  };
  mention?:
    | Record<string, EnrichedTextMentionStyleProperties>
    | EnrichedTextMentionStyleProperties;
}

interface EnrichedTextMentionStyleProperties {
  color?: ColorValue;
  backgroundColor?: ColorValue;
  textDecorationLine?: 'underline' | 'none';
  pressColor?: ColorValue;
  pressBackgroundColor?: ColorValue;
}

a (link)

Inherits all properties from HtmlStyle's a and adds:

• pressColor - the color of the link text while it is being pressed. Takes a color value.

mention

Inherits all properties from HtmlStyle's mention and adds:

• pressColor - the color of the mention text while it is being pressed. Takes a color value.
• pressBackgroundColor - the background color of the mention while it is being pressed. Takes a color value.

Same as in HtmlStyle, if only a single config is given the style applies to all mention types. To style each indicator separately, pass a record with indicators as keys and configs as values. Use the 'default' key for a fallback style applied to any indicator without its own config.

Remarks

• EnrichedText is read-only. Use EnrichedTextInput when the user needs to edit content.
• Sanitizing HTML is your responsibility. See Core concepts.