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 packageCustomization

Chat info (group + DM)

ui.chatInfo configures ChatInfoScreen for groups and 1:1 chats.

AreaKeys (defaults)
CopygroupTitle ("Group info"), dmTitle ("Contact info"), aboutLabel ("About"), noDescriptionText ("No description"), adminBadgeLabel ("Group Admin"), descriptionSectionLabel ("Group description"), permissionsSectionLabel ("Group permissions")
Headerheader.showBack, showEdit, showSearch, icons.back (arrow-back) / edit (create-outline) / search (search)
Quick actionsquickActions.message / audio / video / search — each { show, icon, label }
Sectionssections.description, createdBy, media, permissions, members, danger
Member toolbar (group)memberToolbar.showAdd, showSearch, icons.add / search / memberMenu
Danger actionsdangerActions.clear, exit, deleteGroup (group), block, unblock, deleteChat (DM), report — each { show, icon, label }
Member sheet (group)memberSheet.makeAdmin ("Make group admin"), dismissAdmin ("Dismiss as admin"), remove ("Remove from group") — each { show, icon, label }
Call handlersonAudioPress(ctx), onVideoPress(ctx) — return true if handled

Icons are names from the package SVG set (Ionicons-compatible, e.g. "chatbubble", "call", "trash-outline"); check a name with isIconName(name). Role rules still apply on top of these flags (only the owner manages admins, the owner can't be removed — see Group roles).

typescript
1configureChat({2  ui: {3    chatInfo: {4      dmTitle: 'Contact',5      quickActions: {video: {show: false}},6      sections: {permissions: false},7      dangerActions: {report: {show: false}, deleteChat: {label: 'Remove chat'}},8    },9  },10});
PreviousUI feature flags & copy (ui)NextStyle overrides (ui.styles)