This is documentation for Stream Chat React Native SDK v5, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v6).

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.

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

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

`additionalScrollViewProps`

A prop used to override the underlying ScrollView props of the PollResults.

const flatListProps = { bounces: true };

<PollResults additionalFlatListProps={flatListProps} />;

Type
object

`PollResultsContent`

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

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

Type	Default
ComponentType	`PollResultsContent`

Usage

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