5-minute overview

1. Install the package and its peers, then run pod install in ios/.
2. Native setup — Android: android:supportsPictureInPicture on MainActivity, Firebase files and the Google Services plugin. iOS: Info.plist usage strings and background modes, Push Notifications capability, FirebaseApp.configure(). Everything else (permissions, services, notification channels, PiP, VoIP) is autolinked from the package.
3. Create src/configs/chat.config.ts with apiUrl, socketUrl, clientId and the host user's accessToken.
4. Wire index.js — VideoSDK register(), configurePushNotifications(...) and the background push handlers, before AppRegistry.registerComponent.
5. Render <ChatProvider config={chatConfig}><ChatNavigator /></ChatProvider>. ChatNavigator owns the whole chat stack (list → room → info, new chat, groups, search, mentions, calls, notification settings). Omit any option → the package default is used.

1// src/screens/ChatScreen.tsx2import React from 'react';3import {ChatNavigator, ChatProvider} from '@realtimexsco/live-chat-react-native';4import {chatConfig} from '../configs/chat.config';5 6export default function ChatScreen() {7  return (8    <ChatProvider config={chatConfig}>9      <ChatNavigator />10    </ChatProvider>11  );12}

Do not pass placeholder components or empty render props for parts you want to keep default — simply leave those keys out.