PollAnswersList

A component used to render a list of answers that a Poll has. The results will be paginated and only one answer per user is allowed. Needs to be structured inside a Channel component.

It will render its default PollAnswersListContent, 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 answers, the usePollAnswersPagination hook can be used.

Best Practices

  • Render inside Channel to ensure poll context is available.
  • Use usePollAnswersPagination for pagination instead of custom fetches.
  • Keep answer lists light to avoid scroll performance issues.
  • Use PollAnswersListContent to customize UI while preserving logic.
  • Respect one-answer-per-user constraints in your UI.

General Usage

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

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
additionalFlatListPropsOverride the underlying FlatList props of the PollAnswersList.object
PollAnswersListContentComponent used to render the content of the PollAnswersList component. Has full access to the Poll reactive state through the usePollState hook. Defaults to PollAnswersListContent.ComponentType

Examples

Custom PollAnswersListContent

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

// will only display the first page of answers without loading more
const MyPollAnswersListContent = () => {
  const { name } = usePollState();
  const { pollAnswers } = usePollAnswersPagination();
  return (
    <FlatList
      ListHeaderComponent={() => <Text>{name}</Text>}
      data={pollAnswers}
      renderItem={({ item }) => <Text>{item.answer_text}</Text>}
    />
  );
};

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollAnswersList
            message={message}
            poll={poll}
            PollAnswersListContent={MyPollAnswersListContent}
          />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};
Previous
PollAllOptions
Next
PollResults