PollOptionFullResults

A component all of the votes for a specific Poll option. The results will be paginated and updated as they change. Needs to be structured inside a Channel component.

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

To access the paginated list of votes, the usePollOptionVotesPagination hook can be used.

Best Practices

  • Render inside Channel to ensure poll context is available.
  • Use usePollOptionVotesPagination for paginated vote lists.
  • Keep full results in a modal or separate screen to reduce clutter.
  • Use PollOptionFullResultsContent for UI changes without rewriting logic.
  • Avoid loading too many votes at once for performance.

General Usage

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

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

Props

PropDescriptionType
messageMessage 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
option *The poll option to display results for.object
additionalFlatListPropsOverride the underlying FlatList props of the PollOptionFullResults.object
PollOptionFullResultsContentComponent used to render the content of the PollOptionFullResults component. Has full access to the Poll reactive state through the usePollState hook. Defaults to PollOptionFullResultsContent.ComponentType

Examples

Custom PollOptionFullResultsContent

import { Text, FlatList } from "react-native";
import {
  OverlayProvider,
  Chat,
  Channel,
  PollOptionFullResults,
  usePollOptionVotesPagination,
  usePollState,
} from "stream-chat-react-native";

// will only display the first page of votes without loading more
const MyPollOptionFullResultsContent = ({ option }) => {
  const { name } = usePollState();
  const { votes } = usePollOptionVotesPagination({ option });
  return (
    <FlatList
      ListHeaderComponent={() => <Text>{name}</Text>}
      data={votes}
      renderItem={({ item }) => <Text>{item.id}</Text>}
    />
  );
};

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollOptionFullResults
            message={message}
            poll={poll}
            option={option}
            PollOptionFullResultsContent={MyPollOptionFullResultsContent}
          />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};
Previous
PollResults
Next
Poll Buttons