stream-chat-react-native-core 4.1.4 → 4.2.0-beta.3

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/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx

@@ -1,27 +1,37 @@
 import React from 'react';
-
 import type Animated from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
+
+import { renderHook } from '@testing-library/react-hooks';
 
 import { render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+
 import { ImageGalleryHeader } from '../ImageGalleryHeader';
 
 it('doesnt fail if fromNow is not available on first render', () => {
   try {
+    let sharedValueOpacity: Animated.SharedValue<number>;
+    let sharedValueVisible: Animated.SharedValue<number>;
+    renderHook(() => {
+      sharedValueOpacity = useSharedValue(1);
+      sharedValueVisible = useSharedValue(1);
+    });
     const { getAllByText } = render(
       <ThemeProvider>
         <ImageGalleryHeader
-          opacity={1 as unknown as Animated.SharedValue<number>}
+          // @ts-ignore
+          opacity={sharedValueOpacity}
           photo={{
             id: 'id',
             uri: 'file:///bogus/uri/to/photo.jpg',
           }}
-          visible={1 as unknown as Animated.SharedValue<number>}
+          // @ts-ignore
+          visible={sharedValueVisible}
         />
       </ThemeProvider>,
     );
-
     expect(getAllByText('Unknown User')).toBeTruthy();
   } catch (error: unknown) {
     if (error instanceof Error) {

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/Message/MessageSimple/__tests__/__snapshots__/MessageReplies.test.js.snap

@@ -47,6 +47,7 @@ exports[`MessageReplies should render message replies 1`] = `
   </View>
   <View
     accessible={true}
+    collapsable={false}
     focusable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}

package/src/components/Message/MessageSimple/utils/renderText.test.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Text } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
+import type { ReactTestInstance } from 'react-test-renderer';
+
+import { render, waitFor, within } from '@testing-library/react-native';
 
 // @ts-ignore
 import { ASTNode, SingleASTNode } from 'simple-markdown';
@@ -31,40 +33,45 @@ describe('list', () => {
     </>
   );
 
-  it('renders numbered items', async () => {
+  it('renders numbered items', () => {
     const node = createNode({ amount: 3, ordered: true, start: 1 });
-    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance, index) => {
+      const text = `${index + node.start}. `; // 1. , 2. ...
+      await waitFor(() => expect(within(instance).getByText(text)).toBeTruthy());
+    });
   });
 
-  it('renders numbered items from a start index', async () => {
+  it('renders numbered items from a start index', () => {
     const node = createNode({ amount: 3, ordered: true, start: 3 });
-    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance, index) => {
+      const text = `${index + node.start}. `; // 3. , 4. ...
+      await waitFor(() => expect(within(instance).getByText(text)).toBeTruthy());
+    });
   });
 
-  it('does not throw an error if an item is empty', async () => {
+  it('does not throw an error if an item is empty', () => {
     const node = {
       ...createNode({ amount: 3, ordered: true }),
       items: ['Not empty', null, 'Not empty'],
     };
-    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
-    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance, index) => {
+      const text = `${index + 1}. `; // 1. , 2. ...
+      await waitFor(() => expect(within(instance).getByText(text)).toBeTruthy());
+    });
   });
 
-  it('renders an unordered list', async () => {
+  it('renders an unordered list', () => {
     const node = createNode({ amount: 3 });
-    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
-
-    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+    const { container } = render(<MockText node={node} output={mockOutput} state={{}} />);
+    const textInstances = container.children as ReactTestInstance[];
+    textInstances.forEach(async (instance) => {
+      await waitFor(() => expect(within(instance).getByText('\u2022 ')).toBeTruthy());
+    });
   });
 });

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,
@@ -20,6 +23,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
 >
   <View
     accessible={true}
+    collapsable={false}
     hitSlop={
       Object {
         "bottom": 15,
@@ -83,6 +87,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,
@@ -100,6 +107,7 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
 >
   <View
     accessible={true}
+    collapsable={false}
     hitSlop={
       Object {
         "bottom": 15,