RealTimeX
Sign inStart for free
RealTimeXMobile Package
Introduction5-minute overviewFeaturesHow the package worksGlossary
Requirements & dependenciesBackend credentialsInstallation step by stepTutorial — your first chat appProject config fileApp entry — index.jsQuick start — minimum working chatComplete ChatScreen example
Native configuration (iOS & Android)Firebase, APNs & backend setup
Navigation — embedding the chatSession, auth & Socket.IOPermissions & access controlAudio & video callingPush notificationsMentions viewRich-text messages (WebView editor)Total unread count
Customization — four waysDefault component fallback (important)Which slots are wiredCustomization examples (Case 1–4)UI feature flags & copy (ui)Chat info (group + DM)Style overrides (ui.styles)Render props (ChatProvider)Theme, fonts & appearance
ChatProvider props referenceconfigureChat options referenceHooks & storeCallbacks referenceAPI query paramsAll exports
Production integration pattern (Fieldr)Host app integration — providers, toasts, tab bars & navigationEnvironment variablesLocal package / monorepo (Metro)
TroubleshootingSetup checklistArchitectureDocumentation & file mapPackage development (maintainers)License
Mobile packageFeatures & Guides

Rich-text messages (WebView editor)

The composer (ui.chatRoom.composer.richText, default true) and the Canvas editor use a Lexical editor that runs inside react-native-webview, with a native toolbar (bold, italic, underline, strikethrough, code, link, headings, bullet / numbered lists, alignment) and typeahead menus for @ mentions, # channels and : emoji.

Installation — host app

WhoWhat to install
Your appreact-native-webview (already a chat peer) — nothing else
Lexical / DOMPurify in your app's package.jsonNothing — pre-built into src/richEditor/editorHtml.generated.ts
This repository (maintainers)lexical, @lexical/*, dompurify, esbuild as devDependencies; rebuild with npm run build:rich-editor

How it is built (maintainers)

FilePurpose
rich-editor/src/main.tsEditor entry (vanilla Lexical), message bridge to React Native
rich-editor/src/nodes.tsMention / channel / emoji nodes
rich-editor/src/sanitize.tsDOMPurify config for HTML in and out
rich-editor/src/theme.ts, styles.cssEditor theme classes and CSS
scripts/build-rich-editor.jsesbuild bundle → one HTML string
src/richEditor/editorHtml.generated.tsGenerated (RICH_EDITOR_HTML) — do not edit; re-run npm run build:rich-editor after changing rich-editor/
src/richEditor/RichTextEditor.tsx, RichTextToolbar.tsx, RichTypeaheadMenu.tsxThe React Native side (internal, not exported)

How formatted messages are stored

The backend stores one field: content. Plain messages are plain text; formatted messages are sanitized HTML — the same wire format as the web composer, so messages look the same on both. Received HTML is converted to native Text runs by RichMessageText (headings, lists, quotes, code, links, mention / channel chips) — no WebView per bubble.

Set richText: false for a plain TextInput composer; received formatted messages still render.

PreviousMentions viewNextTotal unread count

On this page

Installation — host appHow it is built (maintainers)How formatted messages are stored
Back to top