import { OverlayProvider, Chat, Channel, PollAnswersList } from 'stream-chat-react-native';
const App = () => {
return (
<OverlayProvider>
<Chat client={client}>
<Channel channel={channel}>
<PollAnswersList message={message} poll={poll} {...otherOptionalProps} />
</Channel>
</Chat>
</OverlayProvider>
);
};
PollAnswersList
A component used to render a list of answers that a Poll
has. The results will be paginated and only one answer per user is allowed. Needs to be structured inside a Channel
component.
It will render its default PollAnswersListContent
, which can be overridden for custom UI. Its children have access to the entire poll
state through the usePollState
hook.
To access the paginated list of answers, the usePollAnswersPagination
hook can be used.
General Usage
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 |
additionalFlatListProps
A prop used to override the underlying FlatList
props of the PollAnswersList
.
const flatListProps = { bounces: true };
<PollAnswersList additionalFlatListProps={flatListProps} />;
Type |
---|
object |
PollAnswersListContent
A Component
prop used to render the content of the PollAnswersList
component.
The component has full access to the entire Poll
reactive state through the usePollState
hook.
Type | Default |
---|---|
ComponentType | PollAnswersListContent |
Usage
import { Text, FlatList } from 'react-native';
import {
OverlayProvider,
Chat,
Channel,
PollAnswersList,
usePollAnswersPagination,
usePollState,
} from 'stream-chat-react-native';
// will only display the first page of answers without loading more
const MyPollAnswersListContent = () => {
const { name } = usePollState();
const { pollAnswers } = usePollAnswersPagination();
return (
<FlatList
ListHeaderComponent={() => <Text>{name}</Text>}
data={pollAnswers}
renderItem={({ item }) => <Text>{item.answer_text}</Text>}
/>
);
};
const App = () => {
return (
<OverlayProvider>
<Chat client={client}>
<Channel channel={channel}>
<PollAnswersList message={message} poll={poll} PollAnswersListContent={MyPollAnswersListContent} />
</Channel>
</Chat>
</OverlayProvider>
);
};