# Poll Buttons

For the purposes of managing the `Poll` UI more easily, we expose various button components that have an overridable `onPress` property in case the default behaviour needs to be changed.

The `onPress` property should be typically used to navigate to the various `Poll` screens using a popular navigation library rather than relying on the default [React Native Modal](https://reactnative.dev/docs/modal) implementation. Integrators are encouraged to handle navigation to these screens like this rather than relying on the defaults.

In order to be able to render the screens, all of the required props will be passed to the `onPress` method.

Conversely, if one wishes to use the default button behaviour they may render them without any props.

All of the buttons need to be structured inside a [`Channel` component](/chat/docs/sdk/react-native/v8/core-components/channel/).

## Best Practices

- Render poll buttons inside `Channel` to ensure required context.
- Use `onPress` to route to your own screens instead of default modals.
- Keep button handlers lightweight and avoid in-render side effects.
- Use provided props in `onPress` to avoid extra lookups.
- If you use default behavior, don’t override `onPress`.

## `GenericPollButton`

A generic button component that has the default UI encapsulated within it.

### Props

#### `title` \*

The text that is going to be rendered as the button's content.

| Type   |
| ------ |
| string |

#### `onPress` \*

A press handler that will be invoked whenever the button is pressed.

| Type         |
| ------------ |
| `() => void` |

### Example usage

```tsx
import { GenericPollButton } from "stream-chat-react-native";

const button = () => (
  <GenericPollButton
    title="Button title"
    onPress={() => console.log("I got pressed !")}
  />
);
```

## `ViewResultsButton`

A button responsible for opening the `PollResults` modal.

### Props

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                          |
| ----------------------------- |
| `({ message, poll }) => void` |

### Example usage

```tsx
import { ViewResultsButton } from "stream-chat-react-native";

const button = () => (
  <ViewResultsButton
    onPress={({ message, poll }) =>
      console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)
    }
  />
);
```

## `EndVoteButton`

A button responsible for closing voting on the `Poll`.

### Example usage

```tsx
import { EndVoteButton } from "stream-chat-react-native";

const button = () => <EndVoteButton />;
```

## `AddCommentButton`

A button responsible for opening the `Poll` input dialog used to add a new comment to it.

### Props

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                          |
| ----------------------------- |
| `({ message, poll }) => void` |

### Example usage

```tsx
import { AddCommentButton } from "stream-chat-react-native";

const button = () => (
  <AddCommentButton
    onPress={({ message, poll }) =>
      console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)
    }
  />
);
```

## `ShowAllCommentsButton`

A button responsible for opening the `PollAnswersList` modal.

### Props

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                          |
| ----------------------------- |
| `({ message, poll }) => void` |

### Example usage

```tsx
import { ShowAllCommentsButton } from "stream-chat-react-native";

const button = () => (
  <ShowAllCommentsButton
    onPress={({ message, poll }) =>
      console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)
    }
  />
);
```

## `AnswerListAddCommentButton`

A button responsible for opening the `Poll` input dialog used to add a new comment to it, from within `PollAnswersList`.

It has the same props and usage as [`AddCommentButton`](#addcommentbutton).

## `SuggestOptionButton`

A button responsible for opening the `Poll` input dialog used to suggest new options to the it.

### Props

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                          |
| ----------------------------- |
| `({ message, poll }) => void` |

### Example usage

```tsx
import { SuggestOptionButton } from "stream-chat-react-native";

const button = () => (
  <SuggestOptionButton
    onPress={({ message, poll }) =>
      console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)
    }
  />
);
```

## `ShowAllOptionsButton`

A button responsible for opening the `PollAllOptions` modal.

### Props

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                          |
| ----------------------------- |
| `({ message, poll }) => void` |

### Example usage

```tsx
import { ShowAllOptionsButton } from "stream-chat-react-native";

const button = () => (
  <ShowAllOptionsButton
    onPress={({ message, poll }) =>
      console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)
    }
  />
);
```

## `VoteButton`

A button responsible for voting on a specific option within a `Poll`.

### Props

#### `option` \*

The `poll` option that we want to vote on.

| Type   |
| ------ |
| object |

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                          |
| ----------------------------- |
| `({ message, poll }) => void` |

### Example usage

```tsx
import { VoteButton } from "stream-chat-react-native";

const button = () => (
  <VoteButton
    option={option}
    onPress={({ message, poll }) =>
      console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)
    }
  />
);
```

## `ShowAllVotesButton`

A button responsible for opening the `PollOptionFullResults` modal.

### Props

#### `option` \*

The `poll` option that we want to vote on.

| Type   |
| ------ |
| object |

#### `onPress`

A press handler that will be invoked whenever the button is pressed.

| Type                                  |
| ------------------------------------- |
| `({ message, option, poll }) => void` |

### Example usage

```tsx
import { ShowAllVotesButton } from "stream-chat-react-native";

const button = () => (
  <ShowAllVotesButton
    option={option}
    onPress={({ message, option, poll }) =>
      console.log(
        `Poll ID: ${poll.id}; Message ID: ${message.id}; Option ID: ${option.id}`,
      )
    }
  />
);
```


---

This page was last updated at 2026-04-17T17:33:44.908Z.

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