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.

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

message

Message object.

Type
Message type

poll *

An instance of the Poll class containing reactive state.

It is used by the underlying usePollContext, usePollStateStore and usePollState hooks to provide us with the reactive Poll state.

If you need the Poll instance you may get it from client.polls.fromState(pollId).

Type
object

additionalFlatListProps

A prop used to override the underlying FlatList props of the PollAnswersList.

const flatListProps = { bounces: true };

<PollAnswersList additionalFlatListProps={flatListProps} />;
Type
object

PollAnswersListContent

A Component prop used to render the content of the PollAnswersList component.

The component has full access to the entire Poll reactive state through the usePollState hook.

TypeDefault
ComponentTypePollAnswersListContent

Usage

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>
  );
};
© Getstream.io, Inc. All Rights Reserved.