stream-chat-react-native-core 4.3.0-beta.5 → 4.3.1-beta.2

package/lib/typescript/contexts/overlayContext/OverlayContext.d.ts

@@ -22,9 +22,9 @@ export declare type OverlayProviderProps<StreamChatGenerics extends DefaultStrea
     /**
      * 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']>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
+    giphyVersion?: keyof NonNullable<Attachment['giphy']>;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
     imageGalleryGridHandleHeight?: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.3.0-beta.5",
+  "version": "4.3.1-beta.2",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Giphy.tsx

@@ -201,6 +201,7 @@ const GiphyWithContext = <
         { backgroundColor: white, borderColor: `${black}0D` },
         selectionContainer,
       ]}
+      testID='giphy-action-attachment'
     >
       <View style={[styles.header, header]}>
         <GiphyIcon />
@@ -229,6 +230,7 @@ const GiphyWithContext = <
               { borderColor: grey_gainsboro, borderRightWidth: 1 },
               buttonContainer,
             ]}
+            testID={`${actions?.[2].value}-action-button`}
           >
             <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
           </TouchableOpacity>
@@ -243,6 +245,7 @@ const GiphyWithContext = <
               { borderColor: grey_gainsboro, borderRightWidth: 1 },
               buttonContainer,
             ]}
+            testID={`${actions?.[1].value}-action-button`}
           >
             <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
           </TouchableOpacity>
@@ -253,6 +256,7 @@ const GiphyWithContext = <
               }
             }}
             style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
+            testID={`${actions?.[0].value}-action-button`}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
           </TouchableOpacity>

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

@@ -10,9 +10,7 @@ import {
   generateAudioAttachment,
   generateCardAttachment,
   generateFileAttachment,
-  generateGiphyAttachment,
   generateImageAttachment,
-  generateImgurAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { Attachment } from '../Attachment';
@@ -53,65 +51,6 @@ describe('Attachment', () => {
     });
   });
 
-  it('should render Card component for "imgur" type attachment', async () => {
-    const attachment = generateImgurAttachment();
-    const { getByTestId } = render(getAttachmentComponent({ attachment }));
-
-    await waitFor(() => {
-      expect(getByTestId('giphy-attachment')).toBeTruthy();
-    });
-  });
-
-  it('should render Card component for "giphy" type attachment', async () => {
-    const attachment = generateGiphyAttachment();
-    const { getByTestId } = render(getAttachmentComponent({ attachment }));
-
-    await waitFor(() => {
-      expect(getByTestId('giphy-attachment')).toBeTruthy();
-    });
-  });
-
-  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/Attachment/__tests__/Giphy.test.js

@@ -0,0 +1,290 @@
+import React from 'react';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import {
+  generateGiphyAttachment,
+  generateImgurAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+import { Giphy } from '../Giphy';
+
+describe('Giphy', () => {
+  const getAttachmentComponent = (props) => {
+    const message = generateMessage();
+    return (
+      <ThemeProvider>
+        <MessageProvider value={{ message }}>
+          <Giphy {...props} />
+        </MessageProvider>
+      </ThemeProvider>
+    );
+  };
+
+  it('should render Card component for "imgur" type attachment', async () => {
+    const attachment = generateImgurAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('giphy-attachment')).toBeTruthy();
+    });
+  });
+
+  it('should render Card component for "giphy" type attachment', async () => {
+    const attachment = generateGiphyAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('giphy-attachment')).toBeTruthy();
+    });
+  });
+
+  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('show render giphy action UI and all the 3 action buttons', async () => {
+    const attachment = generateGiphyAttachment();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('giphy-action-attachment')).toBeTruthy();
+      expect(getByTestId('cancel-action-button')).toBeTruthy();
+      expect(getByTestId('shuffle-action-button')).toBeTruthy();
+      expect(getByTestId('send-action-button')).toBeTruthy();
+    });
+  });
+
+  it('should trigger the cancel giphy action', async () => {
+    const attachment = generateGiphyAttachment();
+    const handleAction = jest.fn();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({
+        attachment,
+        giphyVersion: 'fixed_height',
+        handleAction,
+      }),
+    );
+
+    await waitFor(() => getByTestId(`${attachment.actions[2].value}-action-button`));
+
+    expect(getByTestId('giphy-action-attachment')).toContainElement(
+      getByTestId(`${attachment.actions[2].value}-action-button`),
+    );
+
+    fireEvent.press(getByTestId(`${attachment.actions[2].value}-action-button`));
+
+    await waitFor(() => {
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should trigger the shuffle giphy action', async () => {
+    const attachment = generateGiphyAttachment();
+    const handleAction = jest.fn();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({
+        attachment,
+        giphyVersion: 'fixed_height',
+        handleAction,
+      }),
+    );
+
+    await waitFor(() => getByTestId(`${attachment.actions[1].value}-action-button`));
+
+    expect(getByTestId('giphy-action-attachment')).toContainElement(
+      getByTestId(`${attachment.actions[1].value}-action-button`),
+    );
+
+    fireEvent.press(getByTestId(`${attachment.actions[1].value}-action-button`));
+
+    await waitFor(() => {
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should trigger the send giphy action', async () => {
+    const attachment = generateGiphyAttachment();
+    const handleAction = jest.fn();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({
+        attachment,
+        giphyVersion: 'fixed_height',
+        handleAction,
+      }),
+    );
+
+    await waitFor(() => getByTestId(`${attachment.actions[0].value}-action-button`));
+
+    expect(getByTestId('giphy-action-attachment')).toContainElement(
+      getByTestId(`${attachment.actions[0].value}-action-button`),
+    );
+
+    fireEvent.press(getByTestId(`${attachment.actions[0].value}-action-button`));
+
+    await waitFor(() => {
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('giphy attachment UI should render within the message list with actions', async () => {
+    const user1 = generateUser();
+    const attachment = generateGiphyAttachment();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
+      ],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { getByTestId, queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    expect(queryByTestId('giphy-action-attachment')).toBeTruthy();
+    expect(getByTestId('cancel-action-button')).toBeTruthy();
+    expect(getByTestId('shuffle-action-button')).toBeTruthy();
+    expect(getByTestId('send-action-button')).toBeTruthy();
+  });
+
+  it('giphy attachment UI should render within the message list', async () => {
+    const user1 = generateUser();
+    const attachment = generateGiphyAttachment();
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
+      ],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    expect(queryByTestId('giphy-attachment')).toBeTruthy();
+  });
+});

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -132,25 +132,25 @@ export type AttachmentPickerProps = {
   /**
    * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png) of attachment picker.
    *
-   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
+   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
    */
   AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
-   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
+   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
    */
   AttachmentPickerError: React.ComponentType<AttachmentPickerErrorProps>;
   /**
    * Custom UI component to render error image for attachment picker
    *
-   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
+   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
    */
   AttachmentPickerErrorImage: React.ComponentType;
   /**
    * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png) (with tick mark)
    *
-   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
+   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
   attachmentPickerBottomSheetHandleHeight?: number;

package/src/components/Channel/Channel.tsx

@@ -304,7 +304,7 @@ export type ChannelPropsWithContext<
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
-     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
+     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
      * component to adjust the height of Channel when the keyboard is opened or dismissed. This prop provides the ability to disable this functionality in case you
      * want to use [KeyboardAvoidingView](https://facebook.github.io/react-native/docs/keyboardavoidingview) or handle dismissal yourself.
      * KeyboardAvoidingView works well when your component occupies 100% of screen height, otherwise it may raise some issues.
@@ -345,7 +345,7 @@ export type ChannelPropsWithContext<
     keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
     /**
      * Custom wrapper component that handles height adjustment of Channel component when keyboard is opened or dismissed
-     * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
+     * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
      *
      * **Example:**
      *

package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.js

@@ -18,7 +18,7 @@ import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
 
-describe('Message', () => {
+describe('isAttachmentEqualHandler', () => {
   let channel;
   let chatClient;
 

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -55,6 +55,7 @@ describe('useChannelUpdated', () => {
       render(
         <ChatContext.Provider
           value={{
+            appSettings: null,
             client: mockClient,
             connectionRecovering: false,
             isOnline: true,

package/src/components/Chat/Chat.tsx

@@ -5,6 +5,7 @@ import Dayjs from 'dayjs';
 
 import type { Channel } from 'stream-chat';
 
+import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -90,7 +91,7 @@ export type ChatProps<
    */
   i18nInstance?: Streami18n;
   /**
-   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/src/contexts/themeContext/utils/theme.ts)
+   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/themeContext/utils/theme.ts)
    *
    * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.
    *
@@ -161,7 +162,10 @@ const ChatWithContext = <
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
+  const appSettings = useAppSettings(client, isOnline);
+
   const chatContext = useCreateChatContext({
+    appSettings,
     channel,
     client,
     connectionRecovering,

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { StreamChat } from 'stream-chat';
+
+import { useAppSettings } from '../useAppSettings';
+
+describe('useAppSettings', () => {
+  it('will return a settings object if the backend call is successful', async () => {
+    const TestComponent = () => {
+      const isOnline = true;
+      const appSettings = useAppSettings(
+        {
+          getAppSettings: jest.fn().mockReturnValue(
+            Promise.resolve({
+              auto_translation_enabled: true,
+            }),
+          ),
+        } as unknown as StreamChat,
+        isOnline,
+      );
+
+      return <Text>{JSON.stringify(appSettings)}</Text>;
+    };
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(JSON.stringify({ auto_translation_enabled: true }))).toBeTruthy();
+    });
+  });
+});

package/src/components/Chat/hooks/useAppSettings.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from 'stream-chat-react-native';
+
+export const useAppSettings = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  client: StreamChat<StreamChatGenerics>,
+  isOnline: boolean,
+): AppSettingsAPIResponse | null => {
+  const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    async function getAppSettings() {
+      try {
+        const appSettings = await client.getAppSettings();
+        if (isMounted.current) {
+          setAppSettings(appSettings);
+        }
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          console.error(`An error occurred while getting app settings: ${error}`);
+        }
+      }
+    }
+
+    if (isOnline) {
+      getAppSettings();
+    }
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [client, isOnline]);
+
+  return appSettings;
+};

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -6,6 +6,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const useCreateChatContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  appSettings,
   channel,
   client,
   connectionRecovering,
@@ -21,6 +22,7 @@ export const useCreateChatContext = <
 
   const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
     () => ({
+      appSettings,
       channel,
       client,
       connectionRecovering,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -127,13 +127,13 @@ export type ImageGalleryCustomComponents<
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryCustomComponents<StreamChatGenerics> & {
     overlayOpacity: Animated.SharedValue<number>;
-    imageGalleryGridHandleHeight?: number;
-    /**
-     * This should be
-     */
-    imageGalleryGridSnapPoints?: [string | number, string | number];
-    numberOfImageGalleryGridColumns?: number;
-  } & Pick<OverlayProviderProps<StreamChatGenerics>, 'giphyVersion'>;
+  } & Pick<
+      OverlayProviderProps<StreamChatGenerics>,
+      | 'giphyVersion'
+      | 'imageGalleryGridSnapPoints'
+      | 'imageGalleryGridHandleHeight'
+      | 'numberOfImageGalleryGridColumns'
+    >;
 
 export const ImageGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -141,7 +141,7 @@ export const ImageGallery = <
   props: Props<StreamChatGenerics>,
 ) => {
   const {
-    giphyVersion,
+    giphyVersion = 'fixed_height',
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
     imageGalleryGridSnapPoints,
@@ -308,6 +308,7 @@ export const ImageGallery = <
    * Photos array created from all currently available
    * photo attachments
    */
+
   const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
       cur.attachments?.filter(

package/src/components/Message/Message.tsx

@@ -147,7 +147,7 @@ export type MessagePropsWithContext<
      * You can call methods available on the Message
      * component such as handleEdit, handleDelete, handleAction etc.
      *
-     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/Message.tsx)
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
      *
      * By default, we show the overlay with all the message actions on long press.
      *
@@ -160,7 +160,7 @@ export type MessagePropsWithContext<
      * You can call methods available on the Message
      * component such as handleEdit, handleDelete, handleAction etc.
      *
-     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/Message.tsx)
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
      *
      * By default, we will dismiss the keyboard on press.
      *