React Native

This guide helps you 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 get started.

Get your app ID

To get started, create a TalkJS account or login to your dashboard to get your app ID. You can get your app ID from the Settings page of the dashboard.

Install TalkJS

Add the TalkJS React Native package to your project.

Note: React Native CLI doesn't auto-link libraries with native modules when those libraries are transitive dependencies. So you have to explicitly install the SDK's peer dependencies as shown in the following, to load the native modules correctly.

1yarn add @talkjs/react-native @notifee/react-native @react-native-community/push-notification-ios @react-native-firebase/app @react-native-firebase/messaging react-native-webview

If you are targeting iOS, you'll need to add the following to your Podfile in your app's target section:

1pod 'Firebase', :modular_headers => true
2pod 'FirebaseCore', :modular_headers => true
3pod 'GoogleUtilities', :modular_headers => true
4$RNFirebaseAsStaticFramework = true

Afterwards, run:

1npx pod-install

To ensure push notification support, you'll need to setup the push notification libraries as outlined in the React Native mobile push notifications guide before continuing.

For Expo managed projects, install the @talkjs/expo package:

1expo install @talkjs/expo @notifee/react-native @react-native-firebase/app @react-native-firebase/messaging react-native-webview

The @talkjs/expo package is identical to @talkjs/react-native, except that for iOS it only supports sending push notifications via Firebase.

Import TalkJS in your component

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

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

If you are using the Expo package:

1import * as TalkRn from '@talkjs/expo';

Create a TalkJS user

Create a TalkJS user. The User object is used to synchronize user data, so that TalkJS can display the data inside the chat UI.

For this guide you'll create a TalkJS user using hard-corded values. You can also create the User object with data retrieved from your database. Or you can pass the object as a prop to the component that renders the chatbox.

1function ChatComponent(props) {
2 const me = {
3 id: '123456789',
4 name: 'Alice',
5 email: '[email protected]',
6 photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
7 welcomeMessage: 'Hey there! How are you? :-)',
8 role: 'default',
9 };
10}

Build a conversation

A conversation happens between two or more people. So far you have created one TalkJS user. Next, you'll create another hard-coded dummy user to have a conversation with.

1const other = {
2 id: '987654321',
3 name: 'Sebastian',
4 email: '[email protected]',
5 photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
6 welcomeMessage: 'Hey, how can I help? https://google.com',
7 role: 'default',
8};

Next, get a ConversationBuilder to set up your conversation. A ConversationBuilder object creates a new conversation with the given participants and attributes, or modifies an existing conversation where necessary. Use the getConversationBuilder method to get the ConversationBuilder object.

The oneOnOneId method computes a conversation ID based on participants' IDs. Use this method if you want to create a conversation between two users. To create a group conversation or generate a conversation ID associated with a transaction on your platform, such as a purchase, follow the documentation on the conversation ID.

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

Next, set the participants of the conversation to the users you created:

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

Render the session and chatbox components

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

1return <TalkRn.Session appId="YOUR_APP_ID" me={me} />;

Finally, add the Chatbox component. The chatbox represents a messaging UI for a single conversation between two or more participants. It has only one required prop: conversationBuilder. For an overview of all the props that the Chatbox supports, see: Chatbox props.

A Chatbox must be a descendant of Session. It doesn't need to be a direct descendant. In this case, you don't need to add other components as children of Session other than Chatbox.

1return (
2 <TalkRn.Session appId="YOUR_APP_ID" me={me}>
3 <TalkRn.Chatbox conversationBuilder={conversationBuilder} />
4 </TalkRn.Session>
5);

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

1import React from 'react';
2import * as TalkRn from '@talkjs/react-native';
3
4function ChatComponent(props) {
5 const me = {
6 id: '123456789',
7 name: 'Alice',
8 email: '[email protected]',
9 photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
10 welcomeMessage: 'Hey there! How are you? :-)',
11 role: 'default',
12 };
13
14 const other = {
15 id: '987654321',
16 name: 'Sebastian',
17 email: '[email protected]',
18 photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
19 welcomeMessage: 'Hey, how can I help? https://google.com',
20 role: 'default',
21 };
22
23 const conversationBuilder = TalkRn.getConversationBuilder(
24 TalkRn.oneOnOneId(me, other)
25 );
26
27 conversationBuilder.setParticipant(me);
28 conversationBuilder.setParticipant(other);
29
30 return (
31 <TalkRn.Session appId="YOUR_APP_ID" me={me}>
32 <TalkRn.Chatbox conversationBuilder={conversationBuilder} />
33 </TalkRn.Session>
34 );
35}

If the code example isn't working even after reloading your app, you can reach out to us through support chat.

To enable push notifications in your React Native app, follow the React Native mobile push notifications guide.

Check out the reference pages for the Session and Chatbox components for an overview of all the props and methods that each component has.

Troubleshooting

Android Gradle error

If you get the following error:

1node_modules/@notifee/react-native/android/src/main/java/io/invertase/notifee/NotifeeApiModule.java:244: error: cannot find symbol
2 new String[] {Manifest.permission.POST_NOTIFICATIONS},
3 ^
4 symbol: variable POST_NOTIFICATIONS
5 location: class permission

The issue is that since version 6.0.0, Notifee requires that the minimum compileSdkVersion to be 33. You can read more in the Notifee release notes. Make sure to set this accordingly in your Project-level Gradle file ([YOUR_RN_PROJECT]/android/build.gradle).