docs: finalize docs with answer list customizations

Author: isekovanic

docusaurus/docs/reactnative/assets/guides/custom-poll-flow/answer-list-navigation.png

@@ -13,6 +13,9 @@ import CustomStep12 from '../assets/guides/custom-poll-flow/custom-step-1-2.png'
 import CustomCreation1 from '../assets/guides/custom-poll-flow/custom-creation-1.png';
 import CustomCreation2 from '../assets/guides/custom-poll-flow/custom-creation-2.png';
 
+import CustomCommentsCreation1 from '../assets/guides/custom-poll-flow/custom-comments-creation-1.png';
+import CustomCommentsCreation2 from '../assets/guides/custom-poll-flow/custom-comments-creation-2.png';
+
 In this cookbook we'll go over how we can create and customize a `Channel` screen containing the [`Poll` component](../ui-components/poll.mdx), along with adding navigation to all of its underlying screens rather than relying on modals.
 
 ### Prerequisites
@@ -402,7 +405,7 @@ giving us the final UI:
   <img src={CustomCreation2} alt='Step 1-2' style={{ width: '40%' }} />
 </div>
 
-As one final step, let's change the background color of our `Poll`s. Since all `Poll` components are `theme` compatible, we can do this by overriding the default theme:
+Going forward with customizations, let's change the background color of our `Poll`s. Since all `Poll` components are `theme` compatible, we can do this by overriding the default theme:
 
 ```tsx
 import {
@@ -473,3 +476,244 @@ which gives us a changed `Poll` background:
 :::note
 Make sure that the `theme` is set above your `OverlayProvider` to make sure that the `Poll` customizations are also reflected on the message preview whenever it's long pressed.
 :::
+
+As one final step, let's assume we want to add an `PollAnswersList`; however the default UI doesn't fit our requirements and we want something more custom.
+
+To do this, we first need to add the `ShowAllCommentsButton` and `AddCommentButton` components to our custom `Buttons` UI:
+
+```tsx
+import {
+  // ...rest of the imports
+  // highlight-start
+  ShowAllCommentsButton,
+  AddCommentButton
+ // highlight-end
+} from 'stream-chat-react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+// ... rest of the components
+
+const MyPollButtons = () => {
+  return (
+    <>
+      <ShowAllOptionsButton />
+      // highlight-start
+      <ShowAllCommentsButton />
+      <AddCommentButton />
+      // highlight-end
+      <ViewResultsButton
+        onPress={({ message, poll }) =>
+          navigation.navigate('PollResultsScreen', {
+            message,
+            poll,
+          });
+        }
+      />
+      <EndVoteButton />
+    </>
+  )
+}
+
+// ... the ChannelScreen component
+```
+
+Next, to actually create comments we need a poll that accepts answers (comments) as well as adding a comment. We can do this by enabling the option when creating a poll and then clicking on the `Add Comment` button:
+
+<div style={{ display: 'flex', gap: '1rem', justifyContent: 'space-between' }}>
+  <img src={CustomCommentsCreation1} alt='Step 1-1' style={{ width: '40%' }} />
+  <img src={CustomCommentsCreation2} alt='Step 1-2' style={{ width: '40%' }} />
+</div>
+
+Now, similar to how we handled the other screens we would want to create a separate `Screen` in the navigation stack for our `AnswersList`. For now, we'll use the default UI:
+
+```tsx
+import {
+  // ...rest of the imports
+  // highlight-next-line
+  PollAnswersList,
+} from 'stream-chat-react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+// ... rest of the components
+
+const MyPollButtons = () => {
+  return (
+    <>
+      <ShowAllOptionsButton />
+      // highlight-start
+      <ShowAllCommentsButton
+          onPress={({ message, poll }) => {
+            navigation.navigate('PollAnswersScreen', {
+              message,
+              poll,
+            });
+          }}
+        />
+      // highlight-end
+      <AddCommentButton />
+      <ViewResultsButton
+        onPress={({ message, poll }) =>
+          navigation.navigate('PollResultsScreen', {
+            message,
+            poll,
+          });
+        }
+      />
+      <EndVoteButton />
+    </>
+  )
+}
+
+// highlight-start
+const PollAnswersScreen = ({
+  route: {
+    params: { message, poll },
+  },
+}) => {
+  const navigation = useNavigation();
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <PollModalHeader title={'All Poll Answers'} onPress={() => navigation.goBack()} />
+      <PollAnswersList message={message} poll={poll} />
+    </SafeAreaView>
+  );
+};
+// highlight-end
+
+const ChannelScreen = () => {
+  const navigation = useNavigation();
+  return (
+    <ThemeProvider style={myTheme}>
+      <OverlayProvider>
+        <Chat client={client}>
+          <Channel
+            channel={channel}
+            PollContent={MyPollContent}
+            openPollCreationDialog={({ sendMessage }) => navigation.navigate('CreatePollScreen', { sendMessage })}
+          >
+            <ChannelStack.Navigator initialRouteName={'ChannelMessageList'}>
+              <ChannelStack.Screen
+                name={'ChannelMessageList'}
+                options={{ headerShown: false }}
+                component={ChannelMessageList}
+              />
+              <ChannelStack.Screen
+                name={'PollResultsScreen'}
+                options={{ headerShown: false }}
+                component={PollResultsScreen}
+              />
+              // highlight-start
+              <ChannelStack.Screen
+                name={'PollAnswersScreen'}
+                options={{ headerShown: false }}
+                component={PollAnswersScreen}
+              />
+              // highlight-end
+              <ChannelStack.Group screenOptions={{ presentation: 'modal' }}>
+                <ChannelStack.Screen
+                  name={'CreatePollScreen'}
+                  options={{ headerShown: false }}
+                  component={MyCreatePollContent}
+                />
+              </ChannelStack.Group>
+            </ChannelStack.Navigator>
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    </ThemeProvider>
+  );
+};
+```
+
+which will give allow us to navigate to the default `PollAnswersList` UI:
+
+![Answer List Navigation](../assets/guides/custom-poll-flow/answer-list-navigation.png)
+
+Now, let's finally customize the UI. To achieve this we can override the `PollAnswersListContent` of our `PollAnswersList`.
+
+Since the list of answers can be very large and we want to be able to still display all answers, we will use the `usePollAnswersPagination` hook to get them:
+
+```tsx
+import {
+  // ...rest of the imports
+  // highlight-next-line
+  usePollAnswersPagination,
+} from 'stream-chat-react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+// ... rest of the components
+
+// highlight-start
+const LoadingIndicator = () => { /* some LoadingIndicator logic here */ }
+
+const MyItem = ({ item }) => {
+  const { answer_text, user } = item;
+  return (
+    <Text>
+      {user.name} commented: {answer_text}
+    </Text>
+  );
+};
+
+const MyPollAnswersContent = () => {
+  const { pollAnswers, loading, loadMore } = usePollAnswersPagination();
+  return (
+    <FlatList
+      contentContainerStyle={{ flex: 1, padding: 16 }}
+      data={pollAnswers}
+      renderItem={MyItem}
+      onEndReached={loadMore}
+      ListFooterComponent={loading ? <LoadingIndicator /> : null}
+    />
+  );
+};
+// highlight-end
+
+const PollAnswersScreen = ({
+  route: {
+    params: { message, poll },
+  },
+}) => {
+  const navigation = useNavigation();
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <PollModalHeader title={'All Poll Answers'} onPress={() => navigation.goBack()} />
+      // highlight-start
+      <PollAnswersList
+        message={message}
+        poll={poll}
+        PollAnswersListContent={MyPollAnswersContent}
+      />
+      // highlight-end
+    </SafeAreaView>
+  );
+};
+
+// ... the Channel screen
+```
+
+And we get the final content:
+
+![Custom Answers List](../assets/guides/custom-poll-flow/custom-answers-list.png)
+
+The list will be fully compatible with loading the pagination when scrolling to the bottom and displaying a loading indicator whenever that happens as well.
+
+With that, we have finished the customizations we wanted to do for our polls.
+
+As a last note; any components that you'd like to reuse from the default UI are free to be imported from within the SDK.
+
+An extensive list of these includes:
+
+- All buttons mentioned [here](../ui-components/poll-buttons.mdx)
+- `CreatePollContent`
+- `PollContent`
+- `PollButtons`
+- `PollHeader`
+- `PollModalHeader`
+- `PollInputDialog`
+- `CreatePollIcon`
+- `PollOption`
+- `PollResultsContent`
+- `PollResultsItem`
+- `PollVote`
+- `PollAllOptionsContent`