stream-chat-react-native-core 9.0.0-beta.6 → 9.0.0-beta.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.0.0-beta.6",
+  "version": "9.0.0-beta.7",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -168,7 +168,6 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   const dragEnd = async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
   };
 
   const onSpeedChangeHandler = async () => {

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -20,6 +20,7 @@ import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDel
 import dispatchChannelHiddenEvent from '../../../mock-builders/event/channelHidden';
 import dispatchChannelTruncatedEvent from '../../../mock-builders/event/channelTruncated';
 import dispatchChannelUpdatedEvent from '../../../mock-builders/event/channelUpdated';
+import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchNotificationAddedToChannelEvent from '../../../mock-builders/event/notificationAddedToChannel';
@@ -75,6 +76,11 @@ const ChannelListSwipeActionsProbe = () => {
   return <Text testID='swipe-actions-enabled'>{`${swipeActionsEnabled}`}</Text>;
 };
 
+const ChannelListRefreshingProbe = () => {
+  const { refreshing } = useChannelsContext();
+  return <Text testID='refreshing'>{`${refreshing}`}</Text>;
+};
+
 const ChannelPreviewContent = ({ unread }) => <Text testID='preview-unread'>{`${unread}`}</Text>;
 
 const ChannelListWithChannelPreview = () => {
@@ -805,6 +811,43 @@ describe('ChannelList', () => {
       });
     });
 
+    describe('connection.changed', () => {
+      it('should keep background reconnection refreshes debounced and out of pull-to-refresh UI', async () => {
+        useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+        const deferredPromise = new DeferredPromise();
+        const dateNowSpy = jest.spyOn(Date, 'now');
+        dateNowSpy.mockReturnValueOnce(0);
+        dateNowSpy.mockReturnValue(6000);
+
+        render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} List={ChannelListRefreshingProbe} />
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+        });
+
+        chatClient.queryChannels = jest.fn(() => deferredPromise.promise);
+
+        act(() => dispatchConnectionChangedEvent(chatClient, false));
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        await waitFor(() => {
+          expect(chatClient.queryChannels).toHaveBeenCalled();
+        });
+
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        expect(chatClient.queryChannels).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+
+        deferredPromise.resolve([testChannel1]);
+        dateNowSpy.mockRestore();
+      });
+    });
+
     describe('channel.truncated', () => {
       it('should call the `onChannelTruncated` function prop, if provided', async () => {
         useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -24,7 +24,7 @@ type Parameters = {
 
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
+type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
@@ -68,6 +68,7 @@ export const usePaginatedChannels = ({
     const hasUpdatedData =
       queryType === 'loadChannels' ||
       queryType === 'refresh' ||
+      queryType === 'backgroundRefresh' ||
       [
         JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
         JSON.stringify(sortRef.current) !== JSON.stringify(sort),
@@ -129,7 +130,7 @@ export const usePaginatedChannels = ({
     setActiveQueryType(null);
   };
 
-  const refreshList = async () => {
+  const refreshList = async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
     if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
@@ -137,7 +138,7 @@ export const usePaginatedChannels = ({
     }
 
     lastRefresh.current = Date.now();
-    await queryChannels('refresh');
+    await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
   };
 
   const reloadList = async () => {
@@ -167,7 +168,9 @@ export const usePaginatedChannels = ({
       'connection.changed',
       async (event) => {
         if (event.online) {
-          await refreshList();
+          // Reconnection refreshes should stay silent, but still share the same debounce
+          // path as pull-to-refresh.
+          await refreshList({ isBackground: true });
         }
       },
     );
@@ -195,7 +198,7 @@ export const usePaginatedChannels = ({
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
     refreshing: activeQueryType === 'refresh',
-    refreshList,
+    refreshList: () => refreshList(),
     reloadList,
     staticChannelsActive,
   };

package/src/components/Message/MessageItemView/MessageFooter.tsx

@@ -37,7 +37,7 @@ type MessageFooterPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<MessagesContextValue, 'MessageStatus'> &
+  Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
@@ -50,6 +50,7 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     members,
     message,
     MessageStatus,
+    MessageTimestamp,
     showMessageStatus,
   } = props;
   const styles = useStyles();
@@ -77,9 +78,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   return (
     <View style={[styles.container, container]} testID='message-status-time'>
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
-        <Text style={[styles.name, name]}>{message.user.name}</Text>
+        <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
+          {message.user.name}
+        </Text>
       ) : null}
-      {showMessageStatus && <MessageStatus formattedDate={formattedDate} timestamp={date} />}
+      {showMessageStatus ? <MessageStatus /> : null}
+      <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
       {isEdited ? <Text style={[styles.editedText, editedText]}>{t('Edited')}</Text> : null}
     </View>
   );
@@ -201,6 +205,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
+        maxWidth: '100%',
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'center',
@@ -208,6 +213,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       name: {
+        flexShrink: 1,
         color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextUsername,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -6,10 +6,6 @@ import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Check } from '../../../icons/Check';
 import { CheckAll } from '../../../icons/CheckAll';
@@ -21,14 +17,10 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageStatusPropsWithContext = Pick<
   MessageContextValue,
   'deliveredToCount' | 'message' | 'readBy'
-> &
-  Pick<MessagesContextValue, 'MessageTimestamp'> & {
-    formattedDate?: string | Date;
-    timestamp?: string | Date;
-  };
+>;
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { deliveredToCount, formattedDate, message, readBy, timestamp, MessageTimestamp } = props;
+  const { deliveredToCount, message, readBy } = props;
 
   const styles = useStyles();
 
@@ -92,7 +84,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           {...checkIcon}
         />
       ) : null}
-      <MessageTimestamp formattedDate={formattedDate} timestamp={timestamp} />
     </View>
   );
 };
@@ -101,20 +92,8 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const {
-    deliveredToCount: prevDeliveredBy,
-    message: prevMessage,
-    readBy: prevReadBy,
-    formattedDate: prevFormattedDate,
-    timestamp: prevTimestamp,
-  } = prevProps;
-  const {
-    deliveredToCount: nextDeliveredBy,
-    message: nextMessage,
-    readBy: nextReadBy,
-    formattedDate: nextFormattedDate,
-    timestamp: nextTimestamp,
-  } = nextProps;
+  const { deliveredToCount: prevDeliveredBy, message: prevMessage, readBy: prevReadBy } = prevProps;
+  const { deliveredToCount: nextDeliveredBy, message: nextMessage, readBy: nextReadBy } = nextProps;
 
   const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
   if (!deliveredByEqual) {
@@ -132,16 +111,6 @@ const areEqual = (
     return false;
   }
 
-  const timestampEqual = prevTimestamp === nextTimestamp;
-  if (!timestampEqual) {
-    return false;
-  }
-
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) {
-    return false;
-  }
-
   return true;
 };
 
@@ -155,7 +124,6 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 export const MessageStatus = (props: MessageStatusProps) => {
   const { channel } = useChannelContext();
   const { deliveredToCount, message, readBy } = useMessageContext();
-  const { MessageTimestamp } = useMessagesContext();
 
   const channelMembersCount = Object.keys(channel?.state.members).length;
 
@@ -167,7 +135,6 @@ export const MessageStatus = (props: MessageStatusProps) => {
         deliveredToCount,
         message,
         readBy,
-        MessageTimestamp,
       }}
       {...props}
     />

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -108,7 +108,6 @@ export const AudioRecordingPreview = () => {
   const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
   });
 
   return (

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { LocalVoiceRecordingAttachment } from 'stream-chat';
 
@@ -12,14 +12,11 @@ import { resampleWaveformData } from '../utils/audioSampling';
 
 /**
  * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
- *
- * FIXME: Change the name to `useAudioRecorder` in the next major version as the hook will only be used for audio recording.
  */
 export const useAudioRecorder = ({
   audioRecorderManager,
   sendMessage,
 }: Pick<MessageInputContextValue, 'audioRecorderManager' | 'sendMessage'>) => {
-  const [isScheduledForSubmit, setIsScheduleForSubmit] = useState(false);
   const { attachmentManager } = useMessageComposer();
 
   /**
@@ -43,13 +40,6 @@ export const useAudioRecorder = ({
     [stopVoiceRecording],
   );
 
-  useEffect(() => {
-    if (isScheduledForSubmit) {
-      sendMessage();
-      setIsScheduleForSubmit(false);
-    }
-  }, [isScheduledForSubmit, sendMessage]);
-
   /**
    * Function to start voice recording. Will return whether access is granted
    * with regards to the microphone permission as that's how the underlying
@@ -113,8 +103,8 @@ export const useAudioRecorder = ({
         audioRecorderManager.reset();
 
         if (sendOnComplete) {
-          await attachmentManager.uploadAttachment(audioFile);
-          setIsScheduleForSubmit(true);
+          attachmentManager.upsertAttachments([audioFile]);
+          sendMessage();
         } else {
           await attachmentManager.uploadAttachment(audioFile);
         }
@@ -122,7 +112,7 @@ export const useAudioRecorder = ({
         console.log('Error uploading voice recording: ', error);
       }
     },
-    [audioRecorderManager, attachmentManager, stopVoiceRecording],
+    [audioRecorderManager, attachmentManager, sendMessage, stopVoiceRecording],
   );
 
   return {

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -291,6 +291,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
           </Text>
           <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
             <FlatList
+              showsHorizontalScrollIndicator={false}
               contentContainerStyle={[styles.contentContainer, contentContainer]}
               data={selectorReactions}
               getItemLayout={getItemLayout}

package/src/components/Poll/components/PollAnswersList.tsx

@@ -9,6 +9,7 @@ import { PollInputDialog } from './PollInputDialog';
 import {
   PollContextProvider,
   PollContextValue,
+  useChatContext,
   usePollContext,
   useTheme,
   useTranslationContext,
@@ -27,6 +28,8 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
   const { onPress } = props;
 
+  const styles = useStyles();
+
   const onPressHandler = useCallback(() => {
     if (onPress) {
       onPress({ message, poll });
@@ -37,10 +40,10 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   }, [message, onPress, poll]);
 
   return (
-    <>
+    <View style={styles.inlineButton}>
       <Button
         variant={'secondary'}
-        type={'outline'}
+        type={'ghost'}
         size={'lg'}
         label={ownAnswer ? t('Update your comment') : t('Add a comment')}
         onPress={onPressHandler}
@@ -54,7 +57,7 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
           visible={showAddCommentDialog}
         />
       ) : null}
-    </>
+    </View>
   );
 };
 
@@ -64,6 +67,7 @@ export type PollAnswersListProps = PollContextValue & {
 };
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
+  const { client } = useChatContext();
   const { t, tDateTimeParser } = useTranslationContext();
   const { votingVisibility } = usePollState();
 
@@ -87,25 +91,32 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
     [answer.updated_at, t, tDateTimeParser],
   );
 
+  const isMyAnswer = client.userID === answer.user?.id;
+
   const isAnonymous = useMemo(
-    () => votingVisibility === VotingVisibility.anonymous,
-    [votingVisibility],
+    () => votingVisibility === VotingVisibility.anonymous && !isMyAnswer,
+    [votingVisibility, isMyAnswer],
   );
 
+  const answerAuthorName = isMyAnswer ? t('You') : answer.user?.name;
+
   return (
-    <View style={[styles.listItemContainer, itemStyle.container]}>
-      <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
-      <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
-        <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
-          {!isAnonymous && answer.user?.image ? (
-            <UserAvatar user={answer.user} size='md' showBorder />
-          ) : null}
-          <Text style={styles.listItemInfoUserName}>
-            {isAnonymous ? t('Anonymous') : answer.user?.name}
-          </Text>
+    <View style={[styles.listItemWrapper, itemStyle.wrapper]}>
+      <View style={[styles.listItemContainer, itemStyle.container]}>
+        <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
+        <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
+          <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
+            {!isAnonymous && answer.user?.image ? (
+              <UserAvatar user={answer.user} size='sm' showBorder />
+            ) : null}
+            <Text style={styles.listItemInfoUserName}>
+              {isAnonymous ? t('Anonymous') : answerAuthorName}
+            </Text>
+            <Text style={styles.listItemInfoDate}>{dateString}</Text>
+          </View>
         </View>
-        <Text style={styles.listItemInfoDate}>{dateString}</Text>
       </View>
+      {isMyAnswer ? <AnswerListAddCommentButton /> : null}
     </View>
   );
 };
@@ -137,7 +148,6 @@ export const PollAnswersListContent = ({
         renderItem={renderPollAnswerListItem}
         {...additionalFlatListProps}
       />
-      <AnswerListAddCommentButton />
     </View>
   );
 };
@@ -164,14 +174,7 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        addCommentButtonContainer: {
-          alignItems: 'center',
-          borderRadius: 12,
-          paddingHorizontal: 16,
-          paddingVertical: 18,
-        },
         contentContainer: { gap: primitives.spacingMd },
-        addCommentButtonText: { fontSize: 16 },
         container: {
           flex: 1,
           padding: primitives.spacingMd,
@@ -179,31 +182,41 @@ const useStyles = () => {
         },
         listItemAnswerText: {
           fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
           color: semantics.textPrimary,
         },
-        listItemContainer: {
+        listItemWrapper: {
           borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
           backgroundColor: semantics.backgroundCoreSurfaceCard,
         },
+        listItemContainer: {
+          padding: primitives.spacingMd,
+          gap: primitives.spacingXs,
+        },
         listItemInfoContainer: {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          marginTop: 24,
         },
         listItemInfoUserName: {
-          color: semantics.textPrimary,
+          color: semantics.chatTextUsername,
           fontSize: primitives.typographyFontSizeSm,
-          marginLeft: primitives.spacingXxs,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
         },
         listItemInfoDate: {
           fontSize: primitives.typographyFontSizeSm,
           color: semantics.textTertiary,
         },
-        listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' },
+        listItemUserInfoContainer: {
+          gap: primitives.spacingXs,
+          alignItems: 'center',
+          flexDirection: 'row',
+        },
+        inlineButton: {
+          borderColor: semantics.borderCoreDefault,
+          borderTopWidth: 1,
+        },
       }),
     [semantics],
   );

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

@@ -14,6 +14,7 @@ import {
   useOwnCapabilitiesContext,
   usePollContext,
   useTheme,
+  useTranslationContext,
 } from '../../../contexts';
 
 import { Check } from '../../../icons';
@@ -26,6 +27,7 @@ import { usePollState } from '../hooks/usePollState';
 export type PollOptionProps = {
   option: PollOptionClass;
   showProgressBar?: boolean;
+  forceIncoming?: boolean;
 };
 
 export type PollAllOptionsContentProps = PollContextValue & {
@@ -36,6 +38,7 @@ export type PollAllOptionsContentProps = PollContextValue & {
 export const PollAllOptionsContent = ({
   additionalScrollViewProps,
 }: Pick<PollAllOptionsContentProps, 'additionalScrollViewProps'>) => {
+  const { t } = useTranslationContext();
   const { name, options } = usePollState();
 
   const {
@@ -50,12 +53,13 @@ export const PollAllOptionsContent = ({
   return (
     <ScrollView style={[styles.allOptionsWrapper, wrapper]} {...additionalScrollViewProps}>
       <View style={[styles.allOptionsTitleContainer, titleContainer]}>
+        <Text style={styles.allOptionsTitleMeta}>{t('Question')}</Text>
         <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
       </View>
       <View style={[styles.allOptionsListContainer, listContainer]}>
         {options?.map((option: PollOptionClass) => (
           <View key={`full_poll_options_${option.id}`} style={styles.optionWrapper}>
-            <PollOption key={option.id} option={option} showProgressBar={false} />
+            <PollOption key={option.id} option={option} forceIncoming />
           </View>
         ))}
       </View>
@@ -78,19 +82,15 @@ export const PollAllOptions = ({
   </PollContextProvider>
 );
 
-export const PollOption = ({ option, showProgressBar = true }: PollOptionProps) => {
-  const { latestVotesByOption, maxVotedOptionIds, voteCountsByOption } = usePollState();
+export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
+  const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
   const styles = useStyles();
 
   const relevantVotes = useMemo(
     () => latestVotesByOption?.[option.id] || [],
     [latestVotesByOption, option.id],
   );
-  const maxVotes = useMemo(
-    () =>
-      maxVotedOptionIds?.[0] && voteCountsByOption ? voteCountsByOption[maxVotedOptionIds[0]] : 0,
-    [maxVotedOptionIds, voteCountsByOption],
-  );
+
   const votes = voteCountsByOption[option.id] || 0;
 
   const {
@@ -105,13 +105,15 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
   } = useTheme();
   const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
 
-  const unFilledColor = isPollCreatedByClient
-    ? semantics.chatPollProgressTrackOutgoing
-    : semantics.chatPollProgressTrackIncoming;
+  const unFilledColor =
+    isPollCreatedByClient && !forceIncoming
+      ? semantics.chatPollProgressTrackOutgoing
+      : semantics.chatPollProgressTrackIncoming;
 
-  const filledColor = isPollCreatedByClient
-    ? semantics.chatPollProgressFillOutgoing
-    : semantics.chatPollProgressFillIncoming;
+  const filledColor =
+    isPollCreatedByClient && !forceIncoming
+      ? semantics.chatPollProgressFillOutgoing
+      : semantics.chatPollProgressFillIncoming;
 
   return (
     <View style={[styles.container, container]}>
@@ -133,7 +135,7 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
         {showProgressBar ? (
           <View style={styles.progressBarContainer}>
             <ProgressBar
-              progress={votes / maxVotes}
+              progress={votes / voteCount}
               filledColor={filledColor}
               emptyColor={unFilledColor}
             />
@@ -273,6 +275,13 @@ const useAllOptionStyles = () => {
           lineHeight: primitives.typographyLineHeightRelaxed,
           fontWeight: primitives.typographyFontWeightSemiBold,
           color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
+        },
+        allOptionsTitleMeta: {
+          fontSize: primitives.typographyFontSizeSm,
+          color: semantics.textTertiary,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightMedium,
         },
         allOptionsWrapper: {
           flex: 1,

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -112,7 +112,9 @@ const useStyles = () => {
           backgroundColor: semantics.backgroundCoreSurfaceCard,
           borderRadius: primitives.radiusLg,
           marginBottom: primitives.spacingMd,
-          padding: primitives.spacingMd,
+          paddingHorizontal: primitives.spacingMd,
+          paddingTop: primitives.spacingMd,
+          paddingBottom: primitives.spacingXs,
         },
         headerContainer: {
           flexDirection: 'row',
@@ -133,6 +135,7 @@ const useStyles = () => {
           lineHeight: primitives.typographyLineHeightNormal,
           fontWeight: primitives.typographyFontWeightSemiBold,
           color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
           marginLeft: primitives.spacingMd,
         },
       }),