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

Mentions view

The header @ button on the conversation list (ui.conversationList.showMentions, default true) opens MentionsScreen: every message that mentions the signed-in user — groups, DMs and thread replies — newest first, grouped by day.

PieceDetail
DataGET {apiUrl}/message/mentioned-messages?page=&limit=20; pull to refresh, pages on scroll
Live updatesSocket mention_created prepends a row (sent even for muted conversations)
TapOpens ChatRoomScreen focused on the message (focusMessageId), or the thread (threadRootId) when threads are enabled
Building your ownMentionRow (one row: mention, time, onSelect), fetchMentionedMessages(page?, limit?) → {list, hasMore}, type MentionedMessage
tsxsrc/screens/MyMentions.tsx
1// src/screens/MyMentions.tsx2import {fetchMentionedMessages, MentionRow} from '@realtimexsco/live-chat-react-native';3 4const {list, hasMore} = await fetchMentionedMessages(1);5// <MentionRow mention={list[0]} time="10:24" onSelect={m => openRoom(m)} />

A mention is recorded from the chips in the message content (<span data-mention-id="…">@Name</span>) or plain @Name text matching a member; the sender is never recorded.

PreviousPush notificationsNextRich-text messages (WebView editor)