This guide will help you to quickly add the TalkJS inbox to your React Native app. You might also want to read our end-to-end React Native tutorial:

Get your appId

To get started, create an account or login to your dashboard to get your appId.

To display the TalkJS Inbox in a React Native app, a webview needs to be used. So first, we'll create a HTML file and use the TalkJs JavaScript SDK to load the inbox. Then we will import it into our main Inbox component and set the url to be the path to the HTML file.

Add the TalkJS snippet to your HTML file

Create an HTML file, name it talkjs.html and add this minified snippet to your HTML file.

<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src="https://cdn.talkjs.com/talk.js";a.head.appendChild(s)
;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
</script>

Create a TalkJS user

Next, we'll create a TalkJS user. The Talk.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 dummy TalkJS user to serve as the current user. Replace these values with the real data of your current user. In your script file, add the following.

<script>
    Talk.ready.then(() => {
        var me = new Talk.User({
            id: "123456",
            name: "Alice",
            email: "[email protected]",
            photoUrl: "https://demo.talkjs.com/img/alice.jpg",
            welcomeMessage: "Hey there! How are you? :-)"
        });
    })
</script>

Create a TalkJS session

A session represents a user's active browser tab. It also authenticates your app with TalkJS. To create a session, you need your appId, which can be found on your dashboard, and the current TalkJS user we created previously.

window.talkSession = new Talk.Session({
    appId: "YOUR_APP_ID",
    me: me
});

Remember to replace YOUR_APP_ID with the appId found in the TalkJS dashboard. Better yet, log into the dashboard and navigate to the docs there and we'll have filled them out for you.

Create 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. For this example, we'll use a hardcoded dummy user.

var other = new Talk.User({
    id: "654321",
    name: "Sebastian",
    email: "Sebasti[email protected]",
    photoUrl: "https://demo.talkjs.com/img/sebastian.jpg",
    welcomeMessage: "Hey, how can I help?"
});

Next, we create a conversation. The getOrCreateConversation method attempts to get the conversation between the two users if it previously exists or create a new one otherwise. The Talk.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.

var conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other))

Next, we set the participants of the conversation to the users we created above.

conversation.setParticipant(me);
conversation.setParticipant(other);

A few more steps to go.

Create and mount the Inbox

The Inbox is one of the UI modes of TalkJS. It shows a user's conversation history and it allows them to write messages. You can find more UI modes here. To create the Inbox add this to your method.

var inbox = talkSession.createInbox({selected: conversation});

You need to call the Inbox mount method after creating the Inbox to make it visible in your app. So add this line of code to your js file.

inbox.mount(document.getElementById("talkjs-container"));

In your body of your HTML file, add an element with the same ID that this will be mounted on.

<div>
    <div id="talkjs-container" style="width: 100%; margin-top: 50px; height: 800px"><i>Loading chat...</i></div>
</div>

Finally, to make the app responsive to the screen size, we add the following to the head of the HTML file, if it is not there already.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

That's it, the inbox is all set now. Next step is to mount it on a webview.

Displaying the Inbox

To display the inbox in our React native app, we will mount it in a webview. First, install react native webview if you have not done so.

npm install --save react-native-webview

Next, import webview into the file. For android, we need to add the html file to the android assets folder. So copy the html file we created earlier, talkjs.html, to the following folder: android/app/src/main/assets/. Then in the webview, we check if the platform is iOS or android and link the right source file.

Add the following code to your component file.

import { Platform } from 'react-native';
import { WebView } from 'react-native-webview';

Finally, in the render method of the component, add a webview and set the source to be the path of the html file.

  render() {
    return (
      <WebView 
        source={ Platform.OS === 'ios' ? require('./talkjs.html') : { uri: "file:///android_asset/talkjs.html" }}
        style={{flex: 1}} 
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    )
  }

The app should be working on you screen now. Here's the full code for all we have done so far.

Go ahead, have a chat with Sebastian. He won't respond until a few steps from now but hey, it's a start! If you get an error, verify that appId is correct.

If you get stuck at any point, reach out to us via our support chat.

We also have several examples for different use cases on our examples repository on GitHub.

Next, you can learn how to add notifications!