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

Style overrides (ui.styles)

Styles merge on top of the built-ins (theme colors still drive the defaults). Only these region keys exist:

KeyRegions
conversationListcontainer, header, title, row, name, preview, time, badge, badgeText, fabWrap, fab
chatRoomcontainer, header, headerTitle, headerSubtitle, list, emptyState, emptyStateText
messagecontainer, senderName, senderAvatar, senderRow
message.sender (own) / message.receiver (peer)bubble, text, time, meta
composercontainer, inputWrap, input, sendButton
chatInfocontainer, header, headerTitle, hero, heroName, actionButton, actionIcon, actionLabel, card, dangerRow, dangerText, memberRow

Example: Case 3. The config is global — two screens passing different ui.styles overwrite each other (see Fieldr's useScopedChatConfig.ts).

PreviousChat info (group + DM)NextRender props (ChatProvider)