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 packageTroubleshooting & Reference

Setup checklist

☐ Package + chat peers installed; npm ls react-native shows one copy

☐ No Lexical / DOMPurify / Zustand added to the app (bundled or pre-built)

☐ pod install run; Podfile.lock contains RealtimexLiveChat

☐ react-native-worklets/plugin last in babel.config.js

☐ src/configs/chat.config.ts with apiUrl (ending /api/v1), socketUrl, clientId, accessToken, callUri

☐ ChatProvider + ChatNavigator rendered (withContainer={false} inside your navigator)

☐ Host JWT has email, or bootstrapChatSession({ email, name, hostAccessToken }) is called

☐ withToast={false} → host <Toast /> with a notification entry

☐ Floating tab bar → fabBottomInset

☐ logoutChatSession() on host logout, before the token is dropped

☐ Calls: VideoSDK peers, register() in index.js, callUri, supportsPictureInPicture (Android), usage strings + audio / voip / picture-in-picture (iOS)

☐ App-wide calls: ActiveCallScreen in the root stack, exactly one CallProvider mounted

☐ Screen share (iOS): Broadcast extension target, same App Group everywhere, RTCScreenSharingExtension = extension bundle id

☐ Push: Firebase files from the dashboard's project, Google Services plugin (Android), FirebaseApp.configure() + Push capability + remote-notification (iOS), APNs key in Firebase, index.js handlers, host listeners skip RealtimeX pushes

☐ iOS calls when killed / locked: CallKeep + VoIP push installed, voip mode, Apple VoIP card on the dashboard, camera / mic granted once

☐ Local install: Metro watchFolders, nodeModulesPaths, extraNodeModules, blockList

PreviousTroubleshootingNextArchitecture