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

Render props (ChatProvider)

Pass on ChatProvider (or ChatCustomizationProvider). Read inside your own components with useChatCustomization().

PropWhereReceives
renderConversationItemConversation list rowConversationListRenderProps — conversation, index, peer, lastMessage, unreadCount, isOnline, isTyping, typingLabel, onPress, onLongPress
renderConversationListWhole listconversations, loading, renderDefaultItem(props), onEndReached, onRefresh, refreshing
renderHeaderRoom headerChatHeaderRenderProps — conversation, receiver, participants, isGroup, isOnline, isTyping, title, subtitle, avatarUri, onBack, onVideoCall, onVoiceCall, onHeaderPress, onSearch, onOverflow, videoCallGate, voiceCallGate
renderFooterComposerChatFooterRenderProps — text, setText, sendMessage, sending, disabled, replyMessage, cancelReply, openMediaPicker, openCamera, onTypingStart, onTypingStop, conversationId, isGroup, …
renderMessageEach messageMessageRenderProps — message, index, conversation, isOwnMessage, showAvatar, onPress, onLongPress, onReplyPress, onThreadPress, onReactionPress, …

renderAttachment, renderReaction, renderReply and renderThread are typed and accepted but not used by the built-in screens — customize those areas through renderMessage or ui.components.MessageBubble. When the user can't send (blocked, left, admins-only…), the composer status banner replaces renderFooter too.

PreviousStyle overrides (ui.styles)NextTheme, fonts & appearance