stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

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/StableDurationLabel.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+type StableDurationLabelProps = {
+  accessibilityLabel?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  reserveLabel: string;
+  style?: StyleProp<TextStyle>;
+  visibleStyle?: StyleProp<TextStyle>;
+  label: string;
+};
+
+/**
+ * Renders a duration label with a layout-stable width.
+ *
+ * It reserves space using an invisible max-width label, then absolutely positions
+ * the live value on top so playback updates do not cause parent relayout.
+ */
+export const StableDurationLabel = React.memo(
+  ({
+    accessibilityLabel,
+    containerStyle,
+    reserveLabel,
+    style,
+    visibleStyle,
+    label,
+  }: StableDurationLabelProps) => (
+    <View style={[styles.container, containerStyle]}>
+      <Text accessible={false} style={[style, styles.reserveLabel]}>
+        {reserveLabel}
+      </Text>
+      <Text
+        accessibilityLabel={accessibilityLabel}
+        style={[style, styles.visibleLabel, visibleStyle]}
+      >
+        {label}
+      </Text>
+    </View>
+  ),
+);
+
+StableDurationLabel.displayName = 'StableDurationLabel';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  reserveLabel: {
+    opacity: 0,
+  },
+  visibleLabel: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+  },
+});

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,12 +1,8 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 import { ProgressControlThumb } from './ProgressThumb';
 
@@ -49,6 +45,43 @@ const WAVEFORM_WIDTH = 2;
 const WAVEFORM_GAP = 2;
 const WAVE_MAX_HEIGHT = 20;
 const WAVE_MIN_HEIGHT = 2;
+const DRAG_HIT_SLOP = {
+  bottom: 12,
+  left: 12,
+  right: 12,
+  top: 12,
+};
+
+const clampProgress = (progress: number) => {
+  'worklet';
+  return Math.max(0, Math.min(progress, 1));
+};
+
+type WaveformBarsProps = {
+  color: ColorValue;
+  heights: number[];
+  waveformStyle?: StyleProp<ViewStyle>;
+};
+
+const WaveformBars = React.memo(({ color, heights, waveformStyle }: WaveformBarsProps) => (
+  <View style={styles.waveformLayer}>
+    {heights.map((height, index) => (
+      <View
+        key={index}
+        style={[
+          styles.waveform,
+          {
+            backgroundColor: color,
+            height,
+          },
+          waveformStyle,
+        ]}
+      />
+    ))}
+  </View>
+));
+
+WaveformBars.displayName = 'WaveformBars';
 
 export const WaveProgressBar = React.memo(
   (props: WaveProgressBarProps) => {
@@ -62,30 +95,18 @@ export const WaveProgressBar = React.memo(
       progress,
       waveformData,
     } = props;
+    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 state = useSharedValue(progress);
-    const [currentWaveformProgress, setCurrentWaveformProgress] = useState<number>(0);
-
-    const waveFormNumberFromProgress = useCallback(
-      (progress: number) => {
-        'worklet';
-        const progressInPrecision = Number(progress.toFixed(2));
-        const progressInWaveformWidth = Number((progressInPrecision * fullWidth).toFixed(0));
-        const progressInWaveformNumber = Math.floor(progressInWaveformWidth / 4);
-        runOnJS(setCurrentWaveformProgress)(progressInWaveformNumber);
-      },
-      [fullWidth],
-    );
-
-    useAnimatedReaction(
-      () => progress,
-      (newProgress) => {
-        state.value = newProgress;
-        waveFormNumberFromProgress(newProgress);
-      },
-      [progress],
-    );
+    const maxThumbTranslateX = Math.max(fullWidth - eachWaveformWidth, 0);
+    const maxProgressWidth = fullWidth + WAVEFORM_WIDTH;
+    const dragStartProgress = useSharedValue(0);
+    const isDragging = useSharedValue(false);
+    const visualProgress = useSharedValue(progress);
 
     const {
       theme: {
@@ -94,29 +115,85 @@ export const WaveProgressBar = React.memo(
       },
     } = useTheme();
 
+    useEffect(() => {
+      if (!isDragging.value) {
+        visualProgress.value = progress;
+      }
+    }, [isDragging, progress, visualProgress]);
+
+    useEffect(() => {
+      setShowInteractiveLayer(progress > 0 || isPlaying);
+    }, [isPlaying, progress]);
+
+    const handleStartDrag = useCallback(
+      (nextProgress: number) => {
+        setShowInteractiveLayer(true);
+        onStartDrag?.(nextProgress);
+      },
+      [onStartDrag],
+    );
+
+    const handleProgressDrag = useCallback(
+      (nextProgress: number) => {
+        onProgressDrag?.(nextProgress);
+      },
+      [onProgressDrag],
+    );
+
+    const handleEndDrag = useCallback(
+      (nextProgress: number) => {
+        onEndDrag?.(nextProgress);
+      },
+      [onEndDrag],
+    );
+
     const pan = useMemo(
       () =>
         Gesture.Pan()
+          .hitSlop(DRAG_HIT_SLOP)
           .maxPointers(1)
           .onStart(() => {
+            const nextProgress = clampProgress(visualProgress.value);
+            dragStartProgress.value = nextProgress;
+            isDragging.value = true;
             if (onStartDrag) {
-              runOnJS(onStartDrag)(state.value);
+              runOnJS(handleStartDrag)(nextProgress);
             }
           })
           .onUpdate((event) => {
-            const newProgress = Math.max(0, Math.min((state.value + event.x) / fullWidth, 1));
-            state.value = newProgress;
-            waveFormNumberFromProgress(newProgress);
+            if (fullWidth <= 0) {
+              return;
+            }
+            const nextProgress = clampProgress(
+              dragStartProgress.value + (event.translationX * thumbDirectionMultiplier) / fullWidth,
+            );
+            visualProgress.value = nextProgress;
+            if (onProgressDrag) {
+              runOnJS(handleProgressDrag)(nextProgress);
+            }
           })
           .onEnd(() => {
+            isDragging.value = false;
             if (onEndDrag) {
-              runOnJS(onEndDrag)(state.value);
+              runOnJS(handleEndDrag)(visualProgress.value);
             }
           }),
-      [fullWidth, onEndDrag, onStartDrag, state, waveFormNumberFromProgress],
+      [
+        dragStartProgress,
+        fullWidth,
+        handleEndDrag,
+        handleProgressDrag,
+        handleStartDrag,
+        isDragging,
+        onEndDrag,
+        onProgressDrag,
+        onStartDrag,
+        thumbDirectionMultiplier,
+        visualProgress,
+      ],
     );
 
-    const stringifiedWaveformData = waveformData.toString();
+    const stringifiedWaveformData = useMemo(() => waveformData.toString(), [waveformData]);
 
     const resampledWaveformData = useMemo(
       () => resampleWaveformData(waveformData, amplitudesCount),
@@ -124,12 +201,35 @@ export const WaveProgressBar = React.memo(
       [amplitudesCount, stringifiedWaveformData],
     );
 
+    const waveformHeights = useMemo(
+      () =>
+        resampledWaveformData.map((waveform) =>
+          waveform * WAVE_MAX_HEIGHT > WAVE_MIN_HEIGHT
+            ? waveform * WAVE_MAX_HEIGHT
+            : WAVE_MIN_HEIGHT,
+        ),
+      [resampledWaveformData],
+    );
+
+    const progressOverlayStyles = useAnimatedStyle(
+      () => ({
+        width: clampProgress(visualProgress.value) * maxProgressWidth,
+      }),
+      [maxProgressWidth],
+    );
+
     const thumbStyles = useAnimatedStyle(
       () => ({
         position: 'absolute',
-        transform: [{ translateX: currentWaveformProgress * eachWaveformWidth }],
+        transform: [
+          {
+            translateX:
+              Math.min(clampProgress(visualProgress.value) * fullWidth, maxThumbTranslateX) *
+              thumbDirectionMultiplier,
+          },
+        ],
       }),
-      [currentWaveformProgress, fullWidth],
+      [fullWidth, maxThumbTranslateX, thumbDirectionMultiplier],
     );
 
     return (
@@ -140,30 +240,33 @@ export const WaveProgressBar = React.memo(
           }}
           style={[styles.container, container]}
         >
-          {resampledWaveformData.map((waveform, index) => (
+          <WaveformBars
+            color={semantics.chatWaveformBar}
+            heights={waveformHeights}
+            waveformStyle={waveformTheme}
+          />
+          {showInteractiveLayer ? (
             <Animated.View
-              key={index}
-              style={[
-                styles.waveform,
-                {
-                  backgroundColor:
-                    index < currentWaveformProgress
-                      ? semantics.chatWaveformBarPlaying
-                      : semantics.chatWaveformBar,
-                  height:
-                    waveform * WAVE_MAX_HEIGHT > WAVE_MIN_HEIGHT
-                      ? waveform * WAVE_MAX_HEIGHT
-                      : WAVE_MIN_HEIGHT,
-                },
-                waveformTheme,
-              ]}
-            />
-          ))}
-          {(onEndDrag || onProgressDrag) && (
-            <Animated.View style={[thumbStyles, thumb]}>
-              <ProgressControlThumb isPlaying={isPlaying} />
+              pointerEvents='none'
+              style={[styles.progressOverlay, progressOverlayStyles]}
+            >
+              <WaveformBars
+                color={semantics.chatWaveformBarPlaying}
+                heights={waveformHeights}
+                waveformStyle={waveformTheme}
+              />
             </Animated.View>
-          )}
+          ) : null}
+          {(onEndDrag || onProgressDrag) &&
+            (showInteractiveLayer ? (
+              <Animated.View style={[thumbStyles, thumb]}>
+                <ProgressControlThumb isPlaying={isPlaying} />
+              </Animated.View>
+            ) : (
+              <View style={[styles.idleThumb, thumb]}>
+                <ProgressControlThumb isPlaying={isPlaying} />
+              </View>
+            ))}
         </View>
       </GestureDetector>
     );
@@ -172,6 +275,9 @@ export const WaveProgressBar = React.memo(
     if (prevProps.amplitudesCount !== nextProps.amplitudesCount) {
       return false;
     }
+    if (prevProps.isPlaying !== nextProps.isPlaying) {
+      return false;
+    }
     if (prevProps.progress !== nextProps.progress) {
       return false;
     } else {
@@ -182,6 +288,21 @@ export const WaveProgressBar = React.memo(
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  idleThumb: {
+    left: 0,
+    position: 'absolute',
+  },
+  progressOverlay: {
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    top: 0,
+  },
+  waveformLayer: {
     alignItems: 'center',
     flexDirection: 'row',
     gap: WAVEFORM_GAP,

package/src/components/Reply/Reply.tsx

@@ -1,5 +1,14 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
+import {
+  I18nManager,
+  Image,
+  ImageProps,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import {
   isFileAttachment,
@@ -10,7 +19,8 @@ import {
 
 import { ReplyMessageView } from './ReplyMessageView';
 
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -18,6 +28,7 @@ import {
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks';
 import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
@@ -51,7 +62,7 @@ const RightContent = React.memo(
     ) {
       return (
         <View style={[styles.contentWrapper, styles.contentBorder]}>
-          <ImageComponent source={{ uri }} style={StyleSheet.absoluteFillObject} />
+          <ImageComponent source={{ uri }} style={StyleSheet.absoluteFill} />
         </View>
       );
     }
@@ -59,13 +70,17 @@ const RightContent = React.memo(
       return (
         <View style={[styles.contentWrapper, styles.contentBorder]}>
           <View style={styles.attachmentContainer}>
-            <Image source={{ uri: attachment.thumb_url }} style={StyleSheet.absoluteFillObject} />
+            <Image source={{ uri: attachment.thumb_url }} style={StyleSheet.absoluteFill} />
             <VideoPlayIndicator size='sm' />
           </View>
         </View>
       );
     }
 
+    if (attachment?.type === FileTypes.VoiceRecording) {
+      return null;
+    }
+
     if (attachment && isFileAttachment(attachment)) {
       return <FileIcon mimeType={attachment.mime_type} />;
     }
@@ -74,8 +89,10 @@ const RightContent = React.memo(
   },
 );
 
-export type ReplyPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'message'> &
+export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageProps> } & Pick<
+  MessageContextValue,
+  'message'
+> &
   Pick<MessagesContextValue, 'quotedMessage'> & {
     isMyMessage: boolean;
     onDismiss?: () => void;
@@ -92,6 +109,7 @@ export type ReplyPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
   };
 
 export const ReplyWithContext = (props: ReplyPropsWithContext) => {
+  const { t } = useTranslationContext();
   const {
     isMyMessage,
     ImageComponent,
@@ -118,13 +136,13 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
   const title = useMemo(
     () =>
       mode === 'edit'
-        ? 'Edit Message'
+        ? t('Edit Message')
         : isMyMessage
-          ? 'You'
+          ? t('You')
           : quotedMessage?.user?.name
-            ? `Reply to ${quotedMessage?.user?.name}`
-            : 'Reply',
-    [mode, isMyMessage, quotedMessage?.user?.name],
+            ? t('Reply to {{name}}', { name: quotedMessage?.user?.name })
+            : t('Reply'),
+    [mode, isMyMessage, quotedMessage?.user?.name, t],
   );
 
   if (!quotedMessage) {
@@ -210,7 +228,8 @@ export type ReplyProps = Partial<ReplyPropsWithContext> &
 
 export const Reply = (props: ReplyProps) => {
   const { message: messageFromContext } = useMessageContext();
-  const { client, ImageComponent } = useChatContext();
+  const { client } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
 
   const messageComposer = useMessageComposer();
   const { quotedMessage: quotedMessageFromComposer } = useStateStore(
@@ -247,6 +266,7 @@ const useStyles = () => {
   const { client } = useChatContext();
 
   const isMyMessage = client.user?.id === quotedMessageFromComposer?.user?.id;
+  const isRTL = I18nManager.isRTL;
 
   return useMemo(
     () =>
@@ -258,7 +278,7 @@ const useStyles = () => {
         },
         container: {
           borderRadius: primitives.radiusLg,
-          flexDirection: 'row',
+          flexDirection: isRTL ? 'row-reverse' : 'row',
           padding: primitives.spacingXs,
           backgroundColor: isMyMessage ? semantics.chatBgOutgoing : semantics.chatBgIncoming,
         },
@@ -278,14 +298,24 @@ const useStyles = () => {
           top: 0,
         },
         leftContainer: {
-          borderLeftWidth: 2,
           flex: 1,
           justifyContent: 'center',
           paddingHorizontal: primitives.spacingXs,
-          borderLeftColor: isMyMessage
-            ? semantics.chatReplyIndicatorOutgoing
-            : semantics.chatReplyIndicatorIncoming,
           gap: primitives.spacingXxxs,
+          alignItems: 'flex-start',
+          ...(isRTL
+            ? {
+                borderRightColor: isMyMessage
+                  ? semantics.chatReplyIndicatorOutgoing
+                  : semantics.chatReplyIndicatorIncoming,
+                borderRightWidth: 2,
+              }
+            : {
+                borderLeftColor: isMyMessage
+                  ? semantics.chatReplyIndicatorOutgoing
+                  : semantics.chatReplyIndicatorIncoming,
+                borderLeftWidth: 2,
+              }),
         },
         rightContainer: {},
         title: {
@@ -294,11 +324,12 @@ const useStyles = () => {
           fontWeight: primitives.typographyFontWeightSemiBold,
           includeFontPadding: false,
           lineHeight: primitives.typographyLineHeightTight,
+          textAlign: isRTL ? 'right' : 'left',
         },
         wrapper: {
           padding: primitives.spacingXxs,
         },
       }),
-    [isMyMessage, semantics],
+    [isMyMessage, isRTL, semantics],
   );
 };

package/src/components/Reply/ReplyMessageView.tsx

@@ -50,6 +50,7 @@ const useStyles = ({ isMyMessage = false }: { isMyMessage?: boolean }) => {
         alignItems: 'center',
         gap: primitives.spacingXxs,
         flexShrink: 1,
+        alignSelf: 'flex-start',
         ...messagePreview.container,
       },
       subtitle: {