React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTimport { OverlayProvider, Chat, Channel, PollOptionFullResults } from 'stream-chat-react-native';
const App = () => {
return (
<OverlayProvider>
<Chat client={client}>
<Channel channel={channel}>
<PollOptionFullResults message={message} poll={poll} {...otherOptionalProps} />
</Channel>
</Chat>
</OverlayProvider>
);
};
PollOptionFullResults
A component all of the votes for a specific Poll option. The results will be paginated and updated as they change. Needs to be structured inside a Channel component.
It will render its default PollOptionFullResultsContent, 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 votes, the usePollOptionVotesPagination 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 |
option *
The poll option that we want to display the results for.
| Type |
|---|
| object |
additionalFlatListProps
A prop used to override the underlying FlatList props of the PollOptionFullResults.
const flatListProps = { bounces: true };
<PollOptionFullResults additionalFlatListProps={flatListProps} />;
| Type |
|---|
| object |
PollOptionFullResultsContent
A Component prop used to render the content of the PollOptionFullResults component.
The component has full access to the entire Poll reactive state through the usePollState hook.
| Type | Default |
|---|---|
| ComponentType | PollOptionFullResultsContent |
Usage
import { Text, FlatList } from 'react-native';
import {
OverlayProvider,
Chat,
Channel,
PollOptionFullResults,
usePollOptionVotesPagination,
usePollState,
} from 'stream-chat-react-native';
// will only display the first page of votes without loading more
const MyPollOptionFullResultsContent = ({ option }) => {
const { name } = usePollState();
const { votes } = usePollOptionVotesPagination({ option });
return (
<FlatList
ListHeaderComponent={() => <Text>{name}</Text>}
data={votes}
renderItem={({ item }) => <Text>{item.id}</Text>}
/>
);
};
const App = () => {
return (
<OverlayProvider>
<Chat client={client}>
<Channel channel={channel}>
<PollOptionFullResults
message={message}
poll={poll}
option={option}
PollOptionFullResultsContent={MyPollOptionFullResultsContent}
/>
</Channel>
</Chat>
</OverlayProvider>
);
};