Quickstart: PubNub JavaScript SDK in React Native

Use this quickstart to connect a React Native app to PubNub, subscribe to a channel, and send a message.

Content moved

The steps below are the React Native panels of the former Getting Started page, moved here unchanged. A shorter React Native quickstart that matches the Web and Node.js ones will replace them. For the shortest path to a first message, use Quickstart: Web.

Before you begin

• A React Native development environment set up.
• A PubNub account (you create one below).

Get your PubNub keys

First, get your PubNub keys:

• Sign in or create an account on the PubNub Admin Portal
• Create an app (or use an existing one)
• Find your publish and subscribe keys in the app dashboard

When you create an app, PubNub automatically generates a keyset. You can use the same keyset for development and production, but we recommend separate keysets for each environment to improve security and management.

Install

SDK version

Always use the latest SDK version to have access to the newest features and avoid security vulnerabilities, bugs, and performance issues.

For React Native projects, install the PubNub SDK along with the required react-native-url-polyfill peer dependency. The example app in this quickstart also imports SafeAreaView from react-native-safe-area-context:

1npm install pubnub react-native-url-polyfill react-native-safe-area-context

Then import it in your project:

1

Initialize

Create an instance of the PubNub class with your keys and a unique user ID:

1

In a real React Native application, you would typically initialize PubNub inside a component using hooks for proper lifecycle management:

1

For more information, refer to the Configuration section of the SDK documentation.

Set up event listeners

Listeners help the application react to events and messages. You can implement custom app logic to respond to each type of message or event.

For complete details on subscribing and handling events, refer to the Publish and Subscribe API Reference.

1

To use this example in your React Native project:

1. Create a new React Native project:

   # Using Expo (easiest for beginners)
   npx create-expo-app PubNubChatApp
   cd PubNubChatApp
   
   
   # Or using React Native CLI
   npx react-native init PubNubChatApp
   cd PubNubChatApp

2. Install the PubNub SDK, the URL polyfill that the React Native build of the SDK requires, and the safe area library that the example imports:

   npm install pubnub react-native-url-polyfill react-native-safe-area-context

3. Replace the content of App.tsx with the code above.

4. Run your app:

   # For Expo
   npx expo start
   
   
   # For React Native CLI
   npx react-native run-ios
   # or
   npx react-native run-android

The example includes:

• PubNub initialization with proper cleanup
• Real-time message sending and receiving
• Messages display in a scrollable chat UI
• Connection status indicator
• Presence notifications (when other users join or leave)
• Auto-scrolling message list
• Proper keyboard handling
• Error handling for failed messages
• Loading state while connecting
• Full styling for a production-ready appearance

Create a subscription

To receive messages on a channel, you need to subscribe to it. PubNub offers an entity-based subscription approach which provides more control and flexibility:

In React Native, we typically subscribe within a useEffect hook:

1

For more information, refer to the Subscribe section of the SDK documentation.

Publish messages

Once you've set up your subscription, you can start publishing messages to channels.

When you publish a message to a channel, PubNub delivers that message to everyone who is subscribed to that channel.

A message can be any type of JavaScript Object Notation (JSON)-serializable data (such as objects, arrays, integers, strings) that is smaller than 32 KiB.

1

Run the app

Once you've implemented all the previous steps (initialization, listeners, subscription, and publishing), you're ready to run your application:

1. Start your React Native app:

   npm run android
   # or
   npm run ios
   # or
   npm run web

2. The app should launch on the selected platform.

3. Type a message in the input field and tap Send.

4. You should see your message appear in the messages list.

5. To see real-time communication, run the app on another device or simulator.

Complete example

1

The examples above showcase complete working code that integrates all the concepts covered in this guide:

• PubNub initialization with proper configuration
• Event listener setup for messages and connection status
• Channel subscription using the entity-based approach
• Message publishing with error handling
• User interface components (where applicable)
• Cleanup and resource management

Next steps

• Pick another path on Choose your runtime.
• Try Presence to track online and offline status.
• Implement Message Persistence to store and retrieve messages.
• Use Access Manager to secure your channels.
• Explore Channel Groups to organize your channels.
• Building a chat app? Use the Chat SDK.