ChatKitty
Search…
React Native Video/Voice Calls Quick Start
Build text chat and video/audio calls into your React Native application with ChatKitty

Installing the ChatKitty React Native SDK

To use the ChatKitty React Native Calls SDK, you'll need to add the ChatKitty React Native SDK NPM package to your React Native project. You'll also need the react-native-webrtc package installed to access the WebRTC APIs:
Yarn
NPM
1
yarn add react-native-chatkitty react-native-webrtc
Copied!
1
npm install react-native-chatkitty react-native-webrtc
Copied!

Initializing the ChatKitty React Native SDK with your API key

With your API key from the ChatKitty dashboard, you can initialize a new instance of the ChatKitty client:
1
import ChatKitty from 'react-native-chatkitty';
2
3
const kitty = ChatKitty.getInstance('YOUR CHATKITTY API KEY HERE');
Copied!

Starting a guest user session

You must create a user session before a user can begin chatting with other users using ChatKitty. A user session represents a secure bi-directional connection with ChatKitty servers allowing users to send and receive messages in real-time.
Before you learn about authenticating users with ChatKitty, you can create a guest user session. You can start a user session by passing a unique username to your ChatKitty client startSession() method. A username is a string that uniquely identifies a user within your application.
JavaScript
TypeScript
1
const result = await kitty.startSession({
2
username: '[email protected]'
3
});
4
5
if (result.succeeded) {
6
const session = result.session; // Handle session
7
}
8
9
if (result.failed) {
10
const error = result.error; // Handle error
11
}
Copied!
1
import {
2
failed,
3
StartedSessionResult,
4
succeeded,
5
} from 'react-native-chatkitty';
6
7
const result = await kitty.startSession({
8
username: '[email protected]',
9
});
10
11
if (succeeded<StartedSessionResult>(result)) {
12
const session = result.session; // Handle session
13
}
14
15
if (failed(result)) {
16
const error = result.error; // Handle error
17
}
Copied!

Initializing the Camera and Audio

Before you can begin a call, you'll need to initialize your device's camera in the ChatKitty.Calls context object.
1
await kitty.Calls.initialize({
2
media: { audio: true, video: true },
3
});
Copied!
After calling initialize(...), the ChatKitty.Calls object creates a WebRTC MediaSteam for your device's camera and is ready to start and answer calls.

Retrieving the local Media Stream

kitty.Calls.localStream exposes the React Native WebRTC MediaStream capturing video/audio from your device.
JavaScript
TypeScript
1
import React from 'react';
2
import { RTCView } from 'react-native-webrtc';
3
4
const Snippet = () => {
5
const localStream = kitty.Calls.localStream;
6
7
return (
8
localStream && (
9
<RTCView objectFit="cover" streamURL={localStream.toURL()} zOrder={1} />
10
)
11
);
12
};
Copied!
1
import React from 'react';
2
import { MediaStream, RTCView } from 'react-native-webrtc';
3
4
const Snippet = () => {
5
const localStream: MediaStream | null = kitty.Calls.localStream;
6
7
return (
8
localStream && (
9
<RTCView objectFit="cover" streamURL={localStream.toURL()} zOrder={1} />
10
)
11
);
12
};
Copied!

Displaying Media Streams

To display a MediaStream (local or remote), use the React Native WebRTC RTCView component.
1
<RTCView
2
style={styles.myStream}
3
objectFit="cover"
4
streamURL={stream.toURL()}
5
zOrder={1}
6
/>;
Copied!

Retrieving online users

You can fetch a list of other users that are online.
JavaScript
TypeScript
1
const result = await kitty.getUsers({ filter: { online: true } });
2
3
if (result.succeeded) {
4
const users = result.paginator.items;
5
}
Copied!
1
import {
2
GetUsersSucceededResult,
3
succeeded,
4
User,
5
} from 'react-native-chatkitty';
6
7
const result = await kitty.getUsers({ filter: { online: true } });
8
9
if (succeeded<GetUsersSucceededResult>(result)) {
10
const users: User[] = result.paginator.items;
11
}
Copied!

Observing user online/presence changes

You can listen to changes to user presence changes across your application - when users come online or go offline.
JavaScript
TypeScript
1
kitty.onUserPresenceChanged(async (user) => {
2
const presence = user.presence;
3
4
// Update online users list
5
});
Copied!
1
import { User, UserPresence } from 'react-native-chatkitty';
2
3
kitty.onUserPresenceChanged(async (user: User) => {
4
const presence: UserPresence = user.presence;
5
6
// Update online users list
7
});
Copied!

Observing call events

You can observe events related to calls by registering event listeners on the ChatKitty.Calls object.

On call invite

Called when another user invites the current user to a call.
JavaScript
TypeScript
1
kitty.Calls.onCallInvite((call) => {
2
// Inform the current user about the call then accept or reject the call
3
});
Copied!
1
import { Call } from 'react-native-chatkitty';
2
3
kitty.Calls.onCallInvite((call: Call) => {
4
// Inform the current user about the call then accept or reject the call
5
});
Copied!

On call active

Called when the current user starts a call or accepts an incoming call and their is device ready.
JavaScript
TypeScript
1
kitty.Calls.onCallActive((call) => {
2
// Update in-call state and navigate to in-call UI
3
});
Copied!
1
import { Call } from 'react-native-chatkitty';
2
3
kitty.Calls.onCallActive((call: Call) => {
4
// Update in-call state and navigate to in-call UI
5
});
Copied!

On participant accepted call

Called when another user accepts the call the current user is currently active in.
JavaScript
TypeScript
1
kitty.Calls.onParticipantAcceptedCall((participant) => {
2
// Update in-call state and UI
3
});
Copied!
1
import { User } from 'react-native-chatkitty';
2
3
kitty.Calls.onParticipantAcceptedCall((participant: User) => {
4
// Update in-call state and UI
5
});
Copied!

On participant rejected call

Called when another user rejects the call the current user is currently active in.
JavaScript
TypeScript
1
kitty.Calls.onParticipantRejectedCall((participant) => {
2
// Update in-call state and UI
3
});
Copied!
1
import { User } from 'react-native-chatkitty';
2
3
kitty.Calls.onParticipantRejectedCall((participant: User) => {
4
// Update in-call state and UI
5
});
Copied!

On participant active

Called when another user's device is ready to send their video/audio stream and interact with the call.
JavaScript
TypeScript
1
kitty.Calls.onParticipantActive((participant, stream) => {
2
// Update in-call state and UI
3
});
Copied!
1
import { User } from 'react-native-chatkitty';
2
import { MediaStream } from 'react-native-webrtc';
3
4
kitty.Calls.onParticipantActive((participant: User, stream: MediaStream) => {
5
// Update in-call state and UI
6
});
Copied!

On participant left call

Called when another user leaves the call.
JavaScript
TypeScript
1
kitty.Calls.onParticipantLeftCall((participant) => {
2
// Update in-call state and UI
3
});
Copied!
1
import { User } from 'react-native-chatkitty';
2
import { MediaStream } from 'react-native-webrtc';
3
4
kitty.Calls.onParticipantLeftCall((participant: User) => {
5
// Update in-call state and UI
6
});
Copied!

On call ended

Called when this call has ended.
JavaScript
TypeScript
1
kitty.Calls.onCallEnded((call) => {
2
// Update state and exit in-call UI
3
});
Copied!
1
import { Call } from 'react-native-chatkitty';
2
3
kitty.Calls.onCallEnded((call: Call) => {
4
// Update state and exit in-call UI
5
});
Copied!

Starting a call

Start a direct call with another user.
1
await kitty.Calls.startCall({ members: [{ username: '[email protected]' }] });
Copied!

Accepting a call

Accept a call invite.
1
await kitty.Calls.acceptCall({ call });
Copied!

Rejecting a call

Reject a call invite.
1
await kitty.Calls.rejectCall({ call });
Copied!

Leaving an active call

Leave the currently active call. Ends a one-to-one direct call.
1
kitty.Calls.leaveCall();
Copied!

Switching camera

Switches the current user's camera if their device has multiple cameras (front and back).
1
kitty.Calls.switchCamera();
Copied!

Toggling mute

Mutes/unmutes the current user's audio stream
1
kitty.Calls.toggleMute();
Copied!

Retrieving active call mute state

Retrieve the active call's mute state using ChatKitty.Calls.isMuted.
JavaScript
TypeScript
1
const muted = kitty.Calls.isMuted;
Copied!
1
const muted: boolean = kitty.Calls.isMuted;
Copied!

Retrieving calls

Retrieve past calls.
JavaScript
TypeScript
1
const result = await kitty.Calls.getCalls({
2
channel,
3
filter: { active: false },
4
});
5
6
if (result.succeeded) {
7
const calls = result.paginator.items;
8
}
Copied!
1
import {
2
Call,
3
GetCallsSucceededResult,
4
succeeded,
5
} from 'react-native-chatkitty';
6
7
const result = await kitty.Calls.getCalls({
8
channel,
9
filter: { active: false },
10
});
11
12
if (succeeded<GetCallsSucceededResult>(result)) {
13
const calls: Call[] = result.paginator.items;
14
}
Copied!

Retrieving a call

Retrieving active call

Retrieve an active call if the currrent user has started or accepted the call using ChatKitty.Calls.activeCall
JavaScript
TypeScript
1
const call = kitty.Calls.activeCall;
Copied!
1
import { Call } from 'react-native-chatkitty';
2
3
const call: Call | null = kitty.Calls.activeCall;
Copied!

Retrieving a call by ID

Retrieve a call with its ID.
JavaScript
TypeScript
1
const result = await kitty.Calls.getCall(id);
2
3
if (result.succeeded) {
4
const call = result.call;
5
}
Copied!
1
import {
2
Call,
3
GetCallSucceededResult,
4
succeeded,
5
} from 'react-native-chatkitty';
6
7
const result = await kitty.Calls.getCall(id);
8
9
if (succeeded<GetCallSucceededResult>(result)) {
10
const call: Call = result.call;
11
}
Copied!

Closing the React Native Calls SDK context

Close the ChatKitty React Native Calls SDK and clean up associated system resources
1
kitty.Calls.close();
Copied!

Ending the user session

End the user session to log the user out, close their device's concurrent connection to ChatKitty and free up resources used by the ChatKitty SDK.
1
kitty.endSession();
Copied!
Last modified 1mo ago