How the package works

This chapter explains the moving parts once, so the setup steps later make sense.

The building blocks

Building block	What it is	Where you use it
`ChatProvider`	A React component that starts the chat session, connects the socket, loads workspace settings, starts push handling and provides theme, safe area, gesture root and toasts	Wrap your chat screen (or your whole app) in it
`ChatNavigator`	A ready-made navigation stack with every chat screen (list, room, info, groups, search, mentions, calls, notification settings). It also mounts `CallProvider`	Render it inside `ChatProvider`
Config (`configureChat` / `ChatProvider config`)	Your credentials (`apiUrl`, `socketUrl`, `clientId`, `accessToken`, `callUri`) plus theme, fonts and UI options	`src/configs/chat.config.ts`
Chat session	The package exchanges your user token (the host token) for a chat token and stores it	Automatic; or `bootstrapChatSession()`
Socket	A Socket.IO connection that delivers messages, typing, receipts, calls and notifications in real time	Automatic; `socketService` for advanced use
Effective settings	Workspace rules from `GET /settings/effective` — which features are on, limits, group policy	Automatic; `useEffectiveSettings()` to read them
`CallProvider` + `ActiveCallScreen`	The incoming-call overlay, call signaling and the in-call screen	Included in `ChatNavigator`; mount yourself for app-wide calls
Push runtime	FCM token registration, foreground banners, notification taps, ringing calls	`configurePushNotifications()` + background handlers in `index.js`
Native modules	iOS pod `RealtimexLiveChat` and Android library `android-screenshare/` (permissions, Picture-in-Picture, screen share, notification channels, VoIP)	Autolinked — you only add per-app settings

What happens when the app starts

text

1index.js2  ├─ VideoSDK register()                       (calls)3  ├─ configurePushNotifications({...})         (push options; iOS CallKit listeners)4  └─ background handlers (FCM + Notifee)       (pushes while the app is closed)5        ↓6App renders <ChatProvider config={chatConfig}>7  ├─ restore saved chat session, or exchange the host accessToken for a chat token8  ├─ connect Socket.IO  (socketUrl + /connection)9  ├─ GET /settings/effective  → feature gates, limits, group policy10  └─ push: GET /push/config → permission prompt → register FCM token11        ↓12<ChatNavigator> shows ConversationListScreen → ChatRoomScreen → …

What lives where

Place	Runs	You write
`index.js`	Before any UI, also when a push wakes the app	VideoSDK `register()`, `configurePushNotifications`, background handlers
`src/configs/chat.config.ts`	Imported by your screens	Credentials and options
Your chat screen	When the user opens chat	`<ChatProvider><ChatNavigator /></ChatProvider>`
Native project files	At build time	`Info.plist`, entitlements, `AndroidManifest.xml`, Gradle, Podfile
The package	Everywhere else	Nothing — screens, stores, socket, push routing and native modules ship inside it

How the package works

This chapter explains the moving parts once, so the setup steps later make sense.

The building blocks

Building block	What it is	Where you use it
`ChatProvider`	A React component that starts the chat session, connects the socket, loads workspace settings, starts push handling and provides theme, safe area, gesture root and toasts	Wrap your chat screen (or your whole app) in it
`ChatNavigator`	A ready-made navigation stack with every chat screen (list, room, info, groups, search, mentions, calls, notification settings). It also mounts `CallProvider`	Render it inside `ChatProvider`
Config (`configureChat` / `ChatProvider config`)	Your credentials (`apiUrl`, `socketUrl`, `clientId`, `accessToken`, `callUri`) plus theme, fonts and UI options	`src/configs/chat.config.ts`
Chat session	The package exchanges your user token (the host token) for a chat token and stores it	Automatic; or `bootstrapChatSession()`
Socket	A Socket.IO connection that delivers messages, typing, receipts, calls and notifications in real time	Automatic; `socketService` for advanced use
Effective settings	Workspace rules from `GET /settings/effective` — which features are on, limits, group policy	Automatic; `useEffectiveSettings()` to read them
`CallProvider` + `ActiveCallScreen`	The incoming-call overlay, call signaling and the in-call screen	Included in `ChatNavigator`; mount yourself for app-wide calls
Push runtime	FCM token registration, foreground banners, notification taps, ringing calls	`configurePushNotifications()` + background handlers in `index.js`
Native modules	iOS pod `RealtimexLiveChat` and Android library `android-screenshare/` (permissions, Picture-in-Picture, screen share, notification channels, VoIP)	Autolinked — you only add per-app settings

What happens when the app starts

text

1index.js2  ├─ VideoSDK register()                       (calls)3  ├─ configurePushNotifications({...})         (push options; iOS CallKit listeners)4  └─ background handlers (FCM + Notifee)       (pushes while the app is closed)5        ↓6App renders <ChatProvider config={chatConfig}>7  ├─ restore saved chat session, or exchange the host accessToken for a chat token8  ├─ connect Socket.IO  (socketUrl + /connection)9  ├─ GET /settings/effective  → feature gates, limits, group policy10  └─ push: GET /push/config → permission prompt → register FCM token11        ↓12<ChatNavigator> shows ConversationListScreen → ChatRoomScreen → …

What lives where

Place	Runs	You write
`index.js`	Before any UI, also when a push wakes the app	VideoSDK `register()`, `configurePushNotifications`, background handlers
`src/configs/chat.config.ts`	Imported by your screens	Credentials and options
Your chat screen	When the user opens chat	`<ChatProvider><ChatNavigator /></ChatProvider>`
Native project files	At build time	`Info.plist`, entitlements, `AndroidManifest.xml`, Gradle, Podfile
The package	Everywhere else	Nothing — screens, stores, socket, push routing and native modules ship inside it