Log in on an Android phone and an iPhone with different user IDs and chat between them. Start direct and group chats, reply in threads, react, and pin messages. Built with React Native and the PubNub Chat SDK.
This demo runs the same React Native chat app in two emulators in your browser: an Android Pixel 7 and an iPhone 14 Pro. It is the group chat sample app for the PubNub Chat SDK for JavaScript and TypeScript. Choose a different user ID on each phone and log in. Then start a chat and watch messages, typing, and reactions appear on the other phone.
The Chat SDK handles all of it. Users, channels, and memberships are stored in App Context, and each conversation loads its earlier messages from Message Persistence when you open it. The home screen sorts your conversations into unread, public channels, groups, and direct messages, and shows how many messages you missed. A dot on the avatar shows whether a user was active recently. You can also edit, delete, and restore messages, add links, and change your name on the Profile tab. The source code is on GitHub.
Tap the chat button to message one user, or pick several users and name a group. The other users get an invite, and the chat shows up in their list.
Start typing on one phone. The other phone shows that you are typing until you stop or send the message.
Long-press a message to reply to it in a thread or to quote it in your next message. A thread opens on its own screen.
Long-press a message and pick one of six emoji. The reaction shows under the message on both phones.
Type @ to pick a user or # to pick a channel while you write. Messages that mention you are collected on the Mentions tab.
Pin a message to the conversation, including a reply from a thread. Everyone in the chat can open it from the pin icon in the header.
Clone the Chat SDK repository and run the group chat sample in an iOS simulator with your own keys.
GitHub
The app is in the samples/react-native-group-chat folder. This repository is no longer updated, since Chat SDK development moved to pubnub/kmp-chat. To run the sample, build the SDK in the lib folder, add your publish and subscribe keys to a .env file in the sample folder, and run yarn ios.
git clone https://github.com/pubnub/js-chat.gitLog in as a support agent or as a customer and see how support chat, bot-to-agent handoff, and case management work in real time. Built with React and the PubNub Chat SDK.
Moderate a chat app from one dashboard. Filter text and images before they are published, review messages, and flag or ban users. Open source, built with React and the PubNub JavaScript SDK.
Create a stream as the host, open the viewer link, and chat with your audience next to the video. Viewers can report messages and users to the host. Built with Next.js and the PubNub Chat SDK.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
