Get started with PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

See how you can get a 1:1 chat app up and running.

You will download a sample React app that uses two PubNub Chat Components for React Native: Message Input and Message List. Then, you'll run the app and send your first message by typing it in the message input field. The messages will pile up on the screen as you send them.

Prerequisites​

Tools used

This guide uses React v18.0.0, React Native >= v0.72.4, PubNub JavaScript SDK v7.2.0, and PubNub React SDK v3.0.1.

Steps​

Before you start, you need to obtain Publish and Subscribe Keys for your chat app. You need them to initialize the PubNub object in your app to send and receive messages through the PubNub Network. To get both keys, sign in or create an account on the Admin Portal. The autogenerated Demo Keyset in My First App already contains the configuration required to complete this guide.

Keyset configuration

When you create a new app on the Admin Portal, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments. There are some of the functionalities you might need to enable on your keyset depending on the use case, but they won't be required to complete this guide. These options include:

  • PRESENCE to monitor the subscribers of channels and delivers information on their real-time status
  • MESSAGE PERSISTENCE (including correct Retention) to persist all messages as they're published.
  • APP CONTEXT to easily store metadata about your application users and channels, and their membership associations, without the need to stand up your own databases. When using this feature, make sure you select a geographical region corresponding to most users of your application and to have these enabled: User Metadata Events, Channel Metadata Events, and Membership Events.

Run the chat app​

Now that you have your keyset, you can set up a chat app in two ways:

  1. Download the getting-started app from the react-chat-components repository.

  2. Unpack the archive into the folder of your choice.

  3. Open the terminal app and install the dependencies in the root react-chat-components folder:

yarn

  1. Go to the samples/react-native/getting-started folder.

  2. Open the app in the code editor, navigate to the src/getting-started-react-native.tsx file and replace myPublishKey and mySubscribeKey with your own Publish and Subscribe Keys from the keyset on the Admin Portal. To associate a sender/current user with the PubNub messages, it's required to configure the userId parameter that refers to your user ID in the database. If you wish, modify the default value for the chat user.

publishKey: "myPublishKey",
subscribeKey: "mySubscribeKey",
userId: "myFirstUser",
userId

For simplicity, the getting started app sets a static userId. However, if you implement chat in your app, you should generate a userId per user, device, and server and reuse it for their lifetime. Using separate User IDs in real-life apps is particularly important as it impacts your overall billing and the way your app works.

The complete getting-started-react-native.tsx file looks as follows:

/* Imports PubNub JavaScript and React SDKs to create and access PubNub instance across your app. */
/* Imports the required PubNub Chat Components to easily create chat apps with PubNub. */
import React from "react";
import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput } from "@pubnub/react-native-chat-components";

/* Creates and configures your PubNub instance. Be sure to replace "myPublishKey" and "mySubscribeKey"
  with your own keyset. If you wish, modify the default "myFirstUser" userId value for the chat user. */
const pubnub = new PubNub({
  publishKey: "myPublishKey",
  subscribeKey: "mySubscribeKey",
  userId: "myFirstUser",
});
const currentChannel = "Default";
show all 31 lines
  1. Back in the terminal, run the app.
yarn start
Initialization error

If you get the digital envelope routines::initialization error error when trying to start the app, make sure you have the correct 16.18.0 node version installed (node -v). If not, install Node Version Manager (nvm) and set up the loading folder for nvm either with export NVM_DIR="$HOME/.nvm" or source ~/.nvm/nvm.sh. Then, install Node.js 16 using nvm install 16.

Send your first message​

Depending on whether you want to open the app on an iOS simulator, an Android emulator, or your own device, follow one of these paths:

  1. Open Xcode on your device.

  2. Set up a simulator and run it.

  3. Back in the terminal, press i to open the Getting Started app in the Xcode simulator. This will install Expo Go on your simulator and run the app.

Last updated on
Related Resources
On this page