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

UI feature flags & copy (ui)

Defaults live in DEFAULT_CHAT_UI (src/config/ui.config.ts). Every flag defaults to true unless noted.

Conversation list — ui.conversationList

KeyDefaultPurpose
title"RealTime Chat"Header title
showSearchtrueSearch in header
showOverflowMenutrueOverflow button (opens the new-chat picker)
showNewChatFabtrueFloating new-chat button
showGlobalMessageSearchtrue"Search messages" row while list search is open
showNotificationSettingstrueHeader bell → NotificationSettingsScreen
showMentionstrueHeader @ button → MentionsScreen
fabBottomInset0Height (dp) of host UI floating over the list bottom (e.g. a floating tab bar); lifts the FAB and list padding

Room header — ui.chatRoom.header

KeyDefaultPurpose
showBack, showAvatar, showSubtitletrueHeader pieces
openInfoOnHeaderPresstrueTap title / avatar → chat info
showSearchtrueIn-chat search
showVideoCall, showVoiceCalltrueCall buttons (still subject to admin gates — denied buttons stay visible but dimmed)
showOverflowMenutrueRoom options menu
onVideoCallPress(ctx), onVoiceCallPress(ctx)—Return true to handle the tap yourself and skip the built-in call

ctx (ChatRoomActionContext): { conversationId, isGroup, receiverId?, title }.

Message view — ui.chatRoom.view

KeyDefault
showTypingIndicatortrue
showReactionstrue
emptyStateText"Messages are end-to-end encrypted. Say hello 👋"
showSenderNamesInGroupstrue
showSenderAvatarsInGroupsfalse
showSenderNamesInDmfalse
showSenderAvatarsInDmfalse
showOwnSenderInfofalse (also show name / avatar on your own messages)
senderAvatarSize28

Composer — ui.chatRoom.composer

KeyDefaultPurpose
placeholder"Message"Input placeholder
richTexttrueRich-text WebView editor with toolbar, @mentions, #channels, : emoji; false → plain TextInput
showEmojiButton, showAttachButton, showCameraShortcut, showMicPlaceholdertrueComposer buttons
attachments.camera, .gallery, .document, .audiotrueAttachment sheet entries

A single MessageComposer instance also accepts ui={{ showEmojiButton: false, attachments: { audio: false } }}.

Message long-press actions — ui.chatRoom.messageActions

reply, thread, react, forward, star, pin, edit, editCaption, delete — set false to hide. Admin settings also apply: pin disappears when the workspace pin cap is 0, thread when threads are off, edit when group permissions forbid it.

Room options menu — ui.chatRoom.roomOptions

info, media, search, pinned, starred, canvas, calls, recordings, notifications, clear, block, report, exit, delete — set false to hide.

typescript
1configureChat({2  ui: {3    conversationList: {title: 'Messages', showNewChatFab: false},4    chatRoom: {5      header: {showSearch: false},6      messageActions: {forward: false, thread: false},7      roomOptions: {report: false, canvas: false},8    },9  },10});
PreviousCustomization examples (Case 1–4)NextChat info (group + DM)

On this page

Conversation list — ui.conversationListRoom header — ui.chatRoom.headerMessage view — ui.chatRoom.viewComposer — ui.chatRoom.composerMessage long-press actions — ui.chatRoom.messageActionsRoom options menu — ui.chatRoom.roomOptions
Back to top