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

Local package / monorepo (Metro)

The package ships TypeScript source, so Metro compiles it directly — no build step. When you install it from a local path (portal:, file:, link:) or a monorepo, Metro must watch the real package folder, resolve peers from your app's node_modules, and ignore the package's own node_modules (otherwise two copies of React / React Native load):

javascriptmetro.config.js
1// metro.config.js (host app)2const fs = require('fs');3const path = require('path');4const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');5 6const appNodeModules = path.resolve(__dirname, 'node_modules');7const linked = path.resolve(appNodeModules, '@realtimexsco/live-chat-react-native');8const chatPkg = fs.existsSync(linked) ? fs.realpathSync(linked) : linked;9 10module.exports = mergeConfig(getDefaultConfig(__dirname), {11  watchFolders: [chatPkg],12  resolver: {13    nodeModulesPaths: [appNodeModules],14    extraNodeModules: {'@realtimexsco/live-chat-react-native': chatPkg},15    blockList: [new RegExp(`${chatPkg.replace(/[/\\]/g, '[/\\\\]')}/node_modules/.*`)],16  },17});
KeyWhy
watchFoldersMetro picks up edits in the real package folder
nodeModulesPathsPeers resolve from the app
extraNodeModulesThe package name maps to the real folder
blockListNever crawl the package repo's own node_modules (it's also a demo app)

Fieldr's metro.config.js adds three things for its own dependencies: VideoSDK modules mapped to the app's copies in extraNodeModules + a resolveRequest that resolves them from the app, unstable_conditionNames: ['react-native', 'require'], and CommonJS aliases for axios, redux-saga and react-native-screens.

Keep transformer.allowOptionalDependencies enabled (the default in @react-native/metro-config) so the optional native peers can be missing.

After native changes in the package (Android library, iOS pod), rebuild the app (pod install, Gradle) — a Metro reload is not enough.

PreviousEnvironment variablesNextTroubleshooting