Skip to content

TEXT_API_REFERENCE.md

Latest commit

 

History

History
156 lines (106 loc) · 5.58 KB

TEXT_API_REFERENCE.md

File metadata and controls

156 lines (106 loc) · 5.58 KB
Raw

EnrichedText API Reference

Props

allowFontScaling

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

Type Default Value Platform
bool true iOS, Android

children

The HTML string to render. Accepts the HTML format produced by EnrichedTextInput.

Type Default Value Platform
string - iOS, Android, Web

style

Standard React Native TextStyle applied to the text.

Type Default Value Platform
TextStyle - iOS, Android, Web

htmlStyle

A prop for customizing styles of HTML elements, including press colors for interactive elements.

Type Default Value Platform
EnrichedTextHtmlStyle - iOS, Android, Web

useHtmlNormalizer

If true, external HTML (e.g. from Google Docs, Word, web pages) will be normalized before rendering. This converts arbitrary HTML into the canonical tag subset that the enriched parser understands.

Type Default Value Platform
bool true iOS, Android, 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 Value Platform
'head' | 'middle' | 'tail' | 'clip' 'tail' iOS, Android, Web

Note

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

Note

On web, truncation runs on the client after hydration, which can cause a flash under SSR. See Web Support.

numberOfLines

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

Type Default Value Platform
number 0 iOS, Android, Web

selectable

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

Type Default Value Platform
bool false iOS, Android, Web

selectionColor

The color of the text selection highlight.

Type Default Value Platform
color system default iOS, Android, Web

onLinkPress

Called when the user presses a link element. Receives an OnLinkPressEvent containing the link's URL.

interface OnLinkPressEvent {
  url: string;
}
Type Default Value Platform
(event: OnLinkPressEvent) => void - iOS, Android, Web

onMentionPress

Called when the user presses a mention element. Receives an OnMentionPressEvent with the mention's text, indicator character, and custom attributes.

interface OnMentionPressEvent {
  text: string;
  indicator: string;
  attributes: Record<string, string>;
}
Type Default Value Platform
(event: OnMentionPressEvent) => void - iOS, Android, 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.