stream-chat-react-native-core 4.1.4-beta.1 → 4.2.0-beta.2

package/src/components/Attachment/Giphy.tsx

@@ -18,7 +18,15 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
-  buttonContainer: { alignItems: 'center', borderTopWidth: 1, flex: 1, justifyContent: 'center' },
+  actionsRow: {
+    flexDirection: 'row',
+  },
+  buttonContainer: {
+    alignItems: 'center',
+    borderTopWidth: 1,
+    flex: 1,
+    justifyContent: 'center',
+  },
   cancel: {
     fontSize: 14,
     fontWeight: '600',
@@ -29,8 +37,10 @@ const styles = StyleSheet.create({
     width: 270,
   },
   giphy: {
+    alignSelf: 'center',
     borderRadius: 2,
     height: 170,
+    maxWidth: 270,
     width: 270,
   },
   giphyContainer: {
@@ -53,7 +63,10 @@ const styles = StyleSheet.create({
     left: 8,
     position: 'absolute',
   },
-  giphyMaskText: { fontSize: 13, fontWeight: '600' },
+  giphyMaskText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
   header: {
     alignItems: 'center',
     display: 'flex',
@@ -62,16 +75,16 @@ const styles = StyleSheet.create({
     padding: 8,
     width: '60%',
   },
-  margin: {
-    margin: 1,
-  },
-  row: { flexDirection: 'row' },
   selectionContainer: {
     borderBottomLeftRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
     width: 272,
   },
+  selectionImageContainer: {
+    alignSelf: 'center',
+    margin: 1,
+  },
   send: {
     fontSize: 14,
     fontWeight: '600',
@@ -98,7 +111,7 @@ export type GiphyPropsWithContext<
   MessageContextValue<StreamChatGenerics>,
   'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps'> & {
+  Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'> & {
     attachment: Attachment<StreamChatGenerics>;
   };
 
@@ -117,11 +130,11 @@ const GiphyWithContext = <
     preventPress,
   } = props;
 
-  const { actions, image_url, thumb_url, title, type } = attachment;
+  const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
 
   const {
     theme: {
-      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, white },
+      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, label_bg_transparent, white },
       messageSimple: {
         giphy: {
           buttonContainer,
@@ -142,7 +155,15 @@ const GiphyWithContext = <
     },
   } = useTheme();
 
-  const uri = image_url || thumb_url;
+  let uri = image_url || thumb_url;
+  const giphyDimensions: { height?: number; width?: number } = {};
+
+  if (type === 'giphy' && giphyData) {
+    const giphyVersionInfo = giphyData[props.giphyVersion];
+    uri = giphyVersionInfo.url;
+    giphyDimensions.height = parseFloat(giphyVersionInfo.height);
+    giphyDimensions.width = parseFloat(giphyVersionInfo.width);
+  }
 
   if (!uri) return null;
 
@@ -161,15 +182,15 @@ const GiphyWithContext = <
           style={[styles.giphyHeaderTitle, giphyHeaderTitle, { color: grey_dark }]}
         >{`/giphy ${title}`}</Text>
       </View>
-      <View style={styles.margin}>
+      <View style={styles.selectionImageContainer}>
         <Image
-          resizeMode='cover'
+          resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
-          style={[styles.giphy, giphy]}
+          style={[styles.giphy, giphyDimensions, giphy]}
         />
       </View>
       <View>
-        <View style={styles.row}>
+        <View style={styles.actionsRow}>
           <TouchableOpacity
             onPress={() => {
               if (actions?.[2].name && actions?.[2].value && handleAction) {
@@ -238,18 +259,24 @@ const GiphyWithContext = <
           });
         }
       }}
-      style={[styles.container, container]}
       testID='giphy-attachment'
       {...additionalTouchableProps}
     >
-      <View>
+      <View style={[styles.container, container]}>
         <Image
-          resizeMode='cover'
+          resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
-          style={[styles.giphy, giphy]}
+          style={[styles.giphy, giphyDimensions, giphy]}
+          testID='giphy-attachment-image'
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: grey_dark }, giphyContainer]}>
+          <View
+            style={[
+              styles.giphyContainer,
+              { backgroundColor: label_bg_transparent },
+              giphyContainer,
+            ]}
+          >
             <Lightning height={16} pathFill={white} width={16} />
             <Text style={[styles.giphyMaskText, { color: white }, giphyMaskText]}>
               {type?.toUpperCase()}
@@ -267,9 +294,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
+    giphyVersion: prevGiphyVersion,
   } = prevProps;
   const {
     attachment: { actions: nextActions, image_url: nextImageUrl, thumb_url: nextThumbUrl },
+    giphyVersion: nextGiphyVersion,
   } = nextProps;
 
   const imageUrlEqual = prevImageUrl === nextImageUrl;
@@ -278,6 +307,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const thumbUrlEqual = prevThumbUrl === nextThumbUrl;
   if (!thumbUrlEqual) return false;
 
+  const giphyVersionEqual = prevGiphyVersion === nextGiphyVersion;
+  if (!giphyVersionEqual) return false;
+
   const actionsEqual =
     Array.isArray(prevActions) === Array.isArray(nextActions) &&
     ((Array.isArray(prevActions) &&
@@ -294,8 +326,8 @@ const MemoizedGiphy = React.memo(GiphyWithContext, areEqual) as typeof GiphyWith
 export type GiphyProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<
-  Pick<MessageContextValue<StreamChatGenerics>, 'onLongPress' | 'onPressIn'> &
-    Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps'>
+  Pick<MessageContextValue<StreamChatGenerics>, 'isMyMessage' | 'onLongPress' | 'onPressIn'> &
+    Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'>
 > & {
   attachment: Attachment<StreamChatGenerics>;
 };
@@ -310,12 +342,13 @@ export const Giphy = <
 ) => {
   const { handleAction, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
-  const { additionalTouchableProps } = useMessagesContext<StreamChatGenerics>();
+  const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedGiphy
       {...{
         additionalTouchableProps,
+        giphyVersion,
         handleAction,
         onLongPress,
         onPress,

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -71,6 +71,47 @@ describe('Attachment', () => {
     });
   });
 
+  it('"giphy" attachment size should be customisable', async () => {
+    const attachment = generateGiphyAttachment();
+    attachment.giphy = {
+      fixed_height: {
+        height: '200',
+        url: 'https://media1.giphy.com/media/test/fixed_height.gif',
+        width: '375',
+      },
+      original: {
+        height: '256',
+        url: 'https://media1.giphy.com/media/test/original.gif',
+        width: '480',
+      },
+    };
+    const { getByTestId: getByTestIdFixedHeight } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
+    );
+    const { getByTestId: getByTestIdOriginal } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'original' }),
+    );
+    await waitFor(() => {
+      const checkImageProps = (imageProps, specificSizedGiphyData) => {
+        let imageStyle = imageProps.style;
+        if (Array.isArray(imageStyle)) {
+          imageStyle = Object.assign({}, ...imageStyle);
+        }
+        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
+        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
+        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
+      };
+      checkImageProps(
+        getByTestIdFixedHeight('giphy-attachment-image').props,
+        attachment.giphy.fixed_height,
+      );
+      checkImageProps(
+        getByTestIdOriginal('giphy-attachment-image').props,
+        attachment.giphy.original,
+      );
+    });
+  });
+
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
     const attachment = generateImageAttachment({
       og_scrape_url: uuidv4(),

package/src/components/Channel/Channel.tsx

@@ -238,6 +238,7 @@ export type ChannelPropsWithContext<
       | 'formatDate'
       | 'Gallery'
       | 'Giphy'
+      | 'giphyVersion'
       | 'handleBlock'
       | 'handleCopy'
       | 'handleDelete'
@@ -426,6 +427,7 @@ const ChannelWithContext = <
     Gallery = GalleryDefault,
     Giphy = GiphyDefault,
     giphyEnabled,
+    giphyVersion = 'fixed_height',
     globalUnreadCountLimit = 255,
     handleBlock,
     handleCopy,
@@ -1672,6 +1674,7 @@ const ChannelWithContext = <
     formatDate,
     Gallery,
     Giphy,
+    giphyVersion,
     handleBlock,
     handleCopy,
     handleDelete,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -27,6 +27,7 @@ export const useCreateMessagesContext = <
   formatDate,
   Gallery,
   Giphy,
+  giphyVersion,
   handleBlock,
   handleCopy,
   handleDelete,
@@ -111,6 +112,7 @@ export const useCreateMessagesContext = <
       formatDate,
       Gallery,
       Giphy,
+      giphyVersion,
       handleBlock,
       handleCopy,
       handleDelete,

package/src/components/ChannelList/ChannelListMessenger.tsx

@@ -164,7 +164,6 @@ const ChannelListMessengerWithContext = <
         ListHeaderComponent={ListFooterComponent}
         onEndReached={onEndReached}
         onEndReachedThreshold={loadMoreThreshold}
-        // @ts-expect-error waiting for this merged PR to be released https://github.com/software-mansion/react-native-gesture-handler/pull/1394
         ref={setFlatListRef}
         refreshControl={<RefreshControl onRefresh={refreshList} refreshing={refreshing} />}
         renderItem={renderItem}

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -185,7 +185,14 @@ const MessageContentWithContext = <
 
   const hasThreadReplies = !!message?.reply_count;
 
-  const noBorder = (onlyEmojis && !message.quoted_message) || !!otherAttachments.length;
+  let noBorder = onlyEmojis && !message.quoted_message;
+  if (otherAttachments.length) {
+    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+      noBorder = false;
+    } else {
+      noBorder = true;
+    }
+  }
 
   const isMessageTypeDeleted = message.type === 'deleted';
 
@@ -200,18 +207,18 @@ const MessageContentWithContext = <
     );
   }
 
-  const backgroundColor =
-    onlyEmojis && !message.quoted_message
-      ? transparent
-      : otherAttachments.length
-      ? otherAttachments[0].type === 'giphy'
-        ? !message.quoted_message
-          ? transparent
-          : grey_gainsboro
-        : blue_alice
-      : alignment === 'left' || error
-      ? white
-      : grey_gainsboro;
+  let backgroundColor = grey_gainsboro;
+  if (onlyEmojis && !message.quoted_message) {
+    backgroundColor = transparent;
+  } else if (otherAttachments.length) {
+    if (otherAttachments[0].type === 'giphy') {
+      backgroundColor = message.quoted_message || isMyMessage ? grey_gainsboro : white;
+    } else {
+      backgroundColor = blue_alice;
+    }
+  } else if (alignment === 'left' || error) {
+    backgroundColor = white;
+  }
 
   const repliesCurveColor = isMyMessage && !error ? backgroundColor : grey_whisper;
 

package/src/components/MessageInput/__tests__/AttachButton.test.js

@@ -6,14 +6,16 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { AttachButton } from '../AttachButton';
 
 describe('AttachButton', () => {
+  const getComponent = (props = {}) => (
+    <ThemeProvider>
+      <AttachButton {...props} />
+    </ThemeProvider>
+  );
+
   it('should render an enabled AttachButton', async () => {
     const handleOnPress = jest.fn();
 
-    const { getByTestId, queryByTestId, toJSON } = render(
-      <ThemeProvider>
-        <AttachButton handleOnPress={handleOnPress} />
-      </ThemeProvider>,
-    );
+    const { getByTestId, queryByTestId, toJSON } = render(getComponent({ handleOnPress }));
 
     await waitFor(() => {
       expect(queryByTestId('attach-button')).toBeTruthy();
@@ -35,9 +37,7 @@ describe('AttachButton', () => {
     const handleOnPress = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <ThemeProvider>
-        <AttachButton disabled handleOnPress={handleOnPress} />
-      </ThemeProvider>,
+      getComponent({ disabled: true, handleOnPress }),
     );
 
     await waitFor(() => {

package/src/components/MessageInput/__tests__/SendButton.test.js

@@ -7,15 +7,19 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { SendButton } from '../SendButton';
 
 describe('SendButton', () => {
+  const getComponent = ({ editing, ...rest } = {}) => (
+    <ThemeProvider>
+      <MessagesProvider value={{ editing }}>
+        <SendButton {...rest} />
+      </MessagesProvider>
+    </ThemeProvider>
+  );
+
   it('should render a non-editing enabled SendButton', async () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <ThemeProvider>
-        <MessagesProvider value={{ editing: false }}>
-          <SendButton sendMessage={sendMessage} />
-        </MessagesProvider>
-      </ThemeProvider>,
+      getComponent({ editing: false, sendMessage }),
     );
 
     await waitFor(() => {
@@ -38,11 +42,7 @@ describe('SendButton', () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <ThemeProvider>
-        <MessagesProvider value={{ editing: false }}>
-          <SendButton disabled sendMessage={sendMessage} />
-        </MessagesProvider>
-      </ThemeProvider>,
+      getComponent({ disabled: true, editing: false, sendMessage }),
     );
 
     await waitFor(() => {
@@ -65,11 +65,7 @@ describe('SendButton', () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <ThemeProvider>
-        <MessagesProvider value={{ editing: true }}>
-          <SendButton sendMessage={sendMessage} />
-        </MessagesProvider>
-      </ThemeProvider>,
+      getComponent({ editing: true, sendMessage }),
     );
 
     await waitFor(() => {
@@ -92,11 +88,7 @@ describe('SendButton', () => {
     const sendMessage = jest.fn();
 
     const { getByTestId, queryByTestId, toJSON } = render(
-      <ThemeProvider>
-        <MessagesProvider value={{ editing: true }}>
-          <SendButton disabled sendMessage={sendMessage} />
-        </MessagesProvider>
-      </ThemeProvider>,
+      getComponent({ disabled: true, editing: true, sendMessage }),
     );
 
     await waitFor(() => {

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -3,6 +3,9 @@
 exports[`AttachButton should render a disabled AttachButton 1`] = `
 <RNGestureHandlerButton
   collapsable={false}
+  exclusive={true}
+  handlerTag={2}
+  handlerType="NativeViewGestureHandler"
   hitSlop={
     Object {
       "bottom": 15,
@@ -83,6 +86,9 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
 exports[`AttachButton should render an enabled AttachButton 1`] = `
 <RNGestureHandlerButton
   collapsable={false}
+  exclusive={true}
+  handlerTag={1}
+  handlerType="NativeViewGestureHandler"
   hitSlop={
     Object {
       "bottom": 15,

package/src/components/MessageInput/__tests__/__snapshots__/MessageInput.test.js.snap

@@ -69,6 +69,9 @@ Array [
             >
               <RNGestureHandlerButton
                 collapsable={false}
+                exclusive={true}
+                handlerTag={1}
+                handlerType="NativeViewGestureHandler"
                 hitSlop={
                   Object {
                     "bottom": 15,
@@ -150,6 +153,9 @@ Array [
             >
               <RNGestureHandlerButton
                 collapsable={false}
+                exclusive={true}
+                handlerTag={2}
+                handlerType="NativeViewGestureHandler"
                 hitSlop={
                   Object {
                     "bottom": 15,
@@ -305,6 +311,9 @@ Array [
           >
             <RNGestureHandlerButton
               collapsable={false}
+              exclusive={true}
+              handlerTag={3}
+              handlerType="NativeViewGestureHandler"
               onGestureEvent={[Function]}
               onGestureHandlerEvent={[Function]}
               onGestureHandlerStateChange={[Function]}

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap

@@ -3,6 +3,9 @@
 exports[`SendButton should render a non-editing disabled SendButton 1`] = `
 <RNGestureHandlerButton
   collapsable={false}
+  exclusive={true}
+  handlerTag={2}
+  handlerType="NativeViewGestureHandler"
   onGestureEvent={[Function]}
   onGestureHandlerEvent={[Function]}
   onGestureHandlerStateChange={[Function]}
@@ -67,6 +70,9 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
 exports[`SendButton should render a non-editing enabled SendButton 1`] = `
 <RNGestureHandlerButton
   collapsable={false}
+  exclusive={true}
+  handlerTag={1}
+  handlerType="NativeViewGestureHandler"
   onGestureEvent={[Function]}
   onGestureHandlerEvent={[Function]}
   onGestureHandlerStateChange={[Function]}
@@ -131,6 +137,9 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
 exports[`SendButton should render an editing disabled SendButton 1`] = `
 <RNGestureHandlerButton
   collapsable={false}
+  exclusive={true}
+  handlerTag={4}
+  handlerType="NativeViewGestureHandler"
   onGestureEvent={[Function]}
   onGestureHandlerEvent={[Function]}
   onGestureHandlerStateChange={[Function]}
@@ -195,6 +204,9 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
 exports[`SendButton should render an editing enabled SendButton 1`] = `
 <RNGestureHandlerButton
   collapsable={false}
+  exclusive={true}
+  handlerTag={3}
+  handlerType="NativeViewGestureHandler"
   onGestureEvent={[Function]}
   onGestureHandlerEvent={[Function]}
   onGestureHandlerStateChange={[Function]}

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -4,7 +4,7 @@ import type { TouchableOpacityProps } from 'react-native';
 
 import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 
-import type { ChannelState, MessageResponse } from 'stream-chat';
+import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
@@ -107,7 +107,10 @@ export type MessagesContextValue<
    * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Giphy.tsx)
    */
   Giphy: React.ComponentType<GiphyProps<StreamChatGenerics>>;
-
+  /**
+   * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
+   * */
+  giphyVersion: keyof NonNullable<Attachment['giphy']>;
   /**
    * When true, messageList will be scrolled at first unread message, when opened.
    */

package/src/contexts/themeContext/utils/theme.ts

@@ -20,6 +20,7 @@ export const Colors = {
   grey_gainsboro: '#DBDBDB',
   grey_whisper: '#ECEBEB',
   icon_background: '#FFFFFF',
+  label_bg_transparent: '#00000033', // 33 = 20% opacity
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
   overlay: '#000000CC', // CC = 80% opacity
   shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.1.4-beta.1"
+  "version": "4.2.0-beta.2"
 }