# 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`](https://getstream.io/chat/docs/sdk/react-native/ui-components/poll-option-full-results/) Modal. Needs to be structured inside a [`Channel` component](https://getstream.io/chat/docs/sdk/react-native/core-components/channel/).

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.

## Best Practices

- Render inside `Channel` to access poll context and state.
- Keep results UI scannable; avoid showing too many voters inline.
- Use the full results modal for large vote lists to reduce clutter.
- Use `PollResultsContent` for UI changes without rewriting poll logic.
- Respect pagination and loading states when showing results.

## General Usage

```tsx
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

| Prop                        | Description                                                                                                                                                                                                                                                                                     | Type           |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `message`                   | Message object.                                                                                                                                                                                                                                                                                 | `Message` type |
| `poll` \*                   | An instance of the [`Poll` class](https://github.com/GetStream/stream-chat-js/blob/master/src/poll.ts) 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`](https://reactnative.dev/docs/scrollview#props) props of the `PollResults`.                                                                                                                                                                               | `object`       |

## UI Component Overrides

The `PollResultsContent` UI component is not passed as a prop on `PollResults`. Instead, override it through the [`WithComponents`](https://getstream.io/chat/docs/sdk/react-native/customization/custom-components/) provider higher in the tree; the component reads it from `useComponentsContext()`.

| Override             | Description                                                                                                                                                                                                                                                                                         | Type            |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| `PollResultsContent` | Component used to render the content of the `PollResults` component. Has full access to the `Poll` reactive state through the `usePollState` hook. Defaults to [`PollResultsContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/PollResults.tsx). | `ComponentType` |

## Examples

### Custom PollResultsContent

```tsx
import { Text } from "react-native";
import {
  OverlayProvider,
  Chat,
  Channel,
  WithComponents,
  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}>
        <WithComponents
          overrides={{ PollResultsContent: MyPollResultsContent }}
        >
          <Channel channel={channel}>
            <PollResults message={message} poll={poll} />
          </Channel>
        </WithComponents>
      </Chat>
    </OverlayProvider>
  );
};
```

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/poll-results/](https://getstream.io/chat/docs/sdk/react-native/ui-components/poll-results/).