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.

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

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

npx pod-install

If you plan to have an Android build, 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:

expo install @talkjs/expo

The @talkjs/expo package is identical to @talkjs/react-native, except that it has push notifications turned off. 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 your component

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';

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.

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',
};
}

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.

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',
};

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.

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

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

conversationBuilder.setParticipant(me);
conversationBuilder.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.

return (
<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.

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

That's it. The chatbox should now be running on your app. 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>
);
}

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:

node_modules/@notifee/react-native/android/src/main/java/io/invertase/notifee/NotifeeApiModule.java:244: error: cannot find symbol
new String[] {Manifest.permission.POST_NOTIFICATIONS},
^
symbol: variable POST_NOTIFICATIONS
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).

Pod install error

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 generating
module 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 => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
$RNFirebaseAsStaticFramework = true