Build a React Native App with Real-Time Polls and Messaging

If you’re building a messaging experience, whether for live streaming, team collaboration, or community chat, adding polls can boost interaction and streamline decision-making.

For example, apps like Slido help make video conferencing and group chat more engaging with live polls and Q&A support.

But you don’t need a third-party tool to deliver that experience.

In this tutorial, you’ll learn how to integrate real-time and async polls into your app using Stream's Chat SDK for React Native Expo. You’ll explore key use cases and walk through how to create, vote on, and display polls directly in chat.

Why Add Polls to Your App?

Polls are a valuable feature in any group or team communication app. They allow users to easily vote, express their opinions, and make decisions quickly—all without leaving the conversation.

Even Apple is prioritizing polls: in the iOS 26 update, the Messages app will include built-in polling for group chats on iPhone and iPad. It’s a familiar, expected feature that your users will appreciate.

Here’s why polls are worth adding:

• Easy integration with AI: You can implement polls seamlessly with an AI chatbot in a messaging app. Based on group message conversations, the AI assistant can suggest creating a poll on the users' behalf. A real-world example is Apple Intelligence’s integration with the Messages app on iOS 26, which can detect when it is appropriate to initiate a poll on behalf of users based on previous group conversations.
• Quick group decisions: Easily decide with team members and get real-time updates without leaving conversations behind.
• Plan for the future: Quickly discuss with your team members or find a time to organize meetings.
• Make meetings interactive: Q&As, live polls, and quizzes are excellent ways to engage participants in live group meetings.

The Starter Project: React Native Chat Messaging With Expo

In this tutorial, we will build the poll functionality as an in-app Stream Chat feature. However, we won’t cover the setup or implementation process.

The following guides provide step-by-step instructions on integrating Stream Chat for React Native into your app:

• Stream Chat with React Native CLI tutorial
• Stream Chat with React Native Expo tutorial
• YouTube video

Clone the sample app from GitHub and explore the implementation of polls. With the sample app, the poll support is enabled by default.

Follow the steps below to get it up and running.

Get the Sample App from GitHub

First, clone the chat SDK's repo containing Stream sample apps and install the required dependencies with Yarn.

git clone https://github.com/GetStream/stream-chat-react-native.git

Install Required Project Dependencies

Next, in the project's root directory, run:

yarn install

Navigate to the package directory and run this command:

cd package && yarn install

Again, move to the expo-package directory and run the command below:

cd expo-package && yarn install

Finally, move to the app directory and run:

cd ../../examples/ExpoMessaging && yarn install

After performing the steps above, you can run the chat app on iOS or Android. If you need help setting up the iOS and Android platforms for React Native development, refer to the official docs or watch our guide on YouTube.

The preview below demonstrates creating a new poll in the chat sample app. To test it yourself, move to the Android and iOS directories and run yarn android and yarn ios, respectively.

Note: In this preview, the app runs on an Android emulator (left screen), while the one on the right side runs on an iOS simulator. Launching an Android emulator before entering the yarn android command in your Terminal is recommended. For iOS, you should navigate to the iOS folder and launch the source file with the extension .xcworkspace in Xcode. In the Xcode project navigator, choose the root directory and click Signing and Capabilities. You should set your Team and Buldle Identifier on the screen that appears.

Key Poll Features To Build in Your App

Stream Chat’s poll support allows people to generate and run polls in message threads. It assists users in voting on different subjects within dedicated groups. You can interact with polls in the following ways:

• Provide multiple answers: Vote by selecting two to 10 different answers.
• Vote anonymously: Users can answer polls with their identities hidden.
• Send suggestions: Allows voters to propose suggestions.
• Add comments: Users can send feedback to already created polls.
• Add custom UIs: The Chat SDK's flexibility helps write custom UIs to override the default poll implementation.

Run the Sample App & Try Polls

Once you’ve installed and configured the sample chat app, you will notice the poll feature is enabled by default. To create a new poll, click the attachment button (plus icon) on the left side of the message composer, as the above preview demonstrates.

Implement Polls and Q&As in Your App

The React Native Chat SDK has ready-built reusable components to enable poll creation in your app. Using its CreatePoll component, you get a modal presentation with form fields allowing users to add polls. Head to the CreatePoll documentation to learn about other associated components and their implementation details.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {
  OverlayProvider,
  Chat,
  Channel,
  CreatePoll,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <CreatePoll sendMessage={sendMessage} {...otherOptionalProps} />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

The above sample code represents a general usage of the SDK's CreatePoll component, which renders the poll creation form. When you render a form with the CreatePoll component, you should implement the following companion components to manage it.

Poll Options Component

This component allows you to implement a limited number of poll options. For example, the poll "On what day should the meeting be?" could have options such as Monday, Tuesday, etc.

Here is how you can implement poll options in your app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  OverlayProvider,
  Chat,
  Channel,
  PollAllOptions,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollAllOptions
            message={message}
            poll={poll}
            {...otherOptionalProps}
          />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

Poll Answers List Component

The PollAnswersList component can render and list possible poll answers using this code snippet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  OverlayProvider,
  Chat,
  Channel,
  PollAnswersList,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollAnswersList
            message={message}
            poll={poll}
            {...otherOptionalProps}
          />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

Poll Results Component

The results component renders the five most recent votes. As shown in this code snippet, it uses the SDK's usePollState hook to list poll results.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Text } from "react-native";
import {
  OverlayProvider,
  Chat,
  Channel,
  PollResults,
  usePollState,
} from "stream-chat-react-native";

const MyPollResultsContent = () => {
  const { options } = usePollState();
  return options.map((option) => <Text>{option.id}</Text>);
};

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollResults
            message={message}
            poll={poll}
            PollResultsContent={MyPollResultsContent}
          />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

The Chat SDK also supports listing full poll option results. Visit the docs to learn more about the PollOptionFullResults component.

Poll Button Components

There are several button components for creating and managing polls. The example code snippet below is a generic poll button.

1
2
3
4
5
6
7
8
import { GenericPollButton } from "stream-chat-react-native";

const button = () => (
  <GenericPollButton
    title="Button title"
    onPress={() => console.log("I got pressed !")}
  />
);

The following button components are also ready to integrate with your poll implementation:

• ViewResultsButton: Uses a modal presentation to launch poll results.
• EndVoteButton: Used to end voting on polls.
• AddCommentButton: A button component for adding feedback on polls.
• ShowAllCommentsButton: Opens a modal that displays a list of answers.
• SuggestOptionButton: A button component that allows users to suggest new options.
• ShowAllOptionsButton: Presents a modal that shows all poll options.
• VoteButton: For voting on an option.
• ShowAllVotesButton: Displays full poll results.

Aside from the above components, the React Native Chat SDK uses the following hooks for rendering polls:

• usePollContext
• useCreatePollContext
• usePollStateStore
• usePollState
• usePollAnswersPagination
• usePollOptionVotesPagination

For example, this code snippet illustrates how to use the usePollStateStore hook to access the state store.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { PollVote, PollState } from "stream-chat";
import { usePollStateStore } from "stream-chat-react-native";

type PollOptionSelectorReturnValue = {
  latestVotesByOption: Record<string, PollVote[]>;
  maxVotedOptionIds: string[];
};

const selector = (nextValue: PollState): PollOptionSelectorReturnValue => ({
  latestVotesByOption: nextValue.latestVotesByOption,
  maxVotedOptionIds: nextValue.maxVotedOptionIds,
});

const { latestVotesByOption, maxVotedOptionIds } = usePollStateStore(selector);

Customize the Polls UI

The Chat SDK provides a flexible way to customize the default reusable components with a bespoke implementation. When integrating the polls functionality, you can design custom UIs for the poll's form and options presentation.

Generally, you can perform two kinds of customizations on the UI:

• Basic theming: This option allows you to match the UI's typography (fonts), icons (symbols), and color to those in your design system or style guide.
• Advanced customization: With this modification type, you can swap the entire poll UI or override a section using your preferred custom-made interface.

Where To Go From Here

Live or real-time polling in chat messaging makes team conversations and discussions more participative and engaging. In this article, you explored a flexible and powerful way to integrate polls into your communication app with Stream’s React Native Chat SDK.

This feature is also available for mobile, web, and gaming platforms like Android, iOS, Flutter, React, Angular, JavaScript, Unity, and Unreal.

To take your implementation further, head to our documentation to discover the required components and hooks available for building interactive polls in your app.