stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
 import { Dimensions, StyleSheet, View } from 'react-native';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
@@ -50,6 +49,8 @@ export const ProgressControl = React.memo(
       testID,
       width,
     } = props;
+    const state = useSharedValue(0);
+    const translateX = useSharedValue(0);
     const { width: windowWidth } = Dimensions.get('screen');
     const widthInNumbers = width
       ? typeof width === 'string'
@@ -62,9 +63,26 @@ export const ProgressControl = React.memo(
         progressControl: { container, filledColor: filledColorFromTheme, filledStyles, thumb },
       },
     } = useTheme();
+    const pan = Gesture.Pan()
+      .maxPointers(1)
+      .onStart(() => {
+        if (onPlayPause) runOnJS(onPlayPause)(true);
+        cancelAnimation(translateX);
+        state.value = translateX.value;
+      })
+      .onChange((event) => {
+        state.value = translateX.value + event.translationX;
+        if (state.value > widthInNumbers) state.value = widthInNumbers;
+        else if (state.value < 0) state.value = 0;
+      })
+      .onEnd(() => {
+        translateX.value = state.value;
+        const dragFinishLocationInSeconds = (state.value / widthInNumbers) * duration;
+        if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
+        if (onPlayPause) runOnJS(onPlayPause)(false);
+      })
+      .withTestId(testID);
 
-    const state = useSharedValue(0);
-    const translateX = useSharedValue(0);
     const filledColor = filledColorFromProp || filledColorFromTheme;
 
     useEffect(() => {
@@ -84,43 +102,16 @@ export const ProgressControl = React.memo(
       transform: [{ translateX: state.value }],
     }));
 
-    const onGestureEvent = useAnimatedGestureHandler(
-      {
-        onActive: (event) => {
-          state.value = translateX.value + event.translationX;
-          if (state.value > widthInNumbers) state.value = widthInNumbers;
-          else if (state.value < 0) state.value = 0;
-        },
-        onFinish: () => {
-          translateX.value = state.value;
-          const dragFinishLocationInSeconds = (state.value / widthInNumbers) * duration;
-          if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
-          if (onPlayPause) runOnJS(onPlayPause)(false);
-        },
-        onStart: () => {
-          if (onPlayPause) runOnJS(onPlayPause)(true);
-          cancelAnimation(translateX);
-          state.value = translateX.value;
-        },
-      },
-      [duration, widthInNumbers],
-    );
-
     return (
       <View
         style={[styles.container, { backgroundColor: grey_dark, width: widthInNumbers }, container]}
       >
         <Animated.View style={[styles.filledStyle, animatedStyles, filledStyles]} />
-
-        <PanGestureHandler
-          maxPointers={1}
-          onGestureEvent={onProgressDrag ? onGestureEvent : undefined}
-          testID={testID}
-        >
+        <GestureDetector gesture={pan}>
           <Animated.View style={[thumbStyles, thumb]}>
-            {onProgressDrag && <ProgressControlThumb />}
+            {onProgressDrag ? <ProgressControlThumb /> : null}
           </Animated.View>
-        </PanGestureHandler>
+        </GestureDetector>
       </View>
     );
   },
@@ -137,7 +128,6 @@ export const ProgressControl = React.memo(
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 50,
     height,
   },
   filledStyle: {
@@ -147,15 +137,15 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     borderWidth: 0.2,
     elevation: 6,
-    height: 20,
+    height: 30,
     shadowOffset: {
       height: 3,
       width: 0,
     },
     shadowOpacity: 0.27,
     shadowRadius: 4.65,
-    top: -11,
-    width: 5,
+    top: -15,
+    width: 6,
   },
 });
 ProgressControl.displayName = 'ProgressControl';

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,12 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { PanGestureHandler } from 'react-native-gesture-handler';
-import Animated, {
-  runOnJS,
-  useAnimatedGestureHandler,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
@@ -68,6 +63,31 @@ export const WaveProgressBar = React.memo(
     } = useTheme();
     const state = useSharedValue(0);
 
+    const pan = Gesture.Pan()
+      .maxPointers(1)
+      .onStart(() => {
+        if (onPlayPause) runOnJS(onPlayPause)(true);
+        state.value = endPosition;
+      })
+      .onChange((event) => {
+        const stage = Math.floor((endPosition + event.translationX) / (WAVEFORM_WIDTH * 2));
+        runOnJS(setCurrentWaveformProgress)(stage);
+        state.value = stage * (WAVEFORM_WIDTH * 2);
+        if (state.value < 0) {
+          state.value = 0;
+        } else if (state.value > amplitudesCount * (WAVEFORM_WIDTH * 2)) {
+          state.value = (amplitudesCount - 1) * (WAVEFORM_WIDTH * 2);
+        } else {
+          runOnJS(triggerHaptic)('impactLight');
+        }
+      })
+      .onEnd(() => {
+        const stage = Math.floor(state.value / (WAVEFORM_WIDTH * 2));
+        runOnJS(setEndPosition)(state.value);
+        if (onProgressDrag) runOnJS(onProgressDrag)(stage);
+        if (onPlayPause) runOnJS(onPlayPause)(false);
+      });
+
     useEffect(() => {
       const stageProgress = Math.floor(
         progress * (showProgressDrag ? amplitudesCount - 1 : amplitudesCount),
@@ -91,34 +111,6 @@ export const WaveProgressBar = React.memo(
       transform: [{ translateX: state.value }],
     }));
 
-    const onGestureEvent = useAnimatedGestureHandler(
-      {
-        onActive: (event) => {
-          const stage = Math.floor((endPosition + event.translationX) / (WAVEFORM_WIDTH * 2));
-          runOnJS(setCurrentWaveformProgress)(stage);
-          state.value = stage * (WAVEFORM_WIDTH * 2);
-          if (state.value < 0) {
-            state.value = 0;
-          } else if (state.value > amplitudesCount * (WAVEFORM_WIDTH * 2)) {
-            state.value = (amplitudesCount - 1) * (WAVEFORM_WIDTH * 2);
-          } else {
-            runOnJS(triggerHaptic)('impactLight');
-          }
-        },
-        onFinish: () => {
-          const stage = Math.floor(state.value / (WAVEFORM_WIDTH * 2));
-          runOnJS(setEndPosition)(state.value);
-          if (onProgressDrag) runOnJS(onProgressDrag)(stage);
-          if (onPlayPause) runOnJS(onPlayPause)(false);
-        },
-        onStart: () => {
-          if (onPlayPause) runOnJS(onPlayPause)(true);
-          state.value = endPosition;
-        },
-      },
-      [amplitudesCount, endPosition],
-    );
-
     return (
       <View style={[styles.container, container]}>
         {resampledWaveformData.map((waveform, index) => (
@@ -136,11 +128,11 @@ export const WaveProgressBar = React.memo(
           />
         ))}
         {showProgressDrag && onProgressDrag && (
-          <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent}>
+          <GestureDetector gesture={pan}>
             <Animated.View style={[thumbStyles, thumb]}>
               <ProgressControlThumb />
             </Animated.View>
-          </PanGestureHandler>
+          </GestureDetector>
         )}
       </View>
     );

package/src/components/Reply/Reply.tsx

@@ -9,6 +9,7 @@ import merge from 'lodash/merge';
 import type { Attachment, PollState } from 'stream-chat';
 
 import { useChatContext } from '../../contexts';
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
   MessageInputContext,
@@ -156,6 +157,7 @@ const ReplyWithContext = <
     styles: stylesProp = {},
     t,
   } = props;
+  const { resizableCDNHosts } = useChatConfigContext();
 
   const [error, setError] = useState(false);
 
@@ -184,14 +186,14 @@ const ReplyWithContext = <
   const poll = client.polls.fromState((quotedMessage as MessageType)?.poll_id ?? '');
   const { name: pollName }: ReplySelectorReturnType = useStateStore(poll?.state, selector) ?? {};
 
-  const messageText = typeof quotedMessage === 'boolean' ? '' : quotedMessage.text || '';
+  const messageText = quotedMessage ? quotedMessage.text : '';
 
   const emojiOnlyText = useMemo(() => {
     if (!messageText) return false;
     return hasOnlyEmojis(messageText);
   }, [messageText]);
 
-  if (typeof quotedMessage === 'boolean') return null;
+  if (!quotedMessage) return null;
 
   const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
   const messageType = lastAttachment && getMessageType(lastAttachment);
@@ -247,6 +249,7 @@ const ReplyWithContext = <
                     (stylesProp.imageAttachment?.height as number) ||
                     (imageAttachment?.height as number) ||
                     styles.imageAttachment.height,
+                  resizableCDNHosts,
                   url: (lastAttachment.image_url ||
                     lastAttachment.thumb_url ||
                     lastAttachment.og_scrape_url) as string,