---
url: https://talkjs.com/docs/UI_Components/React_Native
---

# Getting started

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/React_Native.md)
This guide will help you quickly add TalkJS to your React Native app and create a chat between two users. It uses TalkJS's [React Native SDK](/docs/UI_Components/React_Native/Installation/), which provides pre-built chat UI components for your application.

In the guide we'll walk you through installing TalkJS, creating new users and conversations, and setting up push notifications.

## Prerequisites

To make the most of this guide, you will need:

1. A [TalkJS account](/dashboard/signup/premium/)
2. [React Native](https://reactnative.dev/) (version 0.64 or higher)
3. A React Native app that you will add TalkJS to. If you don't already have one, you can follow the [official guide](https://reactnative.dev/docs/environment-setup) to get started.

## Install TalkJS

### React Native without Expo

If you use React Native without Expo, add the `@talkjs/react-native` package to your project along with its dependencies:

**Note:** React Native CLI doesn't auto-link libraries with native modules when those libraries are transitive dependencies. To load the native modules correctly, you instead have to explicitly install the SDK's peer dependencies as shown in the following.

**yarn**
```bash
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 @react-native-async-storage/async-storage
```

**npm**
```bash
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 @react-native-async-storage/async-storage
```

If you are targeting iOS, you'll also need to add the following to your `Podfile` in your app's `target` section:

```ruby
pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
$RNFirebaseAsStaticFramework = true
```

Afterwards, run:

```bash
npx pod-install
```

### Expo projects

For Expo projects, install the `@talkjs/expo` package instead alongside its dependencies:

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

The `@talkjs/expo` package is identical to `@talkjs/react-native` in terms of features. `@talkjs/expo` is just specifically designed to
ensure compatibility with Expo.

The `@talkjs/expo` package doesn't work with Expo Go, because some of the package's dependencies contain native code.

#### Configure Notifee

This step is required for Expo users even if you don't plan to enable push notifications, otherwise building on Android will fail.

The `Notifee` package requires its native modules to be defined under `extraMavenRepos` in your project's `app.json` as shown:

JSON

```json
{
  "expo": {
    "plugins": [
      // Other plugins
      [
        "expo-build-properties",
        {
          "android": {
            "extraMavenRepos": [
              "../../node_modules/@notifee/react-native/android/libs"
            ]
          }
        }
      ]
    ]
  }
}
```

## Import TalkJS in your component

Import TalkJS in the component where you want the chatbox to live.

```javascript
import * as TalkRn from '@talkjs/react-native';
```

If you are using the Expo package:

```javascript
import * as TalkRn from '@talkjs/expo';
```

## Create a TalkJS user

First, create a TalkJS user in your chat component. The [`User`](/docs/UI_Components/React_Native/Object_Types/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-coded values. You
can also create the [`User`](/docs/UI_Components/React_Native/Object_Types/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 component**
```javascript
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? :-)',
  };
}
```

**Class component**
```javascript
import * as React from 'react';

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

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

**Function component**
```javascript
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',
};
```

**Class component**
```javascript
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',
};
```

Next, get a [`ConversationBuilder`](/docs/UI_Components/React_Native/Object_Types/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`](/docs/UI_Components/React_Native/API/getConversationBuilder/) method
to get the `ConversationBuilder` object.

The [`oneOnOneId`](/docs/UI_Components/React_Native/API/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](/docs/Concepts/Conversations/#the-conversation-id).

**Function component**
```javascript
const conversationBuilder = TalkRn.getConversationBuilder(
  TalkRn.oneOnOneId(me, other)
);
```

**Class component**
```javascript
conversationBuilder = TalkRn.getConversationBuilder(
  TalkRn.oneOnOneId(this.me, this.other)
);
```

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

**Function component**
```javascript
conversationBuilder.setParticipant(me);
conversationBuilder.setParticipant(other);
```

**Class component**
```javascript
render() {
  conversationBuilder.setParticipant(this.me);
  conversationBuilder.setParticipant(this.other);
}
```

## Render the session and chatbox components

The [`Session`](/docs/UI_Components/React_Native/Components/Session/) component
represents a user's active TalkJS session. It also authenticates your app with TalkJS.
The `Session` component has two required props: [`appId`](/docs/UI_Components/React_Native/Components/Session/#appId) and [`me`](/docs/UI_Components/React_Native/Components/Session/#me), which is the current TalkJS user.
You can get your `appId` from the **Settings** page of the [dashboard](/dashboard).

**Function component**
```jsx
return <TalkRn.Session appId="<APP_ID>" me={me} />;
```

**Class component**
```jsx
// Inside the render method
return <TalkRn.Session appId="<APP_ID>" me={this.me} />;
```

You'll need to replace `<APP_ID>` with your TalkJS App ID. You can find your App ID in the **Settings** tab of the [TalkJS dashboard](/dashboard/login). For this tutorial, we recommend using the App ID for TalkJS's [Test Mode](/docs/Features/Environments/).

Finally, add the [`Chatbox`](/docs/UI_Components/React_Native/Components/Chatbox/) component.
The chatbox represents a messaging UI for a single conversation between two or more participants.
It has only one required prop: [`conversationBuilder`](/docs/UI_Components/React_Native/Components/Chatbox/#conversationBuilder).
For an overview of all the props that the `Chatbox` supports, see: [Chatbox props](/docs/UI_Components/React_Native/Components/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`.

**Function component**
```jsx
return (
  <TalkRn.Session appId="<APP_ID>" me={me}>
    <TalkRn.Chatbox conversationBuilder={conversationBuilder} />
  </TalkRn.Session>
);
```

**Class component**
```jsx
// Inside the render method
return (
  <TalkRn.Session appId="<APP_ID>" me={this.me}>
    <TalkRn.Chatbox conversationBuilder={this.conversationBuilder} />
  </TalkRn.Session>
);
```

That's it. The chatbox should now be running on your app.
Here is the full code for this:

**Function component**
```jsx
import React from 'react';
import * as TalkRn from '@talkjs/react-native';

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>
  );
}
```

**Class component**
```jsx
import * as TalkRn from '@talkjs/react-native';
import * as React from 'react';

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

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

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

  render() {
    conversationBuilder.setParticipant(this.me);
    conversationBuilder.setParticipant(this.other);

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

If the code example isn't working even after reloading your app, you can reach out through the TalkJS support chat.

## Set up push notifications

If you use React Native without Expo, follow the [React Native mobile push notifications guide](/docs/Guides/React_Native/Push_Notifications/?framework=react-native) to set up push notifications for your app.

If you use Expo, follow the [Expo mobile push notifications guide](/docs/Guides/React_Native/Push_Notifications_Expo/?framework=react-native).

## Customize the UI

You can customize the look, feel, and behavior of your chat UI with HTML and CSS, using the [Theme Editor](/dashboard/themes) in your TalkJS dashboard.

The theme editor for React Native uses the same theming system as the [Classic JavaScript SDK](/docs/UI_Components/JavaScript/Classic/). To get started with customization, make sure you have the [Theme Editor enabled](#enable-the-theme-editor), and then follow the [theming guide](/docs/UI_Components/JavaScript/Classic/Themes/?framework=react-native).

### Enable the Theme Editor

To enable the Theme Editor:

1. On the TalkJS dashboard, go to [Project settings](/dashboard/project/settings).
2. In the section **Dashboard settings**, select **Enable UI Theme Editor (Classic SDKs)**, and save your changes.
You can now edit your app's theme directly from the [Themes](/dashboard/themes) section of your dashboard.

## Troubleshooting

This section provides troubleshooting instructions for issues that you may come across.

### Android Gradle error

If you get the following error:

```bash
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](https://notifee.app/react-native/docs/release-notes#600). Make sure to set this accordingly in
your **Project-level** Gradle file (`[YOUR_RN_PROJECT]/android/build.gradle`).

## Next steps

In this guide, you've added powerful user-to-user chat to your React Native app. You also learned more about the fundamentals of TalkJS, and how it all fits together.

For more information on the options available, check out the reference pages for the [`Session`](/docs/UI_Components/React_Native/Components/Session/) and [`Chatbox`](/docs/UI_Components/React_Native/Components/Chatbox/) components for an overview of all the props and methods that each component has.

For larger complete examples of how to integrate TalkJS into your app, see our [examples repo](https://github.com/talkjs/talkjs-examples).

Before you go live, make sure you enable authentication. Authentication keeps your user data secure, by ensuring that only legitimate users can connect to your chat. For details, see: [Authentication](/docs/Features/Security/Authentication/).