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

Callbacks reference

Every callback the package calls in your code, in one place.

CallbackWhere you pass itSignatureWhen it runs
onSessionEndconfigureChat / ChatProvider config(event: ChatSessionEndEvent) => voidThe server ended the session (force logout, deactivated, banned, deleted, workspace deleted, revoked)
onChatSessionEnd(listener)Function call(listener: ChatSessionEndHandler) => () => voidSame as onSessionEnd; returns an unsubscribe function
onNotificationOpenedconfigurePushNotifications(target: NotificationOpenTarget) => voidEvery notification tap, before the package navigates
onForegroundNotificationconfigurePushNotifications(notification: ForegroundNotification) => booleanBefore a foreground notification is shown; return true to show it yourself
onVideoCallPress, onVoiceCallPressui.chatRoom.header(ctx: ChatRoomActionContext) => boolean | voidRoom header call buttons; return true to skip the built-in call
onAudioPress, onVideoPressui.chatInfo(ctx: ChatRoomActionContext) => boolean | voidChat info quick actions; return true if you handled it
onReadyChatNavigator() => voidThe internal NavigationContainer is ready (only with withContainer)
socketService.on(event, handler)Function callreturns () => voidEvery time the socket receives event
Render propsChatProvidersee Render propsWhen that area renders

ChatSessionEndEvent: { reason, message, code?, source } — reason is 'force_logout' | 'deactivated' | 'banned' | 'deleted' | 'workspace_deleted' | 'session_revoked', source is 'socket' | 'handshake' | 'rest', message is the short text also shown as a toast.

NotificationOpenTarget: {type: 'conversation', conversationId, isGroup?} | {type: 'thread', conversationId, threadRootId, isGroup?} | {type: 'call', callId, conversationId?}.

ForegroundNotification: the RealtimeX push data plus plain-text title and body.

ChatRoomActionContext: { conversationId, isGroup, receiverId?, title }.

typescriptsrc/configs/chat.config.ts
1// src/configs/chat.config.ts — wiring the main callbacks2import {configurePushNotifications, onChatSessionEnd} from '@realtimexsco/live-chat-react-native';3 4export const chatConfig = {5  // …credentials6  onSessionEnd: ({reason, message}) => {7    console.log('Chat session ended', reason, message);8  },9  ui: {10    chatRoom: {11      header: {12        onVideoCallPress: ({conversationId}) => {13          console.log('video call in', conversationId);14          return false; // false / undefined → the built-in call runs15        },16      },17    },18  },19};20 21const unsubscribe = onChatSessionEnd(event => console.log(event.source));
PreviousHooks & storeNextAPI query params