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

Installation step by step

1. Install the package and peers

shell
1npm install @realtimexsco/live-chat-react-native2# npm install @realtimexsco/live-chat-react-native

Chat peers (skip any you already have at a compatible version):

shell
1npm install \2  @react-native-async-storage/async-storage@^3.1.1 \3  @react-native-clipboard/clipboard@^1.16.3 \4  @react-native-community/netinfo@^12.0.1 \5  @react-native-community/push-notification-ios@^1.12.0 \6  @react-native-documents/picker@^12.0.1 \7  @react-native-firebase/app@^25.0.0 \8  @react-native-firebase/messaging@^25.0.0 \9  @react-native-masked-view/masked-view@^0.3.2 \10  @react-navigation/bottom-tabs@^7.18.13 \11  @react-navigation/native@^7.3.13 \12  @react-navigation/stack@^7.10.16 \13  @shopify/flash-list@^2.3.2 \14  react-native-config@^1.6.1 \15  react-native-device-info@^15.0.2 \16  react-native-gesture-handler@^3.1.0 \17  react-native-heic-converter@^1.3.3 \18  react-native-image-crop-picker@^0.51.1 \19  react-native-keyboard-aware-scroll-view@^0.9.5 \20  react-native-permissions@^5.6.0 \21  react-native-reanimated@^4.5.2 \22  react-native-responsive-screen@^1.4.2 \23  react-native-safe-area-context@^5.8.0 \24  react-native-screens@^4.15.0 \25  react-native-svg@^15.15.5 \26  react-native-toast-message@^2.4.0 \27  react-native-webview@^14.0.1 \28  react-native-worklets@^0.12.0 \29  socket.io-client@^4.8.3

Calling peers (only if you use calls):

shell
npm install @videosdk.live/react-native-sdk@^0.6.0 @videosdk.live/react-native-incallmanager@^0.1.3

Optional native peers:

shell
1npm install @notifee/react-native                                        # Android full-screen calls2npm install react-native-callkeep react-native-voip-push-notification   # iOS CallKit / PushKit calls

2. Native install

shell
cd ios && pod install && cd ..

The iOS pod RealtimexLiveChat and the Android library android-screenshare/ are autolinked (declared in the package's react-native.config.js). Then do the per-app native steps in Native configuration.

3. Babel — babel.config.js

react-native-reanimated 4 needs the Worklets Babel plugin, listed last:

javascriptbabel.config.js
1// babel.config.js2module.exports = {3  presets: ['module:@react-native/babel-preset'],4  plugins: ['react-native-worklets/plugin'],5};

4. Verify install

shell
1npm ls react-native                                  # one copy2grep RealtimexLiveChat ios/Podfile.lock                # iOS pod autolinked3ls node_modules/@realtimexsco/live-chat-react-native/src/index.ts

5. Configure, wire and run

Create src/configs/chat.config.ts, wire index.js, render ChatProvider + ChatNavigator, then:

shell
npm run ios       # or: yarn android

No .npmrc or private token is needed — the package is on the public npm registry.

PreviousBackend credentialsNextTutorial — your first chat app

On this page

1. Install the package and peers2. Native install3. Babel — babel.config.js4. Verify install5. Configure, wire and run
Back to top