React Native

This guide will help you to quickly add the Talkjs chatbox to your React Native app. It assumes you already have a working React native application. If you don't, you can follow the official guide to quickly get started.

Get your appId

To get started, create an account or login to your dashboard to get your appId.

Install TalkJS

Add the TalkJS React Native package to your project.

yarn add @talkjs/react-native react-native-webview react-native-push-notification

If you are targeting iOS, go into your ios app folder and run:

npx pod-install

Import TalkJS in your Component

Import Talkjs in the component where you want the chatbox to live.

import * as TalkRn from '@talkjs/react-native';

Create a TalkJS User

The first step is to create a TalkJS user. The User object is used to synchronize user data with TalkJS, so we can display it inside the chat UI.

For this guide we will create a TalkJS user using hardcorded values. Ideally you should create the User object with data retrieved from your database. You could also pass the object as a prop to the component that will render the chatbox.

function ChatComponent(props) {
const me = {
id: '123456789',
name: 'Alice',
photoUrl: 'https://demo.talkjs.com/img/alice.jpg',
welcomeMessage: 'Hey there! How are you? :-)',
role: 'default',
};
}

Build a conversation

A conversation happens between two or more people. So far we have just created one TalkJS user. Next, we'll create another user which we'll create a conversation with. Like before, we'll use a hardcoded dummy user.

const other = {
id: '987654321',
name: 'Sebastian',
photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
welcomeMessage: 'Hey, how can I help? https://google.com',
role: 'default',
};

Next we get a ConversationBuilder to setup our conversation. A ConversationBuilder object will create a new conversation with the given participants and attributes or modify an existing one where necessary. We will use the method, getConversationBuilder, to get the ConversationBuilder object.

The oneOnOneId method predictably computes a Conversation ID based on participants' ids. Use this method if you want to simply create a conversation between two users. You may want to create a group conversation or generate a conversation ID associated with a transaction that happened on your platform e.g. a purchase. You can find how to do that here.

const conversationBuilder = TalkRn.getConversationBuilder(
TalkRn.oneOnOneId(me, other)
);

Next, we set the participants of the conversation to the users we created above.

conversationBuilder.setParticipant(me);
conversationBuilder.setParticipant(other);

One more step to go.

Render the Session and Chatbox components

The Session component represents a user's active TalkJS session. It also authenticates your app with TalkJS. It has two required props: appId and me (The current TalkJS user). You can get your appId from the dashboard

return (
<TalkRn.Session appId='YOUR_APP_ID' me={me} />
);

Finally, we need to add the Chatbox component. This represents a messaging UI for a single conversation between two or more participants. It has only one required prop: conversationBuilder. Here is a link to all the props the Chatbox supports.

A Chatbox MUST be a descendant of Session. It is not required for it to be a direct descendant. In this case, we do not have other components to add as children of Session other than Chatbox.

return (
<TalkRn.Session appId='YOUR_APP_ID' me={me}>
<TalkRn.Chatbox conversationBuilder={conversationBuilder} />
</TalkRn.Session>
);

That's it, the chatbox should be running on your app now. Here is the full code for this.

import * as TalkRn from '@talkjs/react-native';
function ChatComponent(props) {
const me = {
id: '123456789',
name: 'Alice',
photoUrl: 'https://demo.talkjs.com/img/alice.jpg',
welcomeMessage: 'Hey there! How are you? :-)',
role: 'default',
};
const other = {
id: '987654321',
name: 'Sebastian',
photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
welcomeMessage: 'Hey, how can I help? https://google.com',
role: 'default',
};
const conversationBuilder = TalkRn.getConversationBuilder(
TalkRn.oneOnOneId(me, other)
);
conversationBuilder.setParticipant(me);
conversationBuilder.setParticipant(other);
return (
<TalkRn.Session appId='YOUR_APP_ID' me={me}>
<TalkRn.Chatbox conversationBuilder={conversationBuilder} />
</TalkRn.Session>
);
}

If the code example above is not working even after reloading your app, you can reach out to us via support chat.

To enable Push Notifications in your React Native app, we have a guide showing you the one-time setup you'll need to do.

Be sure to check out the reference pages for the Session and Chatbox components to see all the props and methods that each component has.