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

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,

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

@@ -51,7 +51,11 @@ export const PollAllOptionsContent = ({
   const styles = useAllOptionStyles();
 
   return (
-    <ScrollView style={[styles.allOptionsWrapper, wrapper]} {...additionalScrollViewProps}>
+    <ScrollView
+      contentContainerStyle={styles.allOptionsContentContainer}
+      style={[styles.allOptionsWrapper, wrapper]}
+      {...additionalScrollViewProps}
+    >
       <View style={[styles.allOptionsTitleContainer, titleContainer]}>
         <Text style={styles.allOptionsTitleMeta}>{t('Question')}</Text>
         <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
@@ -226,6 +230,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
+        textAlign: 'left',
       },
       info: {
         flexGrow: 1,
@@ -237,6 +242,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
+        textAlign: 'left',
       },
       progressBarContainer: {
         flex: 1,
@@ -256,42 +262,44 @@ const useAllOptionStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        allOptionsListContainer: {
-          borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-          marginTop: primitives.spacing2xl,
-        },
-        allOptionsTitleContainer: {
-          borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-        },
-        allOptionsTitleText: {
-          fontSize: primitives.typographyFontSizeLg,
-          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,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreElevation1,
-        },
-        optionWrapper: {
-          paddingVertical: primitives.spacingMd,
-        },
-      }),
-    [semantics],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      allOptionsContentContainer: {
+        padding: primitives.spacingMd,
+      },
+      allOptionsListContainer: {
+        borderRadius: primitives.radiusLg,
+        padding: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+        marginTop: primitives.spacing2xl,
+      },
+      allOptionsTitleContainer: {
+        borderRadius: primitives.radiusLg,
+        padding: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+      },
+      allOptionsTitleText: {
+        fontSize: primitives.typographyFontSizeLg,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      allOptionsTitleMeta: {
+        fontSize: primitives.typographyFontSizeSm,
+        color: semantics.textTertiary,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightMedium,
+        textAlign: 'left',
+      },
+      allOptionsWrapper: {
+        flex: 1,
+        backgroundColor: semantics.backgroundCoreElevation1,
+      },
+      optionWrapper: {
+        paddingVertical: primitives.spacingMd,
+      },
+    });
+  }, [semantics]);
 };

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

@@ -104,41 +104,45 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: { flex: 1, padding: primitives.spacingMd },
-        contentContainer: {
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-          borderRadius: primitives.radiusLg,
-          marginBottom: primitives.spacingMd,
-          paddingHorizontal: primitives.spacingMd,
-          paddingTop: primitives.spacingMd,
-          paddingBottom: primitives.spacingXs,
-        },
-        headerContainer: {
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingBottom: primitives.spacingXs,
-        },
-        headerTitle: {
-          flex: 1,
-          fontSize: primitives.typographyFontSizeLg,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          paddingTop: primitives.spacingXs,
-        },
-        headerText: {
-          fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightNormal,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          paddingTop: primitives.spacingXs,
-          marginLeft: primitives.spacingMd,
-        },
-      }),
-    [semantics.backgroundCoreSurfaceCard, semantics.textPrimary],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: { flex: 1, backgroundColor: semantics.backgroundCoreElevation1 },
+      contentContainer: {
+        margin: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+        borderRadius: primitives.radiusLg,
+        paddingHorizontal: primitives.spacingMd,
+        paddingTop: primitives.spacingMd,
+        paddingBottom: primitives.spacingXs,
+      },
+      headerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingBottom: primitives.spacingXs,
+      },
+      headerTitle: {
+        flex: 1,
+        fontSize: primitives.typographyFontSizeLg,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      headerText: {
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        marginStart: primitives.spacingMd,
+        textAlign: 'left',
+      },
+    });
+  }, [
+    semantics.backgroundCoreElevation1,
+    semantics.backgroundCoreSurfaceCard,
+    semantics.textPrimary,
+  ]);
 };

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

@@ -132,66 +132,67 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        spacer: {
-          paddingBottom: primitives.spacingXs,
-        },
-        container: {
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-          borderRadius: primitives.radiusLg,
-          marginBottom: primitives.spacingMd,
-        },
-        metaContainer: {
-          paddingTop: primitives.spacingMd,
-          paddingHorizontal: primitives.spacingMd,
-        },
-        votesContainer: {
-          paddingHorizontal: primitives.spacingMd,
-          paddingVertical: primitives.spacingXs,
-        },
-        headerContainer: {
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingBottom: primitives.spacingXs,
-        },
-        modalRoot: {
-          flex: 1,
-        },
-        title: {
-          flex: 1,
-          fontSize: primitives.typographyFontSizeLg,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          paddingTop: primitives.spacingXs,
-        },
-        titleMeta: {
-          fontSize: primitives.typographyFontSizeSm,
-          color: semantics.textTertiary,
-          lineHeight: primitives.typographyLineHeightNormal,
-          fontWeight: primitives.typographyFontWeightMedium,
-        },
-        voteCount: {
-          fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightNormal,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          marginLeft: primitives.spacingMd,
-        },
-        safeArea: {
-          backgroundColor: semantics.backgroundCoreElevation1,
-          flex: 1,
-        },
-        inlineButton: {
-          borderColor: semantics.borderCoreDefault,
-          borderTopWidth: 1,
-          paddingHorizontal: primitives.spacingMd,
-          paddingVertical: primitives.spacingXs,
-        },
-      }),
-    [semantics],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      spacer: {
+        paddingBottom: primitives.spacingXs,
+      },
+      container: {
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+        borderRadius: primitives.radiusLg,
+        marginBottom: primitives.spacingMd,
+      },
+      metaContainer: {
+        paddingTop: primitives.spacingMd,
+        paddingHorizontal: primitives.spacingMd,
+      },
+      votesContainer: {
+        paddingHorizontal: primitives.spacingMd,
+        paddingVertical: primitives.spacingXs,
+      },
+      headerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingBottom: primitives.spacingXs,
+      },
+      modalRoot: {
+        flex: 1,
+      },
+      title: {
+        flex: 1,
+        fontSize: primitives.typographyFontSizeLg,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      titleMeta: {
+        fontSize: primitives.typographyFontSizeSm,
+        color: semantics.textTertiary,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightMedium,
+        textAlign: 'left',
+      },
+      voteCount: {
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        marginStart: primitives.spacingMd,
+        textAlign: 'left',
+      },
+      safeArea: {
+        backgroundColor: semantics.backgroundCoreElevation1,
+        flex: 1,
+      },
+      inlineButton: {
+        borderColor: semantics.borderCoreDefault,
+        borderTopWidth: 1,
+        paddingHorizontal: primitives.spacingMd,
+        paddingVertical: primitives.spacingXs,
+      },
+    });
+  }, [semantics]);
 };

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

@@ -44,7 +44,11 @@ export const PollResultsContent = ({
   const styles = useStyles();
 
   return (
-    <ScrollView style={[styles.scrollView, scrollView]} {...additionalScrollViewProps}>
+    <ScrollView
+      contentContainerStyle={styles.contentContainer}
+      style={[styles.scrollView, scrollView]}
+      {...additionalScrollViewProps}
+    >
       <View style={[styles.container, container]}>
         <Text style={[styles.titleMeta, titleMeta]}>{t('Question')}</Text>
         <Text style={[styles.title, title]}>{name}</Text>
@@ -77,36 +81,38 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-        },
-        scrollView: {
-          flex: 1,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreElevation1,
-        },
-        resultsContainer: {
-          paddingVertical: primitives.spacing2xl,
-        },
-        title: {
-          fontSize: primitives.typographyFontSizeLg,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          paddingTop: primitives.spacingXs,
-        },
-        titleMeta: {
-          fontSize: primitives.typographyFontSizeSm,
-          color: semantics.textTertiary,
-          lineHeight: primitives.typographyLineHeightNormal,
-          fontWeight: primitives.typographyFontWeightMedium,
-        },
-      }),
-    [semantics],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      contentContainer: {
+        padding: primitives.spacingMd,
+      },
+      container: {
+        borderRadius: primitives.radiusLg,
+        padding: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+      },
+      scrollView: {
+        flex: 1,
+        backgroundColor: semantics.backgroundCoreElevation1,
+      },
+      resultsContainer: {
+        paddingVertical: primitives.spacing2xl,
+      },
+      title: {
+        fontSize: primitives.typographyFontSizeLg,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      titleMeta: {
+        fontSize: primitives.typographyFontSizeSm,
+        color: semantics.textTertiary,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightMedium,
+        textAlign: 'left',
+      },
+    });
+  }, [semantics]);
 };

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

@@ -58,31 +58,31 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        voteContainer: {
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingVertical: primitives.spacingXs,
-        },
-        voteDate: {
-          fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightNormal,
-          color: semantics.textTertiary,
-        },
-        voteUserName: {
-          fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightNormal,
-          color: semantics.textPrimary,
-          paddingLeft: primitives.spacingXs,
-        },
-        userContainer: {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      }),
-    [semantics],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      voteContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: primitives.spacingXs,
+      },
+      voteDate: {
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        color: semantics.textTertiary,
+        textAlign: 'left',
+      },
+      voteUserName: {
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        color: semantics.textPrimary,
+        paddingStart: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      userContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+    });
+  }, [semantics]);
 };

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,5 +1,5 @@
 import React, { 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, {
   interpolate,
@@ -47,6 +47,8 @@ export const ProgressControl = (props: ProgressControlProps) => {
   const { isPlaying, onEndDrag, onStartDrag, progress, testID } = props;
   const styles = useStyles();
   const [widthInNumbers, setWidthInNumbers] = useState<number>(0);
+  const isRTL = I18nManager.isRTL;
+  const thumbDirectionMultiplier = isRTL ? -1 : 1;
 
   const state = useSharedValue(progress);
   const {
@@ -73,8 +75,8 @@ export const ProgressControl = (props: ProgressControlProps) => {
           }
         })
         .onUpdate((event) => {
-          const newProgress = Math.max(0, Math.min(event.x / widthInNumbers, 1));
-          state.value = newProgress;
+          const nextProgress = isRTL ? 1 - event.x / widthInNumbers : event.x / widthInNumbers;
+          state.value = Math.max(0, Math.min(nextProgress, 1));
         })
         .onEnd(() => {
           if (onEndDrag) {
@@ -82,7 +84,7 @@ export const ProgressControl = (props: ProgressControlProps) => {
           }
         })
         .withTestId(testID),
-    [onEndDrag, onStartDrag, state, testID, widthInNumbers],
+    [isRTL, onEndDrag, onStartDrag, state, testID, widthInNumbers],
   );
 
   const thumbStyles = useAnimatedStyle(
@@ -92,13 +94,13 @@ export const ProgressControl = (props: ProgressControlProps) => {
           translateX: interpolate(
             state.value,
             [0, 1],
-            [0, widthInNumbers - PROGRESS_THUMB_WIDTH / 2],
+            [0, (widthInNumbers - PROGRESS_THUMB_WIDTH / 2) * thumbDirectionMultiplier],
           ),
         },
       ],
       position: 'absolute',
     }),
-    [widthInNumbers],
+    [thumbDirectionMultiplier, widthInNumbers],
   );
 
   const animatedFilledStyles = useAnimatedStyle(

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { I18nManager, StyleSheet, View } from 'react-native';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
@@ -98,6 +98,8 @@ export const WaveProgressBar = React.memo(
     const [showInteractiveLayer, setShowInteractiveLayer] = useState(
       () => progress > 0 || isPlaying,
     );
+    const isRTL = I18nManager.isRTL;
+    const thumbDirectionMultiplier = isRTL ? -1 : 1;
     const eachWaveformWidth = WAVEFORM_WIDTH + WAVEFORM_GAP;
     const fullWidth = (amplitudesCount - 1) * eachWaveformWidth;
     const maxThumbTranslateX = Math.max(fullWidth - eachWaveformWidth, 0);
@@ -163,7 +165,7 @@ export const WaveProgressBar = React.memo(
               return;
             }
             const nextProgress = clampProgress(
-              dragStartProgress.value + event.translationX / fullWidth,
+              dragStartProgress.value + (event.translationX * thumbDirectionMultiplier) / fullWidth,
             );
             visualProgress.value = nextProgress;
             if (onProgressDrag) {
@@ -186,6 +188,7 @@ export const WaveProgressBar = React.memo(
         onEndDrag,
         onProgressDrag,
         onStartDrag,
+        thumbDirectionMultiplier,
         visualProgress,
       ],
     );
@@ -220,14 +223,13 @@ export const WaveProgressBar = React.memo(
         position: 'absolute',
         transform: [
           {
-            translateX: Math.min(
-              clampProgress(visualProgress.value) * fullWidth,
-              maxThumbTranslateX,
-            ),
+            translateX:
+              Math.min(clampProgress(visualProgress.value) * fullWidth, maxThumbTranslateX) *
+              thumbDirectionMultiplier,
           },
         ],
       }),
-      [fullWidth, maxThumbTranslateX],
+      [fullWidth, maxThumbTranslateX, thumbDirectionMultiplier],
     );
 
     return (