Tutorial — your first chat app

1. Create project

shell

1npx @react-native-community/cli@latest init MyChatApp2cd MyChatApp

2. Install

shell

1npm install @realtimexsco/live-chat-react-native2# + every chat peer from "Installation step by step → 1"3npm install @videosdk.live/react-native-sdk@^0.6.0 @videosdk.live/react-native-incallmanager@^0.1.34npm install @notifee/react-native react-native-callkeep react-native-voip-push-notification   # optional5cd ios && pod install && cd ..

3. File structure

code

1MyChatApp/2├── index.js                              ← VideoSDK register + push handlers3├── App.tsx                               ← providers + navigation4├── babel.config.js                       ← react-native-worklets/plugin5├── firebase.json                         ← optional iOS foreground option6├── android/7│   ├── build.gradle                      ← google-services classpath8│   └── app/9│       ├── build.gradle                  ← google-services plugin10│       ├── google-services.json11│       └── src/main/AndroidManifest.xml  ← supportsPictureInPicture12├── ios/13│   ├── Podfile                           ← setup_permissions + Broadcast target14│   ├── MyChatApp/15│   │   ├── AppDelegate.swift             ← FirebaseApp.configure()16│   │   ├── Info.plist                    ← usage strings, background modes, RTC keys17│   │   ├── MyChatApp.entitlements        ← aps-environment, App Group18│   │   └── GoogleService-Info.plist19│   └── MyChatAppBroadcast/               ← screen share (optional)20└── src/21    ├── configs/chat.config.ts22    └── screens/ChatScreen.tsx

4. Native files

Apply every file in the Native file cheat sheet, then cd ios && pod install.

5. babel.config.js

javascript

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

6. src/configs/chat.config.ts

typescript

1import type {ConfigureChatOptions} from '@realtimexsco/live-chat-react-native';2 3let hostToken = ''; // replace with your auth store4export const setHostToken = (token: string) => {5  hostToken = token;6};7 8export const chatConfig: ConfigureChatOptions = {9  apiUrl: 'https://realtimex.softwareco.com/api/v1',10  socketUrl: 'https://realtimex.softwareco.com',11  clientId: 'YOUR_CLIENT_ID',12  accessToken: () => hostToken,13  callUri: 'https://realtimex.softwareco.com/api/v2',14};

7. index.js

The "host without its own push handlers" version from App entry — index.js.

8. src/screens/ChatScreen.tsx

tsx

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

9. App.tsx

tsx

1import React from 'react';2import ChatScreen from './src/screens/ChatScreen';3 4export default function App() {5  return <ChatScreen />;6}

ChatProvider supplies safe area, gesture root and toast; ChatNavigator supplies its own NavigationContainer. When the app grows its own navigator, switch to Nested inside your own navigator.

10. Run

shell

1npm run start2npm run ios        # device recommended for calls / PiP / push3npm run android

Tutorial — your first chat app

1. Create project

shell

1npx @react-native-community/cli@latest init MyChatApp2cd MyChatApp

2. Install

shell

1npm install @realtimexsco/live-chat-react-native2# + every chat peer from "Installation step by step → 1"3npm install @videosdk.live/react-native-sdk@^0.6.0 @videosdk.live/react-native-incallmanager@^0.1.34npm install @notifee/react-native react-native-callkeep react-native-voip-push-notification   # optional5cd ios && pod install && cd ..

3. File structure

code

1MyChatApp/2├── index.js                              ← VideoSDK register + push handlers3├── App.tsx                               ← providers + navigation4├── babel.config.js                       ← react-native-worklets/plugin5├── firebase.json                         ← optional iOS foreground option6├── android/7│   ├── build.gradle                      ← google-services classpath8│   └── app/9│       ├── build.gradle                  ← google-services plugin10│       ├── google-services.json11│       └── src/main/AndroidManifest.xml  ← supportsPictureInPicture12├── ios/13│   ├── Podfile                           ← setup_permissions + Broadcast target14│   ├── MyChatApp/15│   │   ├── AppDelegate.swift             ← FirebaseApp.configure()16│   │   ├── Info.plist                    ← usage strings, background modes, RTC keys17│   │   ├── MyChatApp.entitlements        ← aps-environment, App Group18│   │   └── GoogleService-Info.plist19│   └── MyChatAppBroadcast/               ← screen share (optional)20└── src/21    ├── configs/chat.config.ts22    └── screens/ChatScreen.tsx

4. Native files

Apply every file in the Native file cheat sheet, then cd ios && pod install.

5. babel.config.js

javascript

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

6. src/configs/chat.config.ts

typescript

1import type {ConfigureChatOptions} from '@realtimexsco/live-chat-react-native';2 3let hostToken = ''; // replace with your auth store4export const setHostToken = (token: string) => {5  hostToken = token;6};7 8export const chatConfig: ConfigureChatOptions = {9  apiUrl: 'https://realtimex.softwareco.com/api/v1',10  socketUrl: 'https://realtimex.softwareco.com',11  clientId: 'YOUR_CLIENT_ID',12  accessToken: () => hostToken,13  callUri: 'https://realtimex.softwareco.com/api/v2',14};

7. index.js

The "host without its own push handlers" version from App entry — index.js.

8. src/screens/ChatScreen.tsx

tsx

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

9. App.tsx

tsx

1import React from 'react';2import ChatScreen from './src/screens/ChatScreen';3 4export default function App() {5  return <ChatScreen />;6}

ChatProvider supplies safe area, gesture root and toast; ChatNavigator supplies its own NavigationContainer. When the app grows its own navigator, switch to Nested inside your own navigator.

10. Run

shell

1npm run start2npm run ios        # device recommended for calls / PiP / push3npm run android