PollResults

A component used to render a list of all of the votes per option that a Poll has. Each option will display the 5 most recent votes. If an option has more than 5 votes it will add a button at the bottom that opens the PollOptionFullResults Modal. Needs to be structured inside a Channel component.

It will render its default PollResultsContent, which can be overridden for custom UI. Its children have access to the entire poll state through the usePollState hook.

Best Practices

Render inside Channel to access poll context and state.
Keep results UI scannable; avoid showing too many voters inline.
Use the full results modal for large vote lists to reduce clutter.
Use PollResultsContent for UI changes without rewriting poll logic.
Respect pagination and loading states when showing results.

General Usage

import {
  OverlayProvider,
  Chat,
  Channel,
  PollResults,
} from "stream-chat-react-native";

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

Props

Prop	Description	Type
`message`	Message object.	`Message` type
`poll` *	An instance of the `Poll` class containing reactive state. Used by `usePollContext`, `usePollStateStore` and `usePollState` hooks. If you need the `Poll` instance you may get it from `client.polls.fromState(pollId)`.	`object`
`additionalScrollViewProps`	Override the underlying `ScrollView` props of the `PollResults`.	`object`
`PollResultsContent`	Component used to render the content of the `PollResults` component. Has full access to the `Poll` reactive state through the `usePollState` hook. Defaults to `PollResultsContent`.	`ComponentType`

Examples

Custom PollResultsContent

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>
  );
};

PollAnswersList

PollOptionFullResults