chore: add docs for more screens and move vote button logic inside

Author: isekovanic

docusaurus/docs/reactnative/ui-components/poll-answers-list.mdx

@@ -10,6 +10,8 @@ A component used to render a list of answers that a `Poll` has. The results will
 
 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.
+
 ## Props
 
 ### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}

docusaurus/docs/reactnative/ui-components/poll-option-full-results.mdx

@@ -2,3 +2,55 @@
 id: poll-option-full-results
 title: PollOptionFullResults
 ---
+
+import MessageProp from '../common-content/contexts/message-context/message.mdx';
+import Poll from '../common-content/contexts/poll-context/poll.mdx';
+
+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](../core-components/channel).
+
+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.
+
+## Props
+
+### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
+
+<MessageProp />
+
+### `poll` *
+
+<Poll />
+
+### `option` *
+
+The `poll` option that we want to display the results for.
+
+| Type   |
+| ------ |
+| object |
+
+### `additionalFlatListProps`
+
+A prop used to override the underlying [`FlatList`](https://reactnative.dev/docs/flatlist#props) props of the `PollOptionFullResults`.
+
+```jsx
+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`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/PollOptionFullResults.tsx) |
+

package/src/components/Poll/components/Button.tsx

@@ -35,8 +35,8 @@ export type PollButtonProps<
 };
 
 export type PollVoteButtonProps = {
-  onPress?: () => void;
-};
+  option: PollOption;
+} & Pick<PollButtonProps, 'onPress'>;
 
 export const GenericPollButton = ({ onPress, title }: { onPress?: () => void; title?: string }) => {
   const {
@@ -326,7 +326,8 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
   );
 };
 
-export const VoteButton = ({ onPress, option }: PollVoteButtonProps & { option: PollOption }) => {
+export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
+  const { message, poll } = usePollContext();
   const { is_closed, ownVotesByOptionId } = usePollState();
   const ownCapabilities = useOwnCapabilitiesContext();
 
@@ -341,9 +342,26 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps & { option:
     },
   } = useTheme();
 
+  const toggleVote = useCallback(async () => {
+    if (ownVotesByOptionId[option.id]) {
+      await poll.removeVote(ownVotesByOptionId[option.id]?.id, message.id);
+    } else {
+      await poll.castVote(option.id, message.id);
+    }
+  }, [message.id, option.id, ownVotesByOptionId, poll]);
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    toggleVote();
+  }, [message, onPress, poll, toggleVote]);
+
   return ownCapabilities.castPollVote && !is_closed ? (
     <TouchableOpacity
-      onPress={onPress}
+      onPress={onPressHandler}
       style={[
         styles.voteContainer,
         {

package/src/components/Poll/components/PollOption.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { ScrollViewProps, StyleSheet, Text, View } from 'react-native';
 
@@ -8,13 +8,7 @@ import { PollOption as PollOptionClass, PollState, PollVote } from 'stream-chat'
 
 import { VoteButton } from './Button';
 
-import {
-  PollContextProvider,
-  PollContextValue,
-  useMessageContext,
-  usePollContext,
-  useTheme,
-} from '../../../contexts';
+import { PollContextProvider, PollContextValue, useTheme } from '../../../contexts';
 
 import { DefaultStreamChatGenerics } from '../../../types/types';
 import { Avatar } from '../../Avatar/Avatar';
@@ -93,17 +87,7 @@ export const PollAllOptions = ({
 );
 
 export const PollOption = ({ option, showProgressBar = true }: PollOptionProps) => {
-  const { is_closed, ownVotesByOptionId, vote_counts_by_option } = usePollState();
-  const { poll } = usePollContext();
-  const { message } = useMessageContext();
-
-  const toggleVote = useCallback(async () => {
-    if (ownVotesByOptionId[option.id]) {
-      await poll.removeVote(ownVotesByOptionId[option.id]?.id, message.id);
-    } else {
-      await poll.castVote(option.id, message.id);
-    }
-  }, [message.id, option.id, ownVotesByOptionId, poll]);
+  const { is_closed, vote_counts_by_option } = usePollState();
 
   const { latest_votes_by_option, maxVotedOptionIds } = usePollStateStore(selector);
 
@@ -161,7 +145,7 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
   return (
     <View style={[styles.wrapper, wrapper]}>
       <View style={[styles.container, container]}>
-        <VoteButton onPress={toggleVote} option={option} />
+        <VoteButton option={option} />
         <Text style={[styles.text, { color: black }, text]}>{option.text}</Text>
         <View style={{ flexDirection: 'row' }}>
           {relevantVotes.map((vote: PollVote) => (