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

App entry — index.js

index.js runs before any UI — also when a push or a VoIP call launches the app in the background. Everything that must exist once per app goes here, before AppRegistry.registerComponent.

Host without its own push handlers:

javascriptindex.js
1// index.js2import {AppRegistry} from 'react-native';3import {4  configurePushNotifications,5  registerRealtimexBackgroundHandler,6} from '@realtimexsco/live-chat-react-native';7import App from './src/App';8import {name as appName} from './app.json';9 10// 1. Calling: register VideoSDK once, before any meeting UI.11try {12  require('@videosdk.live/react-native-sdk').register();13} catch {14  // calling peers not installed15}16 17// 2. Push options. On iOS this also attaches the CallKit / PushKit listeners,18//    so a call that launched the app is answered or declined before any UI.19configurePushNotifications({20  androidFullScreenCalls: true, // with @notifee/react-native21  onNotificationOpened: target => {22    // bring your chat tab forward; the package opens the room itself23  },24});25 26// 3. FCM background handler + Notifee background events.27registerRealtimexBackgroundHandler();28 29AppRegistry.registerComponent(appName, () => App);

Host with its own handlers (FCM's background handler and Notifee's background event handler can each be set only once per app — give RealtimeX events to the package first). This is Fieldr's index.js:

javascriptindex.js
1// index.js (Fieldr)2import notifee, {EventType} from '@notifee/react-native';3import messaging from '@react-native-firebase/messaging';4import {5  configurePushNotifications,6  handleRealtimexBackgroundMessage,7  handleRealtimexNotifeeEvent,8} from '@realtimexsco/live-chat-react-native';9import {AppRegistry} from 'react-native';10import 'react-native-gesture-handler';11import {enableScreens} from 'react-native-screens';12import {name as appName} from './app.json';13import App from './src/App';14import {15  queueOrHandlePushNotificationPress,16  queueOrOpenChatTab,17} from './src/screens/notification/pushNotificationNavigation';18 19try {20  const {register} = require('@videosdk.live/react-native-sdk');21  register();22} catch {}23 24enableScreens();25 26configurePushNotifications({27  androidFullScreenCalls: true,28  foregroundSystemNotifications: true,29  onNotificationOpened: target => {30    if (target.type !== 'call') {31      queueOrOpenChatTab();32    }33  },34});35 36messaging().setBackgroundMessageHandler(async message => {37  await handleRealtimexBackgroundMessage(message);38});39 40notifee.onBackgroundEvent(async event => {41  if (await handleRealtimexNotifeeEvent(event)) {42    return; // RealtimeX notification — handled by the package43  }44  if (event.type === EventType.PRESS) {45    queueOrHandlePushNotificationPress({46      data: event.detail.notification?.data,47      title: event.detail.notification?.title,48      body: event.detail.notification?.body,49    });50  }51});52 53AppRegistry.registerComponent(appName, () => App);

All configurePushNotifications options: Push notifications.

PreviousProject config fileNextQuick start — minimum working chat