Next Release

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

@@ -61,5 +61,13 @@ 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

@@ -86,6 +86,14 @@ 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/core-components/overlay-provider.mdx

@@ -242,6 +242,14 @@ Image component within [`AttachmentPickerError`](https://github.com/GetStream/s
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ComponentType | `undefined` \| [`AttachmentPickerErrorImage`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx) |
 
+### `AttachmentPickerIOSSelectMorePhotos`
+
+Component to render select more photos option for selected gallery access in iOS.
+
+| Type          | Default                                                                                                                                                                                                            |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ComponentType | `undefined` \| [`AttachmentPickerIOSSelectMorePhotos`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos.tsx) |
+
 ### `CameraSelectorIcon`
 
 Camera selector component displayed in the attachment selector bar.

docusaurus/docs/reactnative/customization/global_config.mdx

@@ -7,8 +7,11 @@ 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.
 
-We will be gradually adding more features/options to the global config.
-In the future this will be the main way to alter the default behavior of the SDK and it's components.
+:::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.
+:::
 
 ## When to use global config
 

docusaurus/docs/reactnative/ui-components/channel-preview-status.mdx

@@ -37,7 +37,7 @@ const App = () => {
 
 ## Props
 
-### <div class="label description required">required</div> `channel`
+### `channel`
 
 <Channel />
 

docusaurus/docs/reactnative/ui-components/channel-preview-title.mdx

@@ -18,6 +18,6 @@ Formatted name for the previewed channel.
 | ------ |
 | String |
 
-### <div class="label description required">required</div> `channel`
+### `channel`
 
 <Channel />

docusaurus/docs/reactnative/ui-components/channel-preview-unread-count.mdx

@@ -12,14 +12,14 @@ This is the default component provided to the prop [`PreviewUnreadCount`](../cor
 
 ## Props
 
+### `channel`
+
+<Channel />
+
 ### <div class="label description required">required</div> `maxUnreadCount`
 
 <MaxUnreadCount />
 
 ### <div class="label description required">required</div> `unread`
 
 <Unread />
-
-### `channel`
-
-<Channel />

examples/ExpoMessaging/app.json

@@ -34,6 +34,7 @@
     "experiments": {
       "turboModules": true
     },
-    "scheme": "ExpoMessaging"
+    "scheme": "ExpoMessaging",
+    "plugins": ["expo-router"]
   }
 }

examples/ExpoMessaging/babel.config.js

@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: [require.resolve('expo-router/babel'), 'react-native-reanimated/plugin'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

examples/ExpoMessaging/metro.config.js

@@ -1,19 +1,69 @@
-/* eslint-env node */
+const { getDefaultConfig } = require('@expo/metro-config');
+const { exclusionList, resolveUniqueModule } = require('@rnx-kit/metro-config');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = getDefaultConfig(__dirname);
 
 const PATH = require('path');
-const blacklist = require('metro-config/src/defaults/exclusionList');
+const packageDirPath = PATH.resolve(__dirname, '../../package');
+const expoPackageDirPath = PATH.resolve(__dirname, '../../package/expo-package');
 
-const extractLinkedPackages = require('stream-chat-react-native-core/metro-dev-helpers/extract-linked-packages');
+const symlinked = {
+  'stream-chat-expo': expoPackageDirPath,
+  'stream-chat-react-native-core': packageDirPath,
+};
 
-const projectRoot = PATH.resolve(__dirname);
+// find what all modules need to be unique for the app (mainly react and react-native)
+// note: we filter the symlinked modules as they are already unique
+// and as they dont follow the workspace pattern the auto-generated path to the module is incorrect
+const dependencyPackageNames = Object.keys(require('./package.json').dependencies);
 
-const { alternateRoots, extraNodeModules, moduleBlacklist } = extractLinkedPackages(projectRoot);
+const uniqueModules = dependencyPackageNames.map((packageName) => {
+  if (symlinked[packageName]) {
+    const modulePath = symlinked[packageName];
+    const escapedPackageName = PATH.normalize(packageName).replace(/\\/g, '\\\\');
 
-module.exports = {
-  resolver: {
-    blacklistRE: blacklist(moduleBlacklist),
-    extraNodeModules,
-    useWatchman: false,
-  },
-  watchFolders: [projectRoot].concat(alternateRoots),
-};
+    // exclude the symlinked package from being resolved from node_modules
+    // example: .*\/node_modules\/stream-chat-react-native-core\/.*
+    // the above would avoid native-package to resolve core from its own node_modules
+    const exclusionRE = new RegExp(
+      `.*${PATH.sep}node_modules\\${PATH.sep}${escapedPackageName}\\${PATH.sep}.*`,
+    );
+
+    return {
+      packageName, // name of the package
+      modulePath,
+      blockPattern: exclusionRE, // paths that match this pattern will be blocked from being resolved
+    };
+  }
+  const [modulePath, blockPattern] = resolveUniqueModule(packageName, __dirname);
+  return {
+    packageName, // name of the package
+    modulePath, // actual path to the module in the project's node modules
+    blockPattern, // paths that match this pattern will be blocked from being resolved
+  };
+});
+
+// block the other paths for unique modules from being resolved
+const blockList = uniqueModules.map(({ blockPattern }) => blockPattern);
+
+// provide the path for the unique modules
+const extraNodeModules = uniqueModules.reduce((acc, item) => {
+  acc[item.packageName] = item.modulePath;
+  return acc;
+}, {});
+
+config.resolver.blockList = exclusionList(blockList);
+config.resolver.extraNodeModules = extraNodeModules;
+
+config.resolver.nodeModulesPaths = [PATH.resolve(__dirname, 'node_modules')];
+
+// add the package dir for metro to access the package folder
+config.watchFolders = [packageDirPath];
+
+module.exports = config;

examples/ExpoMessaging/package.json

@@ -10,46 +10,40 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-community/netinfo": "9.3.7",
-    "expo": "~48.0.21",
-    "expo-av": "~13.2.1",
-    "expo-clipboard": "^4.1.2",
-    "expo-constants": "~14.2.1",
-    "expo-document-picker": "~11.5.4",
-    "expo-file-system": "~15.2.2",
-    "expo-haptics": "~12.2.1",
-    "expo-image-manipulator": "~11.1.1",
-    "expo-image-picker": "~14.1.1",
-    "expo-linking": "~4.0.1",
-    "expo-media-library": "~15.2.3",
-    "expo-router": "^1.5.3",
-    "expo-sharing": "~11.2.2",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
+    "@react-native-community/netinfo": "11.1.0",
+    "expo": "~50.0.13",
+    "expo-av": "~13.10.5",
+    "expo-clipboard": "~5.0.1",
+    "expo-constants": "~15.4.5",
+    "expo-document-picker": "~11.10.1",
+    "expo-file-system": "~16.0.8",
+    "expo-haptics": "~12.8.1",
+    "expo-image-manipulator": "~11.8.0",
+    "expo-image-picker": "~14.7.1",
+    "expo-linking": "~6.2.2",
+    "expo-media-library": "~15.9.1",
+    "expo-router": "~3.4.8",
+    "expo-sharing": "~11.10.0",
+    "expo-splash-screen": "~0.26.4",
+    "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.14",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-quick-sqlite": "^8.0.2",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "react-native-svg": "13.4.0",
-    "react-native-web": "~0.18.10",
+    "react-native": "0.73.6",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-quick-sqlite": "^8.0.6",
+    "react-native-reanimated": "~3.6.2",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
+    "react-native-svg": "14.1.0",
+    "react-native-web": "~0.19.6",
     "stream-chat-expo": "link:../../package/expo-package",
     "stream-chat-react-native-core": "link:../../package",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.20.0",
+    "@rnx-kit/metro-config": "^1.3.15",
+    "@rnx-kit/metro-resolver-symlinks": "^0.1.35"
   },
-  "private": true,
-  "resolutions": {
-    "metro": "0.76.0",
-    "metro-resolver": "0.76.0"
-  },
-  "overrides": {
-    "metro": "0.76.0",
-    "metro-resolver": "0.76.0"
-  }
+  "private": true
 }

examples/ExpoMessaging/useStreamChatTheme.ts

@@ -14,49 +14,51 @@ export const useStreamChatTheme = () => {
     colors:
       colorScheme === 'dark'
         ? {
-          accent_blue: '#005FFF',
-          accent_green: '#20E070',
-          accent_red: '#FF3742',
-          bg_gradient_end: '#101214',
-          bg_gradient_start: '#070A0D',
-          black: '#FFFFFF',
-          blue_alice: '#00193D',
-          border: '#141924',
-          grey: '#7A7A7A',
-          grey_gainsboro: '#2D2F2F',
-          grey_whisper: '#1C1E22',
-          icon_background: '#FFFFFF',
-          modal_shadow: '#000000',
-          overlay: '#FFFFFFCC', // CC = 80% opacity
-          shadow_icon: '#00000080', // 80 = 50% opacity
-          targetedMessageBackground: '#302D22',
-          transparent: 'transparent',
-          white: '#101418',
-          white_smoke: '#13151B',
-          white_snow: '#070A0D',
-        }
+            accent_blue: '#005FFF',
+            accent_green: '#20E070',
+            accent_red: '#FF3742',
+            bg_gradient_end: '#101214',
+            bg_gradient_start: '#070A0D',
+            black: '#FFFFFF',
+            blue_alice: '#00193D',
+            border: '#141924',
+            grey: '#7A7A7A',
+            grey_dark: '#F7F7F8',
+            grey_gainsboro: '#2D2F2F',
+            grey_whisper: '#1C1E22',
+            icon_background: '#FFFFFF',
+            modal_shadow: '#000000',
+            overlay: '#FFFFFFCC', // CC = 80% opacity
+            shadow_icon: '#00000080', // 80 = 50% opacity
+            targetedMessageBackground: '#302D22',
+            transparent: 'transparent',
+            white: '#101418',
+            white_smoke: '#13151B',
+            white_snow: '#070A0D',
+          }
         : {
-          accent_blue: '#005FFF',
-          accent_green: '#20E070',
-          accent_red: '#FF3742',
-          bg_gradient_end: '#F7F7F7',
-          bg_gradient_start: '#FCFCFC',
-          black: '#000000',
-          blue_alice: '#E9F2FF',
-          border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
-          grey: '#7A7A7A',
-          grey_gainsboro: '#DBDBDB',
-          grey_whisper: '#ECEBEB',
-          icon_background: '#FFFFFF',
-          modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
-          overlay: '#00000099', // 99 = 60% opacity
-          shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
-          targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
-          transparent: 'transparent',
-          white: '#FFFFFF',
-          white_smoke: '#F2F2F2',
-          white_snow: '#FCFCFC',
-        },
+            accent_blue: '#005FFF',
+            accent_green: '#20E070',
+            accent_red: '#FF3742',
+            bg_gradient_end: '#F7F7F7',
+            bg_gradient_start: '#FCFCFC',
+            black: '#000000',
+            blue_alice: '#E9F2FF',
+            border: '#00000014', // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
+            grey: '#7A7A7A',
+            grey_dark: '#17191C',
+            grey_gainsboro: '#DBDBDB',
+            grey_whisper: '#ECEBEB',
+            icon_background: '#FFFFFF',
+            modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
+            overlay: '#00000099', // 99 = 60% opacity
+            shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
+            targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
+            transparent: 'transparent',
+            white: '#FFFFFF',
+            white_smoke: '#F2F2F2',
+            white_snow: '#FCFCFC',
+          },
     spinner: {
       height: 15,
       width: 15,