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

Which slots are wired

Every slot below is honored at runtime when passed in ui.components:

SlotWired inFallback when omittedProps
ConversationListHeadersrc/screen/chat/ConversationListScreen.tsxBuilt-in headertitle, searchOpen, search, onOpenSearch, onCloseSearch, onClearSearch, onChangeSearch, onOverflow, showSearch, showOverflowMenu, showMentions, onOpenMentions
ConversationListItemsrc/components/chat/ConversationListRow.tsxConversationListItemConversationListItemProps (conversation, loggedUserId, isOnline, isTyping, typingLabel, onPress)
ChatRoomHeadersrc/screen/chat/ChatRoomScreen.tsxChatRoomHeaderChatRoomHeaderProps
MessageComposersrc/screen/chat/ChatRoomScreen.tsxMessageComposerMessageComposerProps
MessageBubblesrc/components/chat/ChatMessageListItem.tsxMessageBubbleMessageBubbleProps
SharedMediaSectionsrc/screen/chat/ChatInfoScreen.tsxSharedMediaSection{ messages }
GroupPermissionsEditorsrc/screen/chat/ChatInfoScreen.tsxBuilt-in togglesvalue, onChange, editable, lockedKeys

Precedence when several apply to the same area:

AreaOrder (first match wins)
Conversation rowrenderConversationItem → ui.components.ConversationListItem → built-in
Whole listrenderConversationList → built-in list
Room headerin-chat search bar (while searching) → renderHeader → ui.components.ChatRoomHeader → built-in
Composercomposer status banner (user can't send) → renderFooter → ui.components.MessageComposer → built-in
MessagerenderMessage → ui.components.MessageBubble → built-in

Note

Replace everything: don't use ChatNavigator; register the exported screens in your own navigator (see Custom navigator) or build screens from the hooks.
PreviousDefault component fallback (important)NextCustomization examples (Case 1–4)