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

Host app integration — providers, toasts, tab bars & navigation

Use this section when the package runs inside another app (Fieldr or any app with its own navigation, toasts and providers) and chat works on one screen but toasts, calls or taps misbehave elsewhere.

Providers the package adds

ProviderChatProvider propTurn off when
SafeAreaProviderwithSafeAreaYour root already has one (Fieldr)
GestureHandlerRootViewwithGestureRootYour root already has one
<Toast /> hostwithToastYour app mounts its own <Toast /> (Fieldr)
NavigationContainerChatNavigator withContainerChat is a screen in your navigator

Toasts — withToast={false}

The package still calls Toast.show(...) (success, error, info, and notification for the in-app banner), so your app's <Toast config={toastConfig} /> must be mounted and must have a notification entry (text1 = title, text2 = body, onPress opens the conversation). See Fieldr's toastConfig.tsx.

Tab bars that float over the screen

Set ui.conversationList.fabBottomInset to the tab bar height (Fieldr: 70, matching TAB_BAR_HEIGHT), otherwise the FAB and the last rows hide behind it.

One global config

configureChat / ChatProvider config write one global config. Two screens with different ui.styles or flags overwrite each other in mount order. Keep per-screen configs identical except for keys you deliberately change, and keep ui.styles in one place (Fieldr's useScopedChatConfig.ts).

One CallProvider

ChatNavigator mounts one. An app-wide CallProvider (for calls from any screen) must only render while no ChatNavigator is mounted — Fieldr tracks this with chatNavigatorPresence.ts.

Push listeners in the host

Host FCM / Notifee listeners must skip isRealtimexPush(extractPushData(message)) and forward the launch notification (openRealtimexNotification / handleRealtimexNotifeeEvent). See Fieldr's GlobalNotificationListener.tsx.

Logout and navigation resets

Call logoutChatSession() before dropping the host token. Post-login navigation.reset(...) must keep an open ActiveCallScreen route.

What the package does not require

  • Installing Lexical, DOMPurify, Zustand, axios or any bundled library in the host app.
  • Any MainActivity, MainApplication or AppDelegate code besides FirebaseApp.configure().
  • Copying native files from the package into the app.
PreviousProduction integration pattern (Fieldr)NextEnvironment variables

On this page

Providers the package addsToasts — withToast={false}Tab bars that float over the screenOne global configOne CallProviderPush listeners in the hostLogout and navigation resetsWhat the package does not require
Back to top