PollAllOptions

A component used to render a list of all of the options that a Poll has. Voting on each option on this screen is also enabled. Needs to be structured inside a Channel component.

It will render its default PollAllOptionsContent, 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 actions.
Use PollAllOptionsContent to customize UI while keeping poll logic intact.
Keep option lists scannable and avoid heavy rendering.
Use usePollState for reactive updates rather than custom state.
Provide clear affordances for voting and selection.

General Usage

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

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollAllOptions
            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 `PollAllOptions`.	`object`
`PollAllOptionsContent`	Component used to render the content of the `PollAllOptions` component. Has full access to the `Poll` reactive state through the `usePollState` hook. Defaults to `PollAllOptionsContent`.	`ComponentType`

Examples

Custom PollAllOptionsContent

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

const MyPollAllOptionsContent = () => {
  const { options } = usePollState();
  return options.map((option) => <Text>{option.id}</Text>);
};

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <PollAllOptions
            message={message}
            poll={poll}
            PollAllOptionsContent={MyPollAllOptionsContent}
          />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

Poll

PollAnswersList