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 packageGetting Started

Quick start — minimum working chat

tsxsrc/screens/ChatScreen.tsx
1// src/screens/ChatScreen.tsx2import React from 'react';3import {ChatNavigator, ChatProvider} from '@realtimexsco/live-chat-react-native';4import {chatConfig} from '../configs/chat.config';5 6export default function ChatScreen() {7  return (8    <ChatProvider config={chatConfig}>9      <ChatNavigator />10    </ChatProvider>11  );12}

With autoConnect (default true), ChatProvider restores a persisted chat session or bootstraps one from accessToken, connects Socket.IO, fetches effective settings and starts push handling. Equivalent boot-time form:

tsxApp.tsx
1// App.tsx2import {configureChat, ChatProvider, ChatNavigator} from '@realtimexsco/live-chat-react-native';3import {chatConfig} from './src/configs/chat.config';4 5configureChat(chatConfig); // once, at module load6 7export default function App() {8  return (9    <ChatProvider>10      <ChatNavigator />11    </ChatProvider>12  );13}
PreviousApp entry — index.jsNextComplete ChatScreen example