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.
To get started, create an account or login
to your dashboard to get your appId
.
Add the TalkJS React Native package to your project.
Note: React Native CLI does not autolink libraries with native modules when those libraries are transitive dependencies. So you have to explicitly install the SDK's peer dependencies as shown below for the native modules to be loaded correctly:
yarn add @talkjs/react-native @notifee/react-native @react-native-community/push-notification-ios @react-native-firebase/app @react-native-firebase/messaging react-native-webview
npm install --save @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, go into your ios
app folder and run:
npx pod-install
If you will have an Android build, you'll need to setup the push notification libraries as outlined here before continuing with this guide.
For Expo Managed projects, you'll need to install the @talkjs/expo
package:
expo install @talkjs/expo
This package is identical to @talkjs/react-native
except that it has push notifications disabled.
If you need push notifications, you can send them from your own backend using
TalkJS webhooks or you can switch to
@talkjs/react-native and create a
development build for your project using
EAS Build or
eject to the bare workflow.
Import TalkJS in the component where you want the chatbox to live.
import * as TalkRn from '@talkjs/react-native';
If you are using the Expo package:
import * as TalkRn from '@talkjs/expo';
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://talkjs.com/images/avatar-1.jpg',welcomeMessage: 'Hey there! How are you? :-)',role: 'default',};}
import * as React from 'react';class ChatComponent extends React.Component {me = {id: '123456789',name: 'Alice',photoUrl: 'https://talkjs.com/images/avatar-1.jpg',welcomeMessage: 'Hey there! How are you? :-)',role: 'default',};}
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://talkjs.com/images/avatar-5.jpg',welcomeMessage: 'Hey, how can I help? https://google.com',role: 'default',};
other = {id: '987654321',name: 'Sebastian',photoUrl: 'https://talkjs.com/images/avatar-5.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));
conversationBuilder = TalkRn.getConversationBuilder(TalkRn.oneOnOneId(this.me, this.other));
Next, we set the participants of the conversation to the users we created above.
conversationBuilder.setParticipant(me);conversationBuilder.setParticipant(other);
render() {conversationBuilder.setParticipant(this.me);conversationBuilder.setParticipant(this.other);}
One more step to go.
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} />);
// Inside the render methodreturn (<TalkRn.Session appId='YOUR_APP_ID' me={this.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>);
// Inside the render methodreturn (<TalkRn.Session appId='YOUR_APP_ID' me={this.me}><TalkRn.Chatbox conversationBuilder={this.conversationBuilder} /></TalkRn.Session>);
That's it, the chatbox should be running on your app now. Here is the full code for this.
import React from 'react';import * as TalkRn from '@talkjs/react-native';function ChatComponent(props) {const me = {id: '123456789',name: 'Alice',photoUrl: 'https://talkjs.com/images/avatar-1.jpg',welcomeMessage: 'Hey there! How are you? :-)',role: 'default',};const other = {id: '987654321',name: 'Sebastian',photoUrl: 'https://talkjs.com/images/avatar-5.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>);}
import * as TalkRn from '@talkjs/react-native';import * as React from 'react';class ChatComponent extends React.Component {me = {id: '123456789',name: 'Alice',photoUrl: 'https://talkjs.com/images/avatar-1.jpg',welcomeMessage: 'Hey there! How are you? :-)',role: 'default',};other = {id: '987654321',name: 'Sebastian',photoUrl: 'https://talkjs.com/images/avatar-5.jpg',welcomeMessage: 'Hey, how can I help? https://google.com',role: 'default',};conversationBuilder = TalkRn.getConversationBuilder(TalkRn.oneOnOneId(this.me, this.other));render() {conversationBuilder.setParticipant(this.me);conversationBuilder.setParticipant(this.other);return (<TalkRn.Session appId='YOUR_APP_ID' me={this.me}><TalkRn.Chatbox conversationBuilder={this.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.
If you get the following error:
node_modules/@notifee/react-native/android/src/main/java/io/invertase/notifee/NotifeeApiModule.java:244: error: cannot find symbolnew String[] {Manifest.permission.POST_NOTIFICATIONS},^symbol: variable POST_NOTIFICATIONSlocation: class permission
The issue is that since version 6.0.0, Notifee requires that the minimum compileSdkVersion
to be 33. You
can read more here. Make sure this is set accordingly in
your Project-level Gradle file ([YOUR_RN_PROJECT]/android/build.gradle
).
If you get the following error after running pod install
or npx pod install
:
The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generatingmodule maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!`globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.
Add the following to your Podfile
in your app's target
section:
pod 'Firebase', :modular_headers => truepod 'FirebaseCore', :modular_headers => truepod 'GoogleUtilities', :modular_headers => true$RNFirebaseAsStaticFramework = true