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 packageAPI Reference

Hooks & store

The package's Zustand chat stores are internal; use these hooks from host code.

HookReturns
useChatSession()isAuthenticate, isSessionReady, chatToken, clientId, loggedUserId, user, loading, error, bootstrap(options), ensureSession(), reset(), logout()
useChatSocket()status ('idle' | 'connecting' | 'connected' | 'disconnected' | 'error'), isConnected, onlineUsers, error, appError, connect(), disconnect()
useConversations()conversations, loading, page, hasNext, searchQuery, activeConversationId, fetchConversations({page, search, append}), setActiveConversation(id)
useMessages()conversationId, conversation, messages, loading, sending, hasNext, cursor, fetchMessages(...), sendMessage({content, conversationId?, isGroup?, receiverId?, attachments?, replyTo?})
useChat(){ session, conversations, messages, socket } — all four above
useEffectiveSettings()settings, loading, fetched, refresh(), getGate(key), getCallRecordingGate(), getWhiteboardGate(), isGroupPermissionLocked(key)
useEffectiveSettingsOptional()Same, or null outside ChatProvider
useAdminFeatureGate(key){ visible, enabled, disabledReason }
useAppTheme()Theme / appearance (Theme)
useChatCustomization()Current render props
useCallStore(selector)Call state machine (Calling)
tsxsrc/components/ChatStatus.tsx
1// src/components/ChatStatus.tsx2import React from 'react';3import {Text} from 'react-native';4import {useChatSession, useChatSocket} from '@realtimexsco/live-chat-react-native';5 6export function ChatStatus() {7  const {isSessionReady, loggedUserId} = useChatSession();8  const {status} = useChatSocket();9  return <Text>{isSessionReady ? `${loggedUserId} · ${status}` : 'Signing in…'}</Text>;10}

Note

The exported selectors (selectSocketStatus, selectSocketError, selectSocketAppError, selectOnlineUsers, selectIsAuthenticate, selectIsSessionReady, selectSdkChatToken, selectLoggedUserId) and authActions belong to the package's internal store. They are not usable with react-redux's useSelector in your app — use the hooks above.
PreviousconfigureChat options referenceNextCallbacks reference