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 packageIntegration Guide

Environment variables

Explicit configureChat / ChatProvider config values always win. When they are missing, the package reads these from react-native-config (the demo app's .env):

.env
1# .env2CHAT_API_URL=https://realtimex.softwareco.com/api/v1   # or BASE_URL3CHAT_SOCKET_URL=https://realtimex.softwareco.com4CHAT_CLIENT_ID=your-client-id5CHAT_ACCESS_TOKEN=host-jwt6VIDEO_AUDIO_CALL_URL=https://realtimex.softwareco.com/api/v2

In host apps, read your own keys and pass them explicitly (Fieldr reads Config.chatClientId):

typescriptsrc/configs/chat.config.ts
1// src/configs/chat.config.ts2import Config from 'react-native-config';3 4export const chatConfig = {5  apiUrl: Config.MY_CHAT_API_URL,6  socketUrl: Config.MY_CHAT_SOCKET_URL,7  clientId: Config.MY_CHAT_CLIENT_ID,8  accessToken: () => store.getState().auth.token,9};
PreviousHost app integration — providers, toasts, tab bars & navigationNextLocal package / monorepo (Metro)