Mobile chat SDK: finished chat screens for React Native, Expo, and Flutter apps

Which TalkJS SDK should I use for my mobile app?

Pick the row for the stack your app is written in. The first three come with finished chat screens. On native Swift or Kotlin, you get the messaging data and draw the screens yourself.

The React Native and Flutter screens look and work the same on iOS and Android, and you style them once, in the Theme Editor in your dashboard, the same way as the Classic JavaScript SDK on the web. Each stack has its own page: React Native, Flutter, iOS, and Android. If you're building for the web too, see all our chat SDKs.

How do I add 1-on-1 chat to an Expo or React Native app?

Install the Expo kit and its dependencies. Some of them contain native code, so the kit needs a development build and won't run in Expo Go:

npx expo install @talkjs/expo @notifee/react-native \
  react-native-webview \
  @react-native-async-storage/async-storage \
  expo-build-properties

Then follow our React Native getting started guide. This component from it creates two users, puts them in a 1-on-1 conversation, and opens it in a Chatbox. Replace <APP_ID> with your app ID from the dashboard. In a React Native CLI app, import @talkjs/react-native instead:

import React from 'react';
import * as TalkRn from '@talkjs/expo';

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

  const other = {
    id: '987654321',
    name: 'Sebastian',
    email: 'Sebastian@example.com',
    photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
    welcomeMessage: 'Hey, how can I help? https://google.com',
  };

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

  conversationBuilder.setParticipant(me);
  conversationBuilder.setParticipant(other);

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

A group chat is the same conversation with more participants: up to 100 on the Basic plan and 300 on Growth. Before you go live, turn on authentication, so that only your users can open their chats. Your backend signs a token for each user, and your app passes it to the Session.

On Flutter, run flutter pub add talkjs_flutter, create a Session with your app ID, and show the conversation in a ChatBox widget. The Flutter chat page has the full example.

How do push notifications work on iOS and Android?

When someone gets a message while they're away from the chat, TalkJS sends the push for you, on every plan. You add your Firebase Cloud Messaging credentials for Android and your APNs key for iOS in the dashboard, and the SDK registers each device. On Expo, you can use expo-notifications or the Firebase libraries. The Expo push guide has both.

Push isn't the only way to reach people. Someone who misses a message also gets an email notification, and when they reply to the email, the reply shows up in the conversation.