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 packageOverview

Introduction

@realtimexsco/live-chat-react-native is a complete, ready-made chat experience for React Native apps on iOS and Android. You install it into your own app (the host app), give it your RealtimeX credentials, and it gives you the full chat UI: conversation list, chat rooms, groups, threads, attachments, rich text, mentions, audio and video calls, and push notifications.

This document is the complete guide to the package. It is written for developers who are new to the package — every step says which file to open, what to add, and why.

Who this guide is for

ReaderStart with
You are adding chat to an app for the first timeRequirements & dependencies, then Tutorial — your first chat app
You already have chat working and need calls or pushNative configuration (iOS & Android), Audio & video calling, Push notifications
You want to change the look and behaviorCustomization — four ways
You need a specific prop, hook or exportAPI Reference part
Something doesn't workTroubleshooting

What you will have at the end

  • A chat tab with the conversation list, 1:1 and group chats, threads, reactions, attachments, rich text and @mentions.
  • Audio and video calls with Picture-in-Picture and screen sharing.
  • Push notifications for messages, and a ringing call screen even when the app is closed.
  • Your brand colors, fonts and copy, with any part of the UI replaceable.

Conventions used in this document

ConventionMeaning
monospaceFile names, code, props and values exactly as you type them
MyChatAppPlaceholder for your Xcode target / app name. Replace it with yours
com.example.mychatappPlaceholder bundle id / application id
YOUR_CLIENT_IDYour RealtimeX client id from the dashboard
Required / OptionalWhether a step is needed for the package to work
FieldrThe reference host app (fieldr-2.0-mobile) that uses this package in production. Its real files are shown as examples

Note

Every API, prop and file name in this document exists in the package source (src/index.ts is the public surface). Nothing here is pseudo-code unless it is marked as a placeholder.

Before you begin

You should be comfortable with:

  • A React Native CLI app (not Expo Go — the package has native code).
  • Running the app from Xcode / npm run ios and Android Studio / npm run android.
  • A Firebase project (for push) and an Apple Developer account (for iOS push and calls).
Next5-minute overview

On this page

Who this guide is forWhat you will have at the endConventions used in this documentBefore you begin
Back to top