feat: remove StreamChatRN in favour of a global context ChatConfigContext that allows providing global values (#2703)

Author: khushal87

docusaurus/docs/reactnative/basics/migrating-from-5.x-to-6.x.mdx

@@ -90,6 +90,36 @@ The Message Menu design has been revamped to provide a better user experience. T
 The previous overlay design has been replaced with a bottom sheet modal design.
 :::
 
+#### Remove `StreamChatRN` and introduce `ChatConfigContext`
+
+The `StreamChatRN` global config is removed in favour of the `ChatConfigContext`. The `ChatConfigContext` is a more versatile and feature-rich context that can be used to provide any global configuration to the chat application.
+
+The `resizableCDNHosts` can be configured by wrapping the root of your Chat application with `ChatConfigProvider` as follows:
+
+```tsx
+import { Chat, ChatConfigProvider, OverlayProvider } from 'stream-chat-react-native';
+
+const App = () => {
+  return (
+    <ChatConfigProvider
+      value={{
+        resizableCDNHosts: ['cdn.example.com'],
+      }}
+    >
+      <OverlayProvider>
+        <Chat client={client}>
+          <ChannelList />
+        </Chat>
+      </OverlayProvider>
+    </ChatConfigProvider>
+  );
+};
+```
+
+:::note
+If nothing is provided, the `resizableCDNHosts` will default to `['.stream-io-cdn.com']`.
+:::
+
 #### Removed `MessageOverlayContext` and `MessageOverlayProvider`
 
 The `MessageOverlayContext` and `MessageOverlayProvider` have been removed.

docusaurus/docs/reactnative/contexts/chat-context.mdx

@@ -61,13 +61,5 @@ Array of users muted by current user.
 | ----- |
 | array |
 
-### `resizableCDNHosts`
-
-This option allows you to specify a list of CDNs that offer image resizing.
-
-| Type       | Default                  |
-| ---------- | ------------------------ |
-| `string[]` | `['.stream-io-cdn.com']` |
-
 <!-- ### setActiveChannel -->
 <!-- ### channel -->

docusaurus/docs/reactnative/core-components/chat.mdx

@@ -110,14 +110,6 @@ Themes are not hoisted though, therefore a theme provided to `Chat` will not cha
 | ------ |
 | Object |
 
-### `resizableCDNHosts`
-
-This option allows you to specify a list of CDNs that offer image resizing.
-
-| Type       | Default                  |
-| ---------- | ------------------------ |
-| `string[]` | `['.stream-io-cdn.com']` |
-
 ## UI Component Props
 
 ### `ImageComponent`

docusaurus/docs/reactnative/customization/global_config.mdx

@@ -5,33 +5,42 @@ title: Global Config
 ---
 
 The core of Stream Chat for React Native is it's ability to be customized to your needs.
-The new `Global Config` feature allows you to enable and disable features of the library and alter the default behavior of the SDK.
-
-:::info
-This will be not be the recommended way of setting the config in the next major version of the SDK that is v6.
-
-Use the `resizableCDNHosts` prop in the [`Chat`](../core-components/chat.mdx) component instead.
-:::
+The new `Global Chat Config` feature allows you to enable and disable features of the library and alter the default behavior of the SDK.
 
 ## When to use global config
 
-When you want to alter the default behavior of the SDK or it's components.
-Please check the available options below to see if there is a config option that fits your needs.
+When you want to alter the default behavior of the SDK such as changing the CDN hosts.
 
 ## How to use and alter the global config
 
-Altering the global config can be done by calling the `setConfig` function on the `StreamChatRN` object.
-Make sure to call this function before any other components are rendered at the root of your application (App.tsx in most cases).
+The `ChatConfigProvider` is a context provider that can be used to provide global configuration to the chat application.
 
-```tsx
-import { StreamChatRN } from 'stream-chat-react-native';
+The `resizableCDNHosts` can be configured by wrapping the root of your Chat application with `ChatConfigProvider` as follows:
 
-StreamChatRN.setConfig({
-  resizableCDNHosts: ['https://my-company-cdn.com'],
-  // future config options
-});
+```tsx
+import { Chat, ChatConfigProvider, OverlayProvider } from 'stream-chat-react-native';
+
+const App = () => {
+  return (
+    <ChatConfigProvider
+      value={{
+        resizableCDNHosts: ['cdn.example.com'],
+      }}
+    >
+      <OverlayProvider>
+        <Chat client={client}>
+          <ChannelList />
+        </Chat>
+      </OverlayProvider>
+    </ChatConfigProvider>
+  );
+};
 ```
 
+:::note
+If nothing is provided, the `resizableCDNHosts` will default to `['.stream-io-cdn.com']`.
+:::
+
 ## Available config features/Options
 
 ### `resizableCDNHosts`

package/src/components/Attachment/Gallery.tsx

@@ -13,6 +13,7 @@ import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius
 import { openUrlSafely } from './utils/openUrlSafely';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -104,6 +105,7 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
+  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       messageSimple: {
@@ -139,6 +141,7 @@ const GalleryWithContext = <
     () =>
       buildGallery({
         images: imagesAndVideos,
+        resizableCDNHosts,
         sizeConfig,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/Attachment/utils/buildGallery/buildGallery.ts

@@ -10,6 +10,11 @@ import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
+import {
+  ChatConfigContextValue,
+  chatConfigContextDefaultvalue,
+} from '../../../../contexts/chatConfigContext/ChatConfigContext';
+
 /**
  * Builds and returns a gallery of optimized images to be rendered on UI.
  * This function take a object parameter with following properties:
@@ -30,28 +35,32 @@ export function buildGallery<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
+  resizableCDNHosts = chatConfigContextDefaultvalue.resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   if (images.length === 1) {
     return buildGalleryOfSingleImage({
       image: images[0],
+      resizableCDNHosts,
       sizeConfig,
     });
   }
 
   if (images.length === 2) {
     return buildGalleryOfTwoImages({
       images,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
 
   if (images.length === 3) {
     return buildGalleryOfThreeImages({
       images,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -72,6 +81,7 @@ export function buildGallery<
     ],
     images: images.slice(0, 4),
     invertedDirections: true,
+    resizableCDNHosts,
     sizeConfig,
   });
 }

package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts

@@ -6,6 +6,7 @@ import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 
 /**
  * Bound a number to a range.
@@ -67,8 +68,9 @@ export function buildGalleryOfSingleImage<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   image,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   image: Attachment<StreamChatGenerics>;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -79,6 +81,7 @@ export function buildGalleryOfSingleImage<
 
   const thumbnail = buildThumbnail({
     image,
+    resizableCDNHosts,
     ...container,
   });
 

package/src/components/Attachment/utils/buildGallery/buildGalleryOfThreeImages.ts

@@ -6,6 +6,7 @@ import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 
 /** function to move item to the front of the array */
 function moveToFront<T>(array: T[], item: T): T[] {
@@ -23,8 +24,9 @@ export function buildGalleryOfThreeImages<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -77,6 +79,7 @@ export function buildGalleryOfThreeImages<
       grid: [[1], [1, 1]],
       images: landscapeImage ? moveToFront(images, landscapeImage) : images,
       invertedDirections: true,
+      resizableCDNHosts,
       sizeConfig,
     });
   } else {
@@ -93,6 +96,7 @@ export function buildGalleryOfThreeImages<
       grid: [[1], [1, 1]],
       images: portraitImage ? moveToFront(images, portraitImage) : images,
       invertedDirections: false,
+      resizableCDNHosts,
       sizeConfig,
     });
   }

package/src/components/Attachment/utils/buildGallery/buildGalleryOfTwoImages.ts

@@ -6,13 +6,15 @@ import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getAspectRatio } from '../getAspectRatio';
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 
 export function buildGalleryOfTwoImages<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   images,
+  resizableCDNHosts,
   sizeConfig,
-}: {
+}: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   images: Attachment<StreamChatGenerics>[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
@@ -36,6 +38,7 @@ export function buildGalleryOfTwoImages<
       grid: [[1], [1]],
       images,
       invertedDirections: true,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -53,6 +56,7 @@ export function buildGalleryOfTwoImages<
       grid: [[1, 1]],
       images,
       invertedDirections: true,
+      resizableCDNHosts,
       sizeConfig,
     });
   }
@@ -61,6 +65,7 @@ export function buildGalleryOfTwoImages<
     grid: [[2, 1]],
     images: isLandscape1 ? images : images.reverse(),
     invertedDirections: true,
+    resizableCDNHosts,
     sizeConfig,
   });
 }

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -8,20 +8,26 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
+import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
+
+export type BuildThumbnailProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+  height: number;
+  image: Attachment<StreamChatGenerics>;
+  width: number;
+  resizeMode?: ImageResizeMode;
+};
 
 export function buildThumbnail<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   height,
   image,
+  resizableCDNHosts,
   resizeMode,
   width,
-}: {
-  height: number;
-  image: Attachment<StreamChatGenerics>;
-  width: number;
-  resizeMode?: ImageResizeMode;
-}): Thumbnail {
+}: BuildThumbnailProps<StreamChatGenerics>): Thumbnail {
   const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
 
   // Only resize if the original image is larger than the thumbnail container size.
@@ -41,6 +47,7 @@ export function buildThumbnail<
     url: shouldResize
       ? getResizedImageUrl({
           height,
+          resizableCDNHosts,
           url: imageUrl,
           width,
         })