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.

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

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

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',
    email: '[email protected]',
    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 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',
  email: '[email protected]',
  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)
);

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 React from 'react';
import * as TalkRn from '@talkjs/react-native';


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


  const other = {
    id: '987654321',
    name: 'Sebastian',
    email: '[email protected]',
    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 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.

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 here. Make sure this is set accordingly in your Project-level Gradle file ([YOUR_RN_PROJECT]/android/build.gradle).

Pods 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