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 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.

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.

onPress *

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

Example usage

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.

Example usage

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

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.

Example usage

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.

Example usage

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.

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.

Example usage

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.

Example usage

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.

onPress

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

Example usage

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.

onPress

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

Example usage

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}`,
      )
    }
  />
);