--- source_url: https://www.pubnub.com/docs/chat/components/react-native title: Get started with PubNub Chat Components for React Native updated_at: 2026-06-18T11:25:24.358Z --- > Documentation Index > For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt > For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt # Get started with PubNub Chat Components for React Native :::warning Migrate to Chat SDK PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk). ::: 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](https://www.pubnub.com/docs/chat/components/react-native/ui-components/message-input) and [Message List](https://www.pubnub.com/docs/chat/components/react-native/ui-components/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 * [yarn](https://classic.yarnpkg.com/en/docs/install) * [Node.js Latest LTS Version: 16.18.0](https://nodejs.org/en/download/package-manager/) * Code editor (for example, [Visual Studio Code](https://code.visualstudio.com/download)) * [Android Studio](https://developer.android.com/studio) (>= Bumblebee 2021.1.1) (optionally) * [Xcode](https://developer.apple.com/xcode/) (>= Xcode 13) (optionally) * Expo app installed on your mobile device (optionally) :::tip Tools used This guide uses [React v18.0.0](https://www.npmjs.com/package/react/v/18.0.0), [React Native >= v0.72.4](https://www.npmjs.com/package/react-native), [PubNub JavaScript SDK v7.2.0](https://www.pubnub.com/docs/sdks/javascript), and [PubNub React SDK v3.0.1](https://www.pubnub.com/docs/sdks/react). ::: ## Steps Before you start, you need to obtain [Publish and Subscribe Keys](https://www.pubnub.com/docs/general/basics/initialize-pubnub) 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](https://www.pubnub.com/docs/general/setup/account-setup) on the [Admin Portal](https://admin.pubnub.com/). The autogenerated Demo Keyset in My First App already contains the configuration required to complete this guide. :::note 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](https://www.pubnub.com/docs/sdks/javascript/api-reference/presence) to monitor the subscribers of channels and delivers information on their real-time status * [MESSAGE PERSISTENCE](https://www.pubnub.com/docs/sdks/javascript/api-reference/storage-and-playback) (including correct **Retention**) to persist all messages as they're published. * [APP CONTEXT](https://www.pubnub.com/docs/sdks/javascript/api-reference/objects) 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: #### Download starter 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: ```sh 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. ```tsx publishKey: "myPublishKey", subscribeKey: "mySubscribeKey", userId: "myFirstUser", ``` :::tip 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](https://www.pubnub.com/docs/general/setup/users-and-devices#billing) and the way your app [works](https://www.pubnub.com/docs/general/setup/users-and-devices#presence). ::: The complete `getting-started-react-native.tsx` file looks as follows: ```tsx /* 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"; const theme = "light"; export function GettingStartedReactNative(): JSX.Element { return ( {/* PubNubProvider is a part of the PubNub React SDK and allows you to access PubNub instance in components down the tree. */} {/* Chat is an obligatory state provider. It allows you to configure some common component options, like the current channel and the general theme for the app. */} ); } ``` 1. Back in the terminal, run the app. ```sh yarn start ``` :::tip Initialization error If you get the `digital envelope routines::initialization error` error, this typically occurs with older Node.js versions and OpenSSL 3.0. Upgrade to Node.js 18 or later, which resolves this issue. Use [nvm](https://github.com/nvm-sh/nvm#install--update-script) to manage Node.js versions: `nvm install 18 && nvm use 18`. ::: #### Extend existing app 1. Open the terminal in the location of your app files and add the PubNub JavaScript SDK, React framework packages, and PubNub Chat Components for React Native. ```sh yarn add pubnub pubnub-react @pubnub/react-native-chat-components ``` 1. For bare React Native projects, install and configure the Expo package before continuing. 2. Open your application source files in your favorite code editor. Copy over the snippet below into your app source file (for example, src/App.tsx). Remember to place your own keys from the Admin Portal for the publishKey and subscribeKey parameters in the PubNub instance configuration. ```tsx /* 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"; const theme = "light"; export function GettingStartedReactNative(): JSX.Element { return ( {/* PubNubProvider is a part of the PubNub React SDK and allows you to access PubNub instance in components down the tree. */} {/* Chat is an obligatory state provider. It allows you to configure some common component options, like the current channel and the general theme for the app. */} ); } ``` 1. Back in the terminal, run the app. ```sh yarn start ``` :::tip Initialization error If you get the `digital envelope routines::initialization error` error, this typically occurs with older Node.js versions and OpenSSL 3.0. Upgrade to Node.js 18 or later, which resolves this issue. Use [nvm](https://github.com/nvm-sh/nvm#install--update-script) to manage Node.js versions: `nvm install 18 && nvm use 18`. ::: ### 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: #### Open iOS simulator 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. #### Open Android emulator 1. Open Android Studio on your device. 2. Set up an emulator and run it. 3. Back in the terminal, press a to open the Getting Started app in the Android Studio emulator. This installs Expo Go on your emulator and run the app. #### Scan QR code By running the Getting Started app, you start the [Metro Bundler](https://docs.expo.dev/guides/customizing-metro/). The bundler is an HTTP server that compiles the JavaScript code and assets of the app and serves it to the [Expo Development Server](https://docs.expo.dev/more/expo-cli/). 1. Make sure you have Expo Go installed on your mobile device. 2. Open the Expo app on your mobile device: * On your Android device, press "Scan QR Code" on the "Home" tab of the Expo Go app and scan the QR code you see in the terminal. * On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal. You can open the project on multiple devices simultaneously.