stream-chat-react-native-core 9.0.0-beta.12 → 9.0.0-beta.14

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
+import { Alert, Image, StyleSheet, Text, View } from 'react-native';
 
 import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
 
@@ -68,23 +68,22 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
   };
 
   return (
-    <BottomSheetTouchableOpacity onPress={onPressVideo}>
-      <ImageBackground
-        source={{ uri: thumb_url }}
-        style={[
-          {
-            height: size,
-            margin: 1,
-            width: size,
-          },
-          image,
-        ]}
-      >
-        <View style={[styles.overlay, imageOverlay]}>
-          <ImageOverlaySelectedComponent index={selectedIndex} />
-        </View>
-        <VideoAttachmentMetadataPill duration={videoDuration} format='timer' />
-      </ImageBackground>
+    <BottomSheetTouchableOpacity
+      onPress={onPressVideo}
+      style={[
+        {
+          height: size,
+          margin: 1,
+          width: size,
+        },
+        image,
+      ]}
+    >
+      <Image source={{ uri: thumb_url }} style={StyleSheet.absoluteFillObject} />
+      <View style={[styles.overlay, imageOverlay]}>
+        <ImageOverlaySelectedComponent index={selectedIndex} />
+      </View>
+      <VideoAttachmentMetadataPill duration={videoDuration} format='timer' />
     </BottomSheetTouchableOpacity>
   );
 };
@@ -128,22 +127,21 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
   };
 
   return (
-    <BottomSheetTouchableOpacity onPress={onPressImage}>
-      <ImageBackground
-        source={{ uri }}
-        style={[
-          {
-            height: size,
-            margin: 1,
-            width: size,
-          },
-          image,
-        ]}
-      >
-        <View style={[styles.overlay, imageOverlay]}>
-          <ImageOverlaySelectedComponent index={selectedIndex} />
-        </View>
-      </ImageBackground>
+    <BottomSheetTouchableOpacity
+      onPress={onPressImage}
+      style={[
+        {
+          height: size,
+          margin: 1,
+          width: size,
+        },
+        image,
+      ]}
+    >
+      <Image source={{ uri }} style={StyleSheet.absoluteFillObject} />
+      <View style={[styles.overlay, imageOverlay]}>
+        <ImageOverlaySelectedComponent index={selectedIndex} />
+      </View>
     </BottomSheetTouchableOpacity>
   );
 };

package/src/components/ImageGallery/ImageGallery.tsx

@@ -284,7 +284,10 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+          <Animated.View
+            testID='image-gallery-pager'
+            style={[styles.animatedContainer, pagerStyle, pager]}
+          >
             {assets.map((photo, i) =>
               photo.type === FileTypes.Video ? (
                 <AnimatedGalleryVideo
@@ -399,6 +402,7 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
+    direction: 'ltr',
     flexDirection: 'row',
   },
 });

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -79,6 +80,19 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
 };
 
 describe('ImageGallery', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
   it('render image gallery component', async () => {
     render(
       <ImageGalleryComponent
@@ -99,4 +113,23 @@ describe('ImageGallery', () => {
       expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
     });
   });
+
+  it('keeps the pager in ltr coordinates when rtl is enabled', async () => {
+    setRTL(true);
+
+    render(
+      <ImageGalleryComponent
+        message={
+          generateMessage({
+            attachments: [generateImageAttachment()],
+          }) as unknown as LocalMessage
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      expect(pagerStyle.direction).toBe('ltr');
+    });
+  });
 });

package/src/components/Message/Message.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  GestureResponderEvent,
+  I18nManager,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
@@ -415,6 +422,11 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       : isMyMessage
         ? 'right'
         : 'left';
+  const overlayItemAlignment = I18nManager.isRTL
+    ? alignment === 'right'
+      ? 'left'
+      : 'right'
+    : alignment;
 
   /**
    * attachments contain files/images or other attachments
@@ -847,7 +859,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                   h,
                   w,
                   x:
-                    alignment === 'right'
+                    overlayItemAlignment === 'right'
                       ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
                       : overlayItemsAnchorRect.x,
                   y: rect.y - h,
@@ -893,7 +905,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                   h,
                   w,
                   x:
-                    alignment === 'right'
+                    overlayItemAlignment === 'right'
                       ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
                       : overlayItemsAnchorRect.x,
                   y: rect.y + rect.h,

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

@@ -1,5 +1,5 @@
 import React, { ReactNode, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { I18nManager, StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -26,6 +26,8 @@ type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeConte
 
 export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
   const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const isRTL = I18nManager.isRTL;
+  const swipeDirectionMultiplier = isRTL ? -1 : 1;
 
   const styles = useStyles();
 
@@ -73,8 +75,9 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
           translateX.value = 0;
         })
         .onChange(({ translationX }) => {
-          if (translationX > 0) {
-            translateX.value = translationX;
+          const swipeDistance = translationX * swipeDirectionMultiplier;
+          if (swipeDistance > 0) {
+            translateX.value = swipeDistance;
           }
         })
         .onEnd(() => {
@@ -98,7 +101,15 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
             },
           );
         }),
-    [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
+    [
+      messageSwipeToReplyHitSlop,
+      onSwipe,
+      swipeDirectionMultiplier,
+      touchStart,
+      isSwiping,
+      translateX,
+      triggerHaptic,
+    ],
   );
 
   const swipeContentAnimatedStyle = useAnimatedStyle(

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import {
   MessageContextValue,
@@ -22,6 +22,7 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageRepliesPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
+  | 'isMyMessage'
   | 'message'
   | 'onLongPress'
   | 'onPress'
@@ -36,6 +37,7 @@ export type MessageRepliesPropsWithContext = Pick<
 const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
   const {
     alignment,
+    isMyMessage,
     message,
     MessageRepliesAvatars,
     onLongPress,
@@ -57,15 +59,29 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
   } = useTheme();
   const styles = useStyles();
 
+  const physicalAlignment = I18nManager.isRTL
+    ? alignment === 'left'
+      ? 'right'
+      : 'left'
+    : alignment;
+  const connectorStroke = isMyMessage
+    ? semantics.chatThreadConnectorOutgoing
+    : semantics.chatThreadConnectorIncoming;
+
+  const connector =
+    physicalAlignment === 'left' ? (
+      <ReplyConnectorLeft height={48} width={16} stroke={connectorStroke} />
+    ) : (
+      <ReplyConnectorRight height={48} width={16} stroke={connectorStroke} />
+    );
+
   if (threadList || !message.reply_count) {
     return null;
   }
 
   return (
     <View style={[styles.container, container]}>
-      {alignment === 'left' && (
-        <ReplyConnectorLeft height={48} width={16} stroke={semantics.chatThreadConnectorIncoming} />
-      )}
+      {alignment === 'left' ? connector : null}
       <Pressable
         disabled={preventPress}
         onLongPress={(event) => {
@@ -96,7 +112,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
         }}
         style={[
           styles.content,
-          { flexDirection: alignment === 'left' ? 'row' : 'row-reverse' },
+          { flexDirection: physicalAlignment === 'left' ? 'row' : 'row-reverse' },
           content,
         ]}
         testID='message-replies'
@@ -110,13 +126,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
               })}
         </Text>
       </Pressable>
-      {alignment === 'right' && (
-        <ReplyConnectorRight
-          height={48}
-          width={16}
-          stroke={semantics.chatThreadConnectorOutgoing}
-        />
-      )}
+      {alignment === 'right' ? connector : null}
     </View>
   );
 };
@@ -171,6 +181,7 @@ export type MessageRepliesProps = Partial<MessageRepliesPropsWithContext>;
 export const MessageReplies = (props: MessageRepliesProps) => {
   const {
     alignment,
+    isMyMessage,
     message,
     onLongPress,
     onOpenThread,
@@ -186,6 +197,7 @@ export const MessageReplies = (props: MessageRepliesProps) => {
     <MemoizedMessageReplies
       {...{
         alignment,
+        isMyMessage,
         message,
         MessageRepliesAvatars,
         onLongPress,

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/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/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/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,
@@ -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',