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.
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.
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 => true2pod 'FirebaseCore', :modular_headers => true3pod 'GoogleUtilities', :modular_headers => true4$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 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. 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',6 photoUrl: 'https://talkjs.com/images/avatar-1.jpg',7 welcomeMessage: 'Hey there! How are you? :-)',8 role: 'default',9 };10}
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',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);
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';34function ChatComponent(props) {5 const me = {6 id: '123456789',7 name: 'Alice',9 photoUrl: 'https://talkjs.com/images/avatar-1.jpg',10 welcomeMessage: 'Hey there! How are you? :-)',11 role: 'default',12 };1314 const other = {15 id: '987654321',16 name: 'Sebastian',18 photoUrl: 'https://talkjs.com/images/avatar-5.jpg',19 welcomeMessage: 'Hey, how can I help? https://google.com',20 role: 'default',21 };2223 const conversationBuilder = TalkRn.getConversationBuilder(24 TalkRn.oneOnOneId(me, other)25 );2627 conversationBuilder.setParticipant(me);28 conversationBuilder.setParticipant(other);2930 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.
If you get the following error:
1node_modules/@notifee/react-native/android/src/main/java/io/invertase/notifee/NotifeeApiModule.java:244: error: cannot find symbol2 new String[] {Manifest.permission.POST_NOTIFICATIONS},3 ^4 symbol: variable POST_NOTIFICATIONS5 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
).