stream-chat-react-native-core 9.0.0-beta.11 → 9.0.0-beta.13

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { NewClose } from '../../../../icons/NewClose';
+import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
 type AttachmentRemoveControlProps = PressableProps;

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   FlatList,
+  I18nManager,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -96,14 +97,18 @@ const UnMemoizedAttachmentUploadPreviewList = (
   const { audioRecordingSendOnComplete } = useMessageInputContext();
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
+  const isRTL = I18nManager.isRTL;
   const attachmentListRef = useRef<FlatList<LocalAttachment>>(null);
   const soundPackageAvailable = isSoundPackageAvailable();
   const isAudioAttachmentPreview = getIsAudioAttachmentPreview(soundPackageAvailable);
   const previousNonAudioAttachmentsLengthRef = useRef(0);
   const contentWidthRef = useRef(0);
+  const itemsContentWidthRef = useRef(0);
   const viewportWidthRef = useRef(0);
   const scrollOffsetXRef = useRef(0);
+  const rtlLeadingSpacerWidthRef = useRef(0);
   const endShrinkCompensationX = useSharedValue(0);
+  const [rtlLeadingSpacerWidth, setRtlLeadingSpacerWidth] = useState(0);
   const previewAttachments = attachments.filter(
     (attachment) => !(audioRecordingSendOnComplete && isLocalVoiceRecordingAttachment(attachment)),
   );
@@ -111,6 +116,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
   const nonAudioAttachments = previewAttachments.filter(
     (attachment) => !isAudioAttachmentPreview(attachment),
   );
+  const data = isRTL ? nonAudioAttachments.toReversed() : nonAudioAttachments;
 
   const {
     theme: {
@@ -120,6 +126,27 @@ const UnMemoizedAttachmentUploadPreviewList = (
     },
   } = useTheme();
 
+  const updateRtlLeadingSpacerWidth = useCallback(
+    (itemsWidth: number, viewportWidth: number) => {
+      if (!isRTL || !viewportWidth) {
+        if (rtlLeadingSpacerWidthRef.current !== 0) {
+          rtlLeadingSpacerWidthRef.current = 0;
+          setRtlLeadingSpacerWidth(0);
+        }
+        return;
+      }
+
+      const nextSpacerWidth = Math.max(0, viewportWidth - itemsWidth);
+      if (rtlLeadingSpacerWidthRef.current === nextSpacerWidth) {
+        return;
+      }
+
+      rtlLeadingSpacerWidthRef.current = nextSpacerWidth;
+      setRtlLeadingSpacerWidth(nextSpacerWidth);
+    },
+    [isRTL],
+  );
+
   const renderItem = useCallback(
     ({ item }: { item: LocalAttachment }) => {
       if (isLocalImageAttachment(item)) {
@@ -200,21 +227,31 @@ const UnMemoizedAttachmentUploadPreviewList = (
     scrollOffsetXRef.current = event.nativeEvent.contentOffset.x;
   }, []);
 
-  const onLayoutHandler = useCallback((event: LayoutChangeEvent) => {
-    viewportWidthRef.current = event.nativeEvent.layout.width;
-  }, []);
+  const onLayoutHandler = useCallback(
+    (event: LayoutChangeEvent) => {
+      const viewportWidth = event.nativeEvent.layout.width;
+      viewportWidthRef.current = viewportWidth;
+      updateRtlLeadingSpacerWidth(itemsContentWidthRef.current, viewportWidth);
+    },
+    [updateRtlLeadingSpacerWidth],
+  );
 
   const onContentSizeChangeHandler = useCallback(
     (width: number) => {
+      const itemsContentWidth = isRTL
+        ? Math.max(0, width - rtlLeadingSpacerWidthRef.current)
+        : width;
       const previousContentWidth = contentWidthRef.current;
-      contentWidthRef.current = width;
+      contentWidthRef.current = itemsContentWidth;
+      itemsContentWidthRef.current = itemsContentWidth;
+      updateRtlLeadingSpacerWidth(itemsContentWidth, viewportWidthRef.current);
 
-      if (!previousContentWidth || width >= previousContentWidth) {
+      if (!previousContentWidth || itemsContentWidth >= previousContentWidth) {
         return;
       }
 
       const oldMaxOffset = Math.max(0, previousContentWidth - viewportWidthRef.current);
-      const newMaxOffset = Math.max(0, width - viewportWidthRef.current);
+      const newMaxOffset = Math.max(0, itemsContentWidth - viewportWidthRef.current);
       const offsetBefore = scrollOffsetXRef.current;
       const wasNearEnd = oldMaxOffset - offsetBefore <= END_ANCHOR_THRESHOLD;
       const overshoot = Math.max(0, offsetBefore - newMaxOffset);
@@ -232,6 +269,10 @@ const UnMemoizedAttachmentUploadPreviewList = (
         scrollOffsetXRef.current = newMaxOffset;
       }
 
+      if (isRTL) {
+        return;
+      }
+
       const compensation = newMaxOffset - oldMaxOffset;
       if (compensation !== 0) {
         cancelAnimation(endShrinkCompensationX);
@@ -241,7 +282,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
         });
       }
     },
-    [endShrinkCompensationX],
+    [endShrinkCompensationX, isRTL, updateRtlLeadingSpacerWidth],
   );
 
   useEffect(() => {
@@ -257,9 +298,13 @@ const UnMemoizedAttachmentUploadPreviewList = (
     cancelAnimation(endShrinkCompensationX);
     endShrinkCompensationX.value = 0;
     requestAnimationFrame(() => {
+      if (isRTL) {
+        return;
+      }
+
       attachmentListRef.current?.scrollToEnd({ animated: true });
     });
-  }, [endShrinkCompensationX, nonAudioAttachments.length]);
+  }, [endShrinkCompensationX, isRTL, nonAudioAttachments.length]);
 
   const animatedListWrapperStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: endShrinkCompensationX.value }],
@@ -290,7 +335,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
         </Animated.View>
       ) : null}
 
-      {nonAudioAttachments.length ? (
+      {data.length ? (
         <Animated.View
           entering={ZoomIn.duration(200)}
           exiting={ZoomOut.duration(200)}
@@ -298,10 +343,15 @@ const UnMemoizedAttachmentUploadPreviewList = (
         >
           <Animated.View style={animatedListWrapperStyle}>
             <FlatList
-              data={nonAudioAttachments}
+              data={data}
               horizontal
               ItemSeparatorComponent={ItemSeparatorComponent}
               keyExtractor={(item) => item.localMetadata.id}
+              ListHeaderComponent={
+                isRTL && rtlLeadingSpacerWidth > 0 ? (
+                  <View style={{ width: rtlLeadingSpacerWidth }} />
+                ) : null
+              }
               onContentSizeChange={onContentSizeChangeHandler}
               onLayout={onLayoutHandler}
               onScroll={onScrollHandler}
@@ -357,6 +407,7 @@ const styles = StyleSheet.create({
   },
   flatList: {
     overflow: 'visible',
+    direction: 'ltr',
   },
   itemSeparator: {
     width: primitives.spacingXs,

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx

@@ -4,8 +4,8 @@ import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-nati
 import { LocalAttachmentUploadMetadata } from 'stream-chat';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ExclamationCircle } from '../../../../icons/ExclamationCircle';
-import { Warning } from '../../../../icons/Warning';
+import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
+import { Warning } from '../../../../icons/exclamation-triangle-fill';
 import { primitives } from '../../../../theme';
 import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { ImageBackground, StyleSheet, View } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 
 import { LocalImageAttachment } from 'stream-chat';
 
@@ -61,13 +61,14 @@ export const ImageAttachmentUploadPreview = ({
 
   return (
     <View style={[styles.wrapper, wrapper]} testID={'image-attachment-upload-preview'}>
-      <ImageBackground
-        onError={onErrorHandler}
-        onLoadEnd={onLoadEndHandler}
-        source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
-        style={[styles.image, upload]}
-        testID={'image-attachment-upload-preview-image'}
-      >
+      <View style={[styles.image, upload]}>
+        <Image
+          onError={onErrorHandler}
+          onLoadEnd={onLoadEndHandler}
+          source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
+          style={StyleSheet.absoluteFillObject}
+          testID={'image-attachment-upload-preview-image'}
+        />
         {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && <ImageUploadInProgressIndicator />}
         {indicatorType === ProgressIndicatorTypes.RETRY && (
           <ImageUploadRetryIndicator onRetryHandler={onRetryHandler} />
@@ -75,7 +76,7 @@ export const ImageAttachmentUploadPreview = ({
         {indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && (
           <ImageUploadNotSupportedIndicator />
         )}
-      </ImageBackground>
+      </View>
 
       <View style={styles.dismissWrapper}>
         <AttachmentRemoveControl onPress={onDismissHandler} />

package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx

@@ -21,10 +21,20 @@ export const VideoAttachmentUploadPreview = ({
   handleRetry,
   removeAttachments,
 }: VideoAttachmentUploadPreviewProps) => {
-  return attachment.localMetadata.previewUri ? (
+  const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
+
+  return previewUri ? (
     <>
       <ImageAttachmentUploadPreview
-        attachment={attachment as unknown as LocalImageAttachment}
+        attachment={
+          {
+            ...attachment,
+            localMetadata: {
+              ...attachment.localMetadata,
+              previewUri,
+            },
+          } as unknown as LocalImageAttachment
+        }
         handleRetry={handleRetry}
         removeAttachments={removeAttachments}
       />

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

@@ -14,12 +14,12 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { ChevronLeft } from '../../../../icons/ChevronLeft';
-import { Mic } from '../../../../icons/Mic';
-import { Stop } from '../../../../icons/Stop';
-import { Tick } from '../../../../icons/Tick';
-import { Trash } from '../../../../icons/Trash';
+import { Tick } from '../../../../icons/checkmark';
+import { ChevronLeft } from '../../../../icons/chevron-left';
+import { Delete } from '../../../../icons/delete';
+import { Stop } from '../../../../icons/stop-fill';
 import { IconProps } from '../../../../icons/utils/base';
+import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -109,7 +109,7 @@ const DeleteRecording = ({
       size='sm'
       iconOnly
       onPress={onDeleteVoiceRecording}
-      LeadingIcon={Trash}
+      LeadingIcon={Delete}
     />
   );
 };

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

@@ -19,7 +19,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/Mic';
+import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';

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

@@ -9,7 +9,7 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/Mic';
+import { Mic } from '../../../../icons/voice';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 

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

@@ -4,9 +4,9 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ChevronTop } from '../../../../icons/ChevronTop';
-import { Lock } from '../../../../icons/Lock';
-import { Unlock } from '../../../../icons/Unlock';
+import { ChevronTop } from '../../../../icons/chevron-down';
+import { Lock } from '../../../../icons/lock';
+import { Unlock } from '../../../../icons/unlock';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 

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

@@ -9,8 +9,8 @@ import { useStableCallback } from '../../../../hooks';
 import { useAudioPlayer } from '../../../../hooks/useAudioPlayer';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Pause } from '../../../../icons/Pause';
-import { Play } from '../../../../icons/Play';
+import { Pause } from '../../../../icons/pause-fill';
+import { Play } from '../../../../icons/play-fill';
 import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -10,7 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
-import { Plus } from '../../../../icons/Plus';
+import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
 type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttachButtonPress'> &

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -10,7 +10,7 @@ import { LinkPreviewsManager } from 'stream-chat';
 import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl';
 
 import { useChatContext, useMessageComposer, useTheme } from '../../../contexts';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
 

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { Tick } from '../../../../icons/Tick';
+import { Tick } from '../../../../icons/checkmark';
 import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -4,7 +4,7 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { SendRight } from '../../../../icons/SendRight';
+import { SendRight } from '../../../../icons/send';
 import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -90,7 +90,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
       <Animated.View
         entering={ZoomIn.duration(200)}
         exiting={ZoomOut.duration(200)}
-        key='cooldown-timer'
+        key='edit-button'
         style={editButtonContainer}
       >
         <EditButton disabled={messageComposer.compositionIsEmpty} />

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Down } from '../../icons/Down';
+import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
 import { BadgeNotification } from '../ui';
 import { Button } from '../ui/Button';

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -8,8 +8,8 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { ArrowUp } from '../../icons/ArrowUp';
-import { NewClose } from '../../icons/NewClose';
+import { ArrowUp } from '../../icons/arrow-up';
+import { NewClose } from '../../icons/xmark';
 import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { primitives } from '../../theme';
 import { Button } from '../ui';

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap

@@ -144,13 +144,23 @@ exports[`ScrollToBottomButton should render the message notification and match s
             strokeWidth={1.5}
           >
             <RNSVGPath
-              d="M15.2084 11.6667L10.0001 16.875L4.79175 11.6667M10.0001 16.25V3.125"
+              d="M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75"
               fill={
                 {
                   "payload": 4278190080,
                   "type": 0,
                 }
               }
+              matrix={
+                [
+                  -1,
+                  1.2246467991473532e-16,
+                  -1.2246467991473532e-16,
+                  -1,
+                  20,
+                  20,
+                ]
+              }
               propList={
                 [
                   "stroke",

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -15,7 +15,7 @@ import {
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
-import { Plus } from '../../icons/Plus';
+import { Plus } from '../../icons/plus';
 import { NativeHandlers } from '../../native';
 import { scheduleActionOnClose } from '../../state-store';
 

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -23,7 +23,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
 import { IconProps } from '../../icons';
-import { MoreEmojis } from '../../icons/MoreEmojis';
+import { MoreEmojis } from '../../icons/emoji-add-1';
 import { primitives } from '../../theme';
 import { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';

package/src/components/Poll/CreatePollContent.tsx

@@ -281,24 +281,32 @@ const useStyles = () => {
     return StyleSheet.create({
       scrollView: {
         flex: 1,
-        padding: primitives.spacingMd,
         backgroundColor: semantics.backgroundCoreElevation1,
       },
-      contentContainerStyle: { paddingBottom: 70 },
+      contentContainerStyle: {
+        alignItems: 'stretch',
+        padding: primitives.spacingMd,
+        paddingBottom: 70,
+        width: '100%',
+      },
       title: {
         color: semantics.textPrimary,
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionCardContent: {
         gap: primitives.spacingXxs,
+        flex: 1,
+        alignItems: 'flex-start',
       },
       optionCard: {
         flex: 1,

package/src/components/Poll/Poll.tsx

@@ -119,12 +119,14 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
+        textAlign: 'left',
       },
       headerTitle: {
         color: semantics.chatTextIncoming,
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionsWrapper: {
         gap: primitives.spacingMd,

package/src/components/Poll/components/CreatePollHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Check, IconProps } from '../../../icons';
-import { Cross } from '../../../icons/Cross';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { LayoutChangeEvent, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import {
+  I18nManager,
+  LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
@@ -19,9 +27,9 @@ import { PollComposerOption, PollComposerState } from 'stream-chat';
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { CircleMinus } from '../../../icons/CircleMinus';
-import { DotGrid } from '../../../icons/DotGrid';
-import { InfoTooltip } from '../../../icons/InfoTooltip';
+import { InfoTooltip } from '../../../icons/info';
+import { CircleMinus } from '../../../icons/minus-circle';
+import { DotGrid } from '../../../icons/reorder';
 import { primitives } from '../../../theme';
 
 export type CurrentOptionPositionsCache = {
@@ -746,6 +754,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightRegular,
         color: semantics.inputTextDefault,
         paddingVertical: 0, // android is adding extra padding so we remove it
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
       optionValidationErrorContainer: {
         flexDirection: 'row',
@@ -759,6 +768,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         lineHeight: primitives.typographyLineHeightNormal,
         fontWeight: primitives.typographyFontWeightRegular,
+        textAlign: 'left',
       },
       optionWrapper: {
         width: '100%',
@@ -778,6 +788,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
     });
   }, [semantics]);

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -74,15 +74,19 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionCardContent: {
         gap: primitives.spacingXxs,
+        flex: 1,
+        alignItems: 'flex-start',
       },
       optionCard: {
         alignItems: 'center',

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { I18nManager, Platform, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
 
 import Animated, { LinearTransition, StretchInY, StretchOutY } from 'react-native-reanimated';
 
@@ -200,15 +200,19 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionCardContent: {
         gap: primitives.spacingXxs,
+        flex: 1,
+        alignItems: 'flex-start',
       },
       optionCard: {
         alignItems: 'center',
@@ -229,6 +233,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         paddingHorizontal: primitives.spacingSm,
         paddingVertical: primitives.spacingMd,
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
     });
   }, [semantics]);

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

@@ -175,10 +175,9 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        contentContainer: { gap: primitives.spacingMd },
+        contentContainer: { gap: primitives.spacingMd, padding: primitives.spacingMd },
         container: {
           flex: 1,
-          padding: primitives.spacingMd,
           backgroundColor: semantics.backgroundCoreElevation1,
         },
         listItemAnswerText: {

package/src/components/Poll/components/PollInputDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import {
+  I18nManager,
   KeyboardAvoidingView,
   Modal,
   Platform,
@@ -136,6 +137,7 @@ const useStyles = () => {
           fontSize: primitives.typographyFontSizeMd,
           padding: primitives.spacingSm,
           color: semantics.textPrimary,
+          textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         title: {
           color: semantics.textPrimary,