stream-chat-react-native-core 4.0.0-beta.6 → 4.0.0-beta.7

package/README.md

@@ -46,7 +46,7 @@ This repo includes 4 example apps. One made with Expo, one Native JavaScript cod
 
 - [Expo example](./examples/ExpoMessaging)
 - [Native example](./examples/NativeMessaging)
-- [Typescript example](./examples/TypescriptMessaging)
+- [Typescript example](./examples/TypeScriptMessaging)
 - [Fully featured messaging application](./examples/SampleApp)
 
 Besides, our team maintains a dedicated repository for fully-fledged sample applications and demos at [GetStream/react-native-samples](https://github.com/GetStream/react-native-samples). Please consider checking following sample applications:

package/lib/commonjs/components/Chat/Chat.js

@@ -33,6 +33,8 @@ var _TranslationContext = require("../../contexts/translationContext/Translation
 
 var _useStreami18n = require("../../hooks/useStreami18n");
 
+var _init = _interopRequireDefault(require("../../init"));
+
 var _native = require("../../native");
 
 var _version = require("../../version.json");
@@ -44,6 +46,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+(0, _init["default"])();
+
 var ChatWithContext = function ChatWithContext(props) {
   var children = props.children,
       client = props.client,
@@ -104,7 +108,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 173,
+      lineNumber: 176,
       columnNumber: 5
     }
   }, _react["default"].createElement(_TranslationContext.TranslationProvider, {
@@ -112,7 +116,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 174,
+      lineNumber: 177,
       columnNumber: 7
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -120,7 +124,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 175,
+      lineNumber: 178,
       columnNumber: 9
     }
   }, children)));
@@ -136,7 +140,7 @@ var Chat = function Chat(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 209,
+      lineNumber: 212,
       columnNumber: 10
     }
   }));

package/lib/commonjs/components/Chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chat.tsx"],"names":["ChatWithContext","props","children","client","closeConnectionOnBackground","i18nInstance","style","channel","setChannel","t","key","tDateTimeParser","input","translators","setTranslators","loadingTranslators","connectionRecovering","isOnline","mutedUsers","setUserAgent","SDK","Platform","OS","version","recoverStateOnReconnect","setActiveChannel","newChannel","chatContext","Chat"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AAIA;;AAEA;;AAGA;;;;;;;;;AA+FA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAGtBC,KAHsB,EAInB;AACH,MAAQC,QAAR,GAAsFD,KAAtF,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAsFF,KAAtF,CAAkBE,MAAlB;AAAA,8BAAsFF,KAAtF,CAA0BG,2BAA1B;AAAA,MAA0BA,2BAA1B,sCAAwD,IAAxD;AAAA,MAA8DC,YAA9D,GAAsFJ,KAAtF,CAA8DI,YAA9D;AAAA,MAA4EC,KAA5E,GAAsFL,KAAtF,CAA4EK,KAA5E;;AAEA,kBAA8B,sBAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAsC,qBAAkC;AACtEC,IAAAA,CAAC,EAAE,WAACC,GAAD;AAAA,aAAiBA,GAAjB;AAAA,KADmE;AAEtEC,IAAAA,eAAe,EAAE,yBAACC,KAAD;AAAA,aAAoC,uBAAMA,KAAN,CAApC;AAAA;AAFqD,GAAlC,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAQA,MAAMC,kBAAkB,GAAG,kCAAc;AAAEV,IAAAA,YAAY,EAAZA,YAAF;AAAgBS,IAAAA,cAAc,EAAdA;AAAhB,GAAd,CAA3B;;AAKA,qBAA2C,+BACzCX,MADyC,EAEzCC,2BAFyC,CAA3C;AAAA,MAAQY,oBAAR,gBAAQA,oBAAR;AAAA,MAA8BC,QAA9B,gBAA8BA,QAA9B;;AAQA,MAAMC,UAAU,GAAG,kCAAkCf,MAAlC,CAAnB;AAEA,wBAAU,YAAM;AACd,QAAIA,MAAM,CAACgB,YAAX,EAAyB;AACvBhB,MAAAA,MAAM,CAACgB,YAAP,CAAuBC,WAAvB,SAA8BC,sBAASC,EAAvC,SAA6CC,gBAA7C;AAEApB,MAAAA,MAAM,CAACqB,uBAAP,GAAiC,KAAjC;AACD;AACF,GAND,EAMG,EANH;;AAQA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD;AAAA,WAA8ClB,UAAU,CAACkB,UAAD,CAAxD;AAAA,GAAzB;;AAEA,MAAMC,WAAW,GAAG,gDAAqB;AACvCpB,IAAAA,OAAO,EAAPA,OADuC;AAEvCJ,IAAAA,MAAM,EAANA,MAFuC;AAGvCa,IAAAA,oBAAoB,EAApBA,oBAHuC;AAIvCC,IAAAA,QAAQ,EAARA,QAJuC;AAKvCC,IAAAA,UAAU,EAAVA,UALuC;AAMvCO,IAAAA,gBAAgB,EAAhBA;AANuC,GAArB,CAApB;AASA,MAAIV,kBAAJ,EAAwB,OAAO,IAAP;AAExB,SACE,gCAAC,yBAAD;AAAkC,IAAA,KAAK,EAAEY,WAAzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,uCAAD;AAAqB,IAAA,KAAK,EAAEd,WAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,2BAAD;AAAe,IAAA,KAAK,EAAEP,KAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA8BJ,QAA9B,CADF,CADF,CADF;AAOD,CA3DD;;AAkFO,IAAM0B,IAAI,GAAG,SAAPA,IAAO,CAGlB3B,KAHkB,EAIf;AACH,2BAAkB,wCAAlB;AAAA,MAAQK,KAAR,sBAAQA,KAAR;;AAEA,SAAO,gCAAC,eAAD;AAAuBA,IAAAA,KAAK,EAALA;AAAvB,KAAoCL,KAApC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAP;AACD,CARM","sourcesContent":["import React, { PropsWithChildren, useEffect, useState } from 'react';\nimport { Platform } from 'react-native';\n\nimport Dayjs from 'dayjs';\n\nimport type { Channel } from 'stream-chat';\n\nimport { useCreateChatContext } from './hooks/useCreateChatContext';\nimport { useIsOnline } from './hooks/useIsOnline';\nimport { useMutedUsers } from './hooks/useMutedUsers';\n\nimport { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';\nimport { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';\nimport { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';\nimport type { Theme } from '../../contexts/themeContext/utils/theme';\nimport {\n  TranslationContextValue,\n  TranslationProvider,\n} from '../../contexts/translationContext/TranslationContext';\nimport { useStreami18n } from '../../hooks/useStreami18n';\n\nimport { SDK } from '../../native';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { Streami18n } from '../../utils/Streami18n';\nimport { version } from '../../version.json';\n\nexport type ChatProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {\n  /**\n   * When false, ws connection won't be disconnection upon backgrounding the app.\n   * To receive push notifications, its necessary that user doesn't have active\n   * websocket connection. So by default, we disconnect websocket connection when\n   * app goes to background, and reconnect when app comes to foreground.\n   */\n  closeConnectionOnBackground?: boolean;\n  /**\n   * Instance of Streami18n class should be provided to Chat component to enable internationalization.\n   *\n   * Stream provides following list of in-built translations:\n   * 1. English (en)\n   * 2. Dutch (nl)\n   * 3. ...\n   * 4. ...\n   *\n   * Simplest way to start using chat components in one of the in-built languages would be following:\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * If you would like to override certain keys in in-built translation.\n   * UI will be automatically updated in this case.\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   *\n   * i18n.registerTranslation('nl', {\n   *  'Nothing yet...': 'Nog Niet ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n   * });\n   *\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * You can use the same function to add whole new language.\n   *\n   * ```\n   * const i18n = new Streami18n('it');\n   *\n   * i18n.registerTranslation('it', {\n   *  'Nothing yet...': 'Non ancora ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',\n   * });\n   *\n   * // Make sure to call setLanguage to reflect new language in UI.\n   * i18n.setLanguage('it');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   */\n  i18nInstance?: Streami18n;\n  /**\n   * 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)\n   *\n   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.\n   *\n   * ```\n   * import type { DeepPartial, Theme } from 'stream-chat-react-native';\n   *\n   * const theme: DeepPartial<Theme> = {\n   *   messageSimple: {\n   *     file: {\n   *       container: {\n   *         backgroundColor: 'red',\n   *       },\n   *       icon: {\n   *         height: 16,\n   *         width: 16,\n   *       },\n   *     },\n   *   },\n   * };\n   *\n   * <Chat style={theme}>\n   * </Chat>\n   * ```\n   *\n   * @overrideType object\n   */\n  style?: DeepPartial<Theme>;\n};\n\nconst ChatWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;\n\n  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();\n  const [translators, setTranslators] = useState<TranslationContextValue>({\n    t: (key: string) => key,\n    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),\n  });\n\n  /**\n   * Setup translators\n   */\n  const loadingTranslators = useStreami18n({ i18nInstance, setTranslators });\n\n  /**\n   * Setup connection event listeners\n   */\n  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(\n    client,\n    closeConnectionOnBackground,\n  );\n\n  /**\n   * Setup muted user listener\n   */\n  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);\n\n  useEffect(() => {\n    if (client.setUserAgent) {\n      client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);\n      // This is to disable recovery related logic in js client, since we handle it in this SDK\n      client.recoverStateOnReconnect = false;\n    }\n  }, []);\n\n  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);\n\n  const chatContext = useCreateChatContext({\n    channel,\n    client,\n    connectionRecovering,\n    isOnline,\n    mutedUsers,\n    setActiveChannel,\n  });\n\n  if (loadingTranslators) return null;\n\n  return (\n    <ChatProvider<StreamChatGenerics> value={chatContext}>\n      <TranslationProvider value={translators}>\n        <ThemeProvider style={style}>{children}</ThemeProvider>\n      </TranslationProvider>\n    </ChatProvider>\n  );\n};\n\n/**\n * Chat - Wrapper component for Chat. The needs to be placed around any other chat components.\n * This Chat component provides the ChatContext to all other components.\n *\n * The ChatContext provides the following props:\n *\n * - channel - currently active channel\n * - client - client connection\n * - connectionRecovering - whether or not websocket is reconnecting\n * - isOnline - whether or not set user is active\n * - setActiveChannel - function to set the currently active channel\n *\n * The Chat Component takes the following generics in order:\n * - At (AttachmentType) - custom Attachment object extension\n * - Ct (ChannelType) - custom Channel object extension\n * - Co (CommandType) - custom Command string union extension\n * - Ev (EventType) - custom Event object extension\n * - Me (MessageType) - custom Message object extension\n * - Re (ReactionType) - custom Reaction object extension\n * - Us (UserType) - custom User object extension\n */\nexport const Chat = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { style } = useOverlayContext();\n\n  return <ChatWithContext {...{ style }} {...props} />;\n};\n"]}
+{"version":3,"sources":["Chat.tsx"],"names":["ChatWithContext","props","children","client","closeConnectionOnBackground","i18nInstance","style","channel","setChannel","t","key","tDateTimeParser","input","translators","setTranslators","loadingTranslators","connectionRecovering","isOnline","mutedUsers","setUserAgent","SDK","Platform","OS","version","recoverStateOnReconnect","setActiveChannel","newChannel","chatContext","Chat"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AAIA;;AACA;;AAEA;;AAGA;;;;;;;;;AAEA;;AA+FA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAGtBC,KAHsB,EAInB;AACH,MAAQC,QAAR,GAAsFD,KAAtF,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAsFF,KAAtF,CAAkBE,MAAlB;AAAA,8BAAsFF,KAAtF,CAA0BG,2BAA1B;AAAA,MAA0BA,2BAA1B,sCAAwD,IAAxD;AAAA,MAA8DC,YAA9D,GAAsFJ,KAAtF,CAA8DI,YAA9D;AAAA,MAA4EC,KAA5E,GAAsFL,KAAtF,CAA4EK,KAA5E;;AAEA,kBAA8B,sBAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAsC,qBAAkC;AACtEC,IAAAA,CAAC,EAAE,WAACC,GAAD;AAAA,aAAiBA,GAAjB;AAAA,KADmE;AAEtEC,IAAAA,eAAe,EAAE,yBAACC,KAAD;AAAA,aAAoC,uBAAMA,KAAN,CAApC;AAAA;AAFqD,GAAlC,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAQA,MAAMC,kBAAkB,GAAG,kCAAc;AAAEV,IAAAA,YAAY,EAAZA,YAAF;AAAgBS,IAAAA,cAAc,EAAdA;AAAhB,GAAd,CAA3B;;AAKA,qBAA2C,+BACzCX,MADyC,EAEzCC,2BAFyC,CAA3C;AAAA,MAAQY,oBAAR,gBAAQA,oBAAR;AAAA,MAA8BC,QAA9B,gBAA8BA,QAA9B;;AAQA,MAAMC,UAAU,GAAG,kCAAkCf,MAAlC,CAAnB;AAEA,wBAAU,YAAM;AACd,QAAIA,MAAM,CAACgB,YAAX,EAAyB;AACvBhB,MAAAA,MAAM,CAACgB,YAAP,CAAuBC,WAAvB,SAA8BC,sBAASC,EAAvC,SAA6CC,gBAA7C;AAEApB,MAAAA,MAAM,CAACqB,uBAAP,GAAiC,KAAjC;AACD;AACF,GAND,EAMG,EANH;;AAQA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD;AAAA,WAA8ClB,UAAU,CAACkB,UAAD,CAAxD;AAAA,GAAzB;;AAEA,MAAMC,WAAW,GAAG,gDAAqB;AACvCpB,IAAAA,OAAO,EAAPA,OADuC;AAEvCJ,IAAAA,MAAM,EAANA,MAFuC;AAGvCa,IAAAA,oBAAoB,EAApBA,oBAHuC;AAIvCC,IAAAA,QAAQ,EAARA,QAJuC;AAKvCC,IAAAA,UAAU,EAAVA,UALuC;AAMvCO,IAAAA,gBAAgB,EAAhBA;AANuC,GAArB,CAApB;AASA,MAAIV,kBAAJ,EAAwB,OAAO,IAAP;AAExB,SACE,gCAAC,yBAAD;AAAkC,IAAA,KAAK,EAAEY,WAAzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,uCAAD;AAAqB,IAAA,KAAK,EAAEd,WAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,2BAAD;AAAe,IAAA,KAAK,EAAEP,KAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA8BJ,QAA9B,CADF,CADF,CADF;AAOD,CA3DD;;AAkFO,IAAM0B,IAAI,GAAG,SAAPA,IAAO,CAGlB3B,KAHkB,EAIf;AACH,2BAAkB,wCAAlB;AAAA,MAAQK,KAAR,sBAAQA,KAAR;;AAEA,SAAO,gCAAC,eAAD;AAAuBA,IAAAA,KAAK,EAALA;AAAvB,KAAoCL,KAApC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAP;AACD,CARM","sourcesContent":["import React, { PropsWithChildren, useEffect, useState } from 'react';\nimport { Platform } from 'react-native';\n\nimport Dayjs from 'dayjs';\n\nimport type { Channel } from 'stream-chat';\n\nimport { useCreateChatContext } from './hooks/useCreateChatContext';\nimport { useIsOnline } from './hooks/useIsOnline';\nimport { useMutedUsers } from './hooks/useMutedUsers';\n\nimport { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';\nimport { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';\nimport { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';\nimport type { Theme } from '../../contexts/themeContext/utils/theme';\nimport {\n  TranslationContextValue,\n  TranslationProvider,\n} from '../../contexts/translationContext/TranslationContext';\nimport { useStreami18n } from '../../hooks/useStreami18n';\nimport init from '../../init';\n\nimport { SDK } from '../../native';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { Streami18n } from '../../utils/Streami18n';\nimport { version } from '../../version.json';\n\ninit();\n\nexport type ChatProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {\n  /**\n   * When false, ws connection won't be disconnection upon backgrounding the app.\n   * To receive push notifications, its necessary that user doesn't have active\n   * websocket connection. So by default, we disconnect websocket connection when\n   * app goes to background, and reconnect when app comes to foreground.\n   */\n  closeConnectionOnBackground?: boolean;\n  /**\n   * Instance of Streami18n class should be provided to Chat component to enable internationalization.\n   *\n   * Stream provides following list of in-built translations:\n   * 1. English (en)\n   * 2. Dutch (nl)\n   * 3. ...\n   * 4. ...\n   *\n   * Simplest way to start using chat components in one of the in-built languages would be following:\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * If you would like to override certain keys in in-built translation.\n   * UI will be automatically updated in this case.\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   *\n   * i18n.registerTranslation('nl', {\n   *  'Nothing yet...': 'Nog Niet ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n   * });\n   *\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * You can use the same function to add whole new language.\n   *\n   * ```\n   * const i18n = new Streami18n('it');\n   *\n   * i18n.registerTranslation('it', {\n   *  'Nothing yet...': 'Non ancora ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',\n   * });\n   *\n   * // Make sure to call setLanguage to reflect new language in UI.\n   * i18n.setLanguage('it');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   */\n  i18nInstance?: Streami18n;\n  /**\n   * 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)\n   *\n   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.\n   *\n   * ```\n   * import type { DeepPartial, Theme } from 'stream-chat-react-native';\n   *\n   * const theme: DeepPartial<Theme> = {\n   *   messageSimple: {\n   *     file: {\n   *       container: {\n   *         backgroundColor: 'red',\n   *       },\n   *       icon: {\n   *         height: 16,\n   *         width: 16,\n   *       },\n   *     },\n   *   },\n   * };\n   *\n   * <Chat style={theme}>\n   * </Chat>\n   * ```\n   *\n   * @overrideType object\n   */\n  style?: DeepPartial<Theme>;\n};\n\nconst ChatWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;\n\n  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();\n  const [translators, setTranslators] = useState<TranslationContextValue>({\n    t: (key: string) => key,\n    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),\n  });\n\n  /**\n   * Setup translators\n   */\n  const loadingTranslators = useStreami18n({ i18nInstance, setTranslators });\n\n  /**\n   * Setup connection event listeners\n   */\n  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(\n    client,\n    closeConnectionOnBackground,\n  );\n\n  /**\n   * Setup muted user listener\n   */\n  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);\n\n  useEffect(() => {\n    if (client.setUserAgent) {\n      client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);\n      // This is to disable recovery related logic in js client, since we handle it in this SDK\n      client.recoverStateOnReconnect = false;\n    }\n  }, []);\n\n  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);\n\n  const chatContext = useCreateChatContext({\n    channel,\n    client,\n    connectionRecovering,\n    isOnline,\n    mutedUsers,\n    setActiveChannel,\n  });\n\n  if (loadingTranslators) return null;\n\n  return (\n    <ChatProvider<StreamChatGenerics> value={chatContext}>\n      <TranslationProvider value={translators}>\n        <ThemeProvider style={style}>{children}</ThemeProvider>\n      </TranslationProvider>\n    </ChatProvider>\n  );\n};\n\n/**\n * Chat - Wrapper component for Chat. The needs to be placed around any other chat components.\n * This Chat component provides the ChatContext to all other components.\n *\n * The ChatContext provides the following props:\n *\n * - channel - currently active channel\n * - client - client connection\n * - connectionRecovering - whether or not websocket is reconnecting\n * - isOnline - whether or not set user is active\n * - setActiveChannel - function to set the currently active channel\n *\n * The Chat Component takes the following generics in order:\n * - At (AttachmentType) - custom Attachment object extension\n * - Ct (ChannelType) - custom Channel object extension\n * - Co (CommandType) - custom Command string union extension\n * - Ev (EventType) - custom Event object extension\n * - Me (MessageType) - custom Message object extension\n * - Re (ReactionType) - custom Reaction object extension\n * - Us (UserType) - custom User object extension\n */\nexport const Chat = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { style } = useOverlayContext();\n\n  return <ChatWithContext {...{ style }} {...props} />;\n};\n"]}

package/lib/commonjs/init.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactNativeUrlPolyfill = require("react-native-url-polyfill");
+
+var _default = function _default() {
+  (0, _reactNativeUrlPolyfill.setupURLPolyfill)();
+};
+
+exports["default"] = _default;
+//# sourceMappingURL=init.js.map

package/lib/commonjs/init.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["init.ts"],"names":[],"mappings":";;;;;AAAA;;eAEe,oBAAM;AACnB;AACD,C","sourcesContent":["import { setupURLPolyfill } from 'react-native-url-polyfill';\n\nexport default () => {\n  setupURLPolyfill();\n};\n"]}

package/lib/commonjs/utils/getResizedImageUrl.js

@@ -7,20 +7,23 @@ var _reactNative = require("react-native");
 
 function getResizedImageUrl(_ref) {
   var height = _ref.height,
+      _ref$resize = _ref.resize,
+      resize = _ref$resize === void 0 ? 'clip' : _ref$resize,
       url = _ref.url,
       width = _ref.width;
-  var isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');
+  var isResizableUrl = url.includes('.stream-io-cdn.com');
   if (!isResizableUrl || !height && !width) return url;
-  var resizedUrl = url;
+  var parsedUrl = new URL(url);
 
   if (height) {
-    resizedUrl = resizedUrl.replace('h=*', "h=" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(height)));
+    parsedUrl.searchParams.set('h', "" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(height)));
   }
 
   if (width) {
-    resizedUrl = resizedUrl.replace('w=*', "w=" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(width)));
+    parsedUrl.searchParams.set('w', "" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(width)));
   }
 
-  return resizedUrl.replace('resize=*', "resize=clip");
+  parsedUrl.searchParams.set('resize', "" + resize);
+  return parsedUrl.toString();
 }
 //# sourceMappingURL=getResizedImageUrl.js.map

package/lib/commonjs/utils/getResizedImageUrl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getResizedImageUrl.ts"],"names":["getResizedImageUrl","height","url","width","isResizableUrl","includes","resizedUrl","replace","PixelRatio","getPixelSizeForLayoutSize","Number"],"mappings":";;;;;AAAA;;AAoBO,SAASA,kBAAT,OAA8E;AAAA,MAAhDC,MAAgD,QAAhDA,MAAgD;AAAA,MAAxCC,GAAwC,QAAxCA,GAAwC;AAAA,MAAnCC,KAAmC,QAAnCA,KAAmC;AACnF,MAAMC,cAAc,GAAGF,GAAG,CAACG,QAAJ,CAAa,MAAb,KAAwBH,GAAG,CAACG,QAAJ,CAAa,MAAb,CAAxB,IAAgDH,GAAG,CAACG,QAAJ,CAAa,WAAb,CAAvE;AAEA,MAAI,CAACD,cAAD,IAAoB,CAACH,MAAD,IAAW,CAACE,KAApC,EAA4C,OAAOD,GAAP;AAE5C,MAAII,UAAU,GAAGJ,GAAjB;;AAEA,MAAID,MAAJ,EAAY;AACVK,IAAAA,UAAU,GAAGA,UAAU,CAACC,OAAX,CACX,KADW,SAENC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACT,MAAD,CAA3C,CAFM,CAAb;AAID;;AAED,MAAIE,KAAJ,EAAW;AACTG,IAAAA,UAAU,GAAGA,UAAU,CAACC,OAAX,CACX,KADW,SAENC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACP,KAAD,CAA3C,CAFM,CAAb;AAID;;AAED,SAAOG,UAAU,CAACC,OAAX,CAAmB,UAAnB,gBAAP;AACD","sourcesContent":["import { PixelRatio } from 'react-native';\n\ntype GetResizedImageUrlParams = {\n  url: string;\n  height?: string | number;\n  width?: string | number;\n};\n\n/**\n * Any file or image upload done through stream's chat SDK or components get uploaded\n * to CloudFront CDN. Following function returns a url of resized image (to given width and height).\n * It can be used to avoid rendering heavy images on UI, for the sake of performance.\n *\n * This function accepts an object with following properties:\n * - height: height of the resized image.\n * - url: url of the image.\n * - width: width of the resized image.\n *\n * @returns {string} Url of the image with given height and width.\n */\nexport function getResizedImageUrl({ height, url, width }: GetResizedImageUrlParams) {\n  const isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');\n\n  if (!isResizableUrl || (!height && !width)) return url;\n\n  let resizedUrl = url;\n\n  if (height) {\n    resizedUrl = resizedUrl.replace(\n      'h=*',\n      `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`,\n    );\n  }\n\n  if (width) {\n    resizedUrl = resizedUrl.replace(\n      'w=*',\n      `w=${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`,\n    );\n  }\n\n  return resizedUrl.replace('resize=*', `resize=clip`);\n}\n"]}
+{"version":3,"sources":["getResizedImageUrl.ts"],"names":["getResizedImageUrl","height","resize","url","width","isResizableUrl","includes","parsedUrl","URL","searchParams","set","PixelRatio","getPixelSizeForLayoutSize","Number","toString"],"mappings":";;;;;AAAA;;AAqBO,SAASA,kBAAT,OAKsB;AAAA,MAJ3BC,MAI2B,QAJ3BA,MAI2B;AAAA,yBAH3BC,MAG2B;AAAA,MAH3BA,MAG2B,4BAHlB,MAGkB;AAAA,MAF3BC,GAE2B,QAF3BA,GAE2B;AAAA,MAD3BC,KAC2B,QAD3BA,KAC2B;AAE3B,MAAMC,cAAc,GAAGF,GAAG,CAACG,QAAJ,CAAa,oBAAb,CAAvB;AACA,MAAI,CAACD,cAAD,IAAoB,CAACJ,MAAD,IAAW,CAACG,KAApC,EAA4C,OAAOD,GAAP;AAE5C,MAAMI,SAAS,GAAG,IAAIC,GAAJ,CAAQL,GAAR,CAAlB;;AAEA,MAAIF,MAAJ,EAAY;AACVM,IAAAA,SAAS,CAACE,YAAV,CAAuBC,GAAvB,CAA2B,GAA3B,OAAmCC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACZ,MAAD,CAA3C,CAAnC;AACD;;AAED,MAAIG,KAAJ,EAAW;AACTG,IAAAA,SAAS,CAACE,YAAV,CAAuBC,GAAvB,CAA2B,GAA3B,OAAmCC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACT,KAAD,CAA3C,CAAnC;AACD;;AAEDG,EAAAA,SAAS,CAACE,YAAV,CAAuBC,GAAvB,CAA2B,QAA3B,OAAwCR,MAAxC;AAEA,SAAOK,SAAS,CAACO,QAAV,EAAP;AACD","sourcesContent":["import { PixelRatio } from 'react-native';\n\ntype GetResizedImageUrlParams = {\n  url: string;\n  height?: string | number;\n  resize?: 'clip' | 'crop' | 'fill' | 'scale';\n  width?: string | number;\n};\n\n/**\n * Any file or image upload done through stream's chat SDK or components get uploaded\n * to CloudFront CDN. Following function returns a url of resized image (to given width and height).\n * It can be used to avoid rendering heavy images on UI, for the sake of performance.\n *\n * This function accepts an object with following properties:\n * - height: height of the resized image.\n * - url: url of the image.\n * - width: width of the resized image.\n *\n * @returns {string} Url of the image with given height and width.\n */\nexport function getResizedImageUrl({\n  height,\n  resize = 'clip',\n  url,\n  width,\n}: GetResizedImageUrlParams) {\n  // Check if url belongs to cloudfront CDN\n  const isResizableUrl = url.includes('.stream-io-cdn.com');\n  if (!isResizableUrl || (!height && !width)) return url;\n\n  const parsedUrl = new URL(url);\n\n  if (height) {\n    parsedUrl.searchParams.set('h', `${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`);\n  }\n\n  if (width) {\n    parsedUrl.searchParams.set('w', `${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`);\n  }\n\n  parsedUrl.searchParams.set('resize', `${resize}`);\n\n  return parsedUrl.toString();\n}\n"]}

package/lib/commonjs/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.0.0-beta.6"
+  "version": "4.0.0-beta.7"
 }

package/lib/module/components/Chat/Chat.js

@@ -33,6 +33,8 @@ var _TranslationContext = require("../../contexts/translationContext/Translation
 
 var _useStreami18n = require("../../hooks/useStreami18n");
 
+var _init = _interopRequireDefault(require("../../init"));
+
 var _native = require("../../native");
 
 var _version = require("../../version.json");
@@ -44,6 +46,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+(0, _init["default"])();
+
 var ChatWithContext = function ChatWithContext(props) {
   var children = props.children,
       client = props.client,
@@ -104,7 +108,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 173,
+      lineNumber: 176,
       columnNumber: 5
     }
   }, _react["default"].createElement(_TranslationContext.TranslationProvider, {
@@ -112,7 +116,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 174,
+      lineNumber: 177,
       columnNumber: 7
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -120,7 +124,7 @@ var ChatWithContext = function ChatWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 175,
+      lineNumber: 178,
       columnNumber: 9
     }
   }, children)));
@@ -136,7 +140,7 @@ var Chat = function Chat(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 209,
+      lineNumber: 212,
       columnNumber: 10
     }
   }));

package/lib/module/components/Chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chat.tsx"],"names":["ChatWithContext","props","children","client","closeConnectionOnBackground","i18nInstance","style","channel","setChannel","t","key","tDateTimeParser","input","translators","setTranslators","loadingTranslators","connectionRecovering","isOnline","mutedUsers","setUserAgent","SDK","Platform","OS","version","recoverStateOnReconnect","setActiveChannel","newChannel","chatContext","Chat"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AAIA;;AAEA;;AAGA;;;;;;;;;AA+FA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAGtBC,KAHsB,EAInB;AACH,MAAQC,QAAR,GAAsFD,KAAtF,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAsFF,KAAtF,CAAkBE,MAAlB;AAAA,8BAAsFF,KAAtF,CAA0BG,2BAA1B;AAAA,MAA0BA,2BAA1B,sCAAwD,IAAxD;AAAA,MAA8DC,YAA9D,GAAsFJ,KAAtF,CAA8DI,YAA9D;AAAA,MAA4EC,KAA5E,GAAsFL,KAAtF,CAA4EK,KAA5E;;AAEA,kBAA8B,sBAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAsC,qBAAkC;AACtEC,IAAAA,CAAC,EAAE,WAACC,GAAD;AAAA,aAAiBA,GAAjB;AAAA,KADmE;AAEtEC,IAAAA,eAAe,EAAE,yBAACC,KAAD;AAAA,aAAoC,uBAAMA,KAAN,CAApC;AAAA;AAFqD,GAAlC,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAQA,MAAMC,kBAAkB,GAAG,kCAAc;AAAEV,IAAAA,YAAY,EAAZA,YAAF;AAAgBS,IAAAA,cAAc,EAAdA;AAAhB,GAAd,CAA3B;;AAKA,qBAA2C,+BACzCX,MADyC,EAEzCC,2BAFyC,CAA3C;AAAA,MAAQY,oBAAR,gBAAQA,oBAAR;AAAA,MAA8BC,QAA9B,gBAA8BA,QAA9B;;AAQA,MAAMC,UAAU,GAAG,kCAAkCf,MAAlC,CAAnB;AAEA,wBAAU,YAAM;AACd,QAAIA,MAAM,CAACgB,YAAX,EAAyB;AACvBhB,MAAAA,MAAM,CAACgB,YAAP,CAAuBC,WAAvB,SAA8BC,sBAASC,EAAvC,SAA6CC,gBAA7C;AAEApB,MAAAA,MAAM,CAACqB,uBAAP,GAAiC,KAAjC;AACD;AACF,GAND,EAMG,EANH;;AAQA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD;AAAA,WAA8ClB,UAAU,CAACkB,UAAD,CAAxD;AAAA,GAAzB;;AAEA,MAAMC,WAAW,GAAG,gDAAqB;AACvCpB,IAAAA,OAAO,EAAPA,OADuC;AAEvCJ,IAAAA,MAAM,EAANA,MAFuC;AAGvCa,IAAAA,oBAAoB,EAApBA,oBAHuC;AAIvCC,IAAAA,QAAQ,EAARA,QAJuC;AAKvCC,IAAAA,UAAU,EAAVA,UALuC;AAMvCO,IAAAA,gBAAgB,EAAhBA;AANuC,GAArB,CAApB;AASA,MAAIV,kBAAJ,EAAwB,OAAO,IAAP;AAExB,SACE,gCAAC,yBAAD;AAAkC,IAAA,KAAK,EAAEY,WAAzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,uCAAD;AAAqB,IAAA,KAAK,EAAEd,WAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,2BAAD;AAAe,IAAA,KAAK,EAAEP,KAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA8BJ,QAA9B,CADF,CADF,CADF;AAOD,CA3DD;;AAkFO,IAAM0B,IAAI,GAAG,SAAPA,IAAO,CAGlB3B,KAHkB,EAIf;AACH,2BAAkB,wCAAlB;AAAA,MAAQK,KAAR,sBAAQA,KAAR;;AAEA,SAAO,gCAAC,eAAD;AAAuBA,IAAAA,KAAK,EAALA;AAAvB,KAAoCL,KAApC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAP;AACD,CARM","sourcesContent":["import React, { PropsWithChildren, useEffect, useState } from 'react';\nimport { Platform } from 'react-native';\n\nimport Dayjs from 'dayjs';\n\nimport type { Channel } from 'stream-chat';\n\nimport { useCreateChatContext } from './hooks/useCreateChatContext';\nimport { useIsOnline } from './hooks/useIsOnline';\nimport { useMutedUsers } from './hooks/useMutedUsers';\n\nimport { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';\nimport { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';\nimport { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';\nimport type { Theme } from '../../contexts/themeContext/utils/theme';\nimport {\n  TranslationContextValue,\n  TranslationProvider,\n} from '../../contexts/translationContext/TranslationContext';\nimport { useStreami18n } from '../../hooks/useStreami18n';\n\nimport { SDK } from '../../native';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { Streami18n } from '../../utils/Streami18n';\nimport { version } from '../../version.json';\n\nexport type ChatProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {\n  /**\n   * When false, ws connection won't be disconnection upon backgrounding the app.\n   * To receive push notifications, its necessary that user doesn't have active\n   * websocket connection. So by default, we disconnect websocket connection when\n   * app goes to background, and reconnect when app comes to foreground.\n   */\n  closeConnectionOnBackground?: boolean;\n  /**\n   * Instance of Streami18n class should be provided to Chat component to enable internationalization.\n   *\n   * Stream provides following list of in-built translations:\n   * 1. English (en)\n   * 2. Dutch (nl)\n   * 3. ...\n   * 4. ...\n   *\n   * Simplest way to start using chat components in one of the in-built languages would be following:\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * If you would like to override certain keys in in-built translation.\n   * UI will be automatically updated in this case.\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   *\n   * i18n.registerTranslation('nl', {\n   *  'Nothing yet...': 'Nog Niet ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n   * });\n   *\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * You can use the same function to add whole new language.\n   *\n   * ```\n   * const i18n = new Streami18n('it');\n   *\n   * i18n.registerTranslation('it', {\n   *  'Nothing yet...': 'Non ancora ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',\n   * });\n   *\n   * // Make sure to call setLanguage to reflect new language in UI.\n   * i18n.setLanguage('it');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   */\n  i18nInstance?: Streami18n;\n  /**\n   * 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)\n   *\n   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.\n   *\n   * ```\n   * import type { DeepPartial, Theme } from 'stream-chat-react-native';\n   *\n   * const theme: DeepPartial<Theme> = {\n   *   messageSimple: {\n   *     file: {\n   *       container: {\n   *         backgroundColor: 'red',\n   *       },\n   *       icon: {\n   *         height: 16,\n   *         width: 16,\n   *       },\n   *     },\n   *   },\n   * };\n   *\n   * <Chat style={theme}>\n   * </Chat>\n   * ```\n   *\n   * @overrideType object\n   */\n  style?: DeepPartial<Theme>;\n};\n\nconst ChatWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;\n\n  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();\n  const [translators, setTranslators] = useState<TranslationContextValue>({\n    t: (key: string) => key,\n    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),\n  });\n\n  /**\n   * Setup translators\n   */\n  const loadingTranslators = useStreami18n({ i18nInstance, setTranslators });\n\n  /**\n   * Setup connection event listeners\n   */\n  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(\n    client,\n    closeConnectionOnBackground,\n  );\n\n  /**\n   * Setup muted user listener\n   */\n  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);\n\n  useEffect(() => {\n    if (client.setUserAgent) {\n      client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);\n      // This is to disable recovery related logic in js client, since we handle it in this SDK\n      client.recoverStateOnReconnect = false;\n    }\n  }, []);\n\n  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);\n\n  const chatContext = useCreateChatContext({\n    channel,\n    client,\n    connectionRecovering,\n    isOnline,\n    mutedUsers,\n    setActiveChannel,\n  });\n\n  if (loadingTranslators) return null;\n\n  return (\n    <ChatProvider<StreamChatGenerics> value={chatContext}>\n      <TranslationProvider value={translators}>\n        <ThemeProvider style={style}>{children}</ThemeProvider>\n      </TranslationProvider>\n    </ChatProvider>\n  );\n};\n\n/**\n * Chat - Wrapper component for Chat. The needs to be placed around any other chat components.\n * This Chat component provides the ChatContext to all other components.\n *\n * The ChatContext provides the following props:\n *\n * - channel - currently active channel\n * - client - client connection\n * - connectionRecovering - whether or not websocket is reconnecting\n * - isOnline - whether or not set user is active\n * - setActiveChannel - function to set the currently active channel\n *\n * The Chat Component takes the following generics in order:\n * - At (AttachmentType) - custom Attachment object extension\n * - Ct (ChannelType) - custom Channel object extension\n * - Co (CommandType) - custom Command string union extension\n * - Ev (EventType) - custom Event object extension\n * - Me (MessageType) - custom Message object extension\n * - Re (ReactionType) - custom Reaction object extension\n * - Us (UserType) - custom User object extension\n */\nexport const Chat = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { style } = useOverlayContext();\n\n  return <ChatWithContext {...{ style }} {...props} />;\n};\n"]}
+{"version":3,"sources":["Chat.tsx"],"names":["ChatWithContext","props","children","client","closeConnectionOnBackground","i18nInstance","style","channel","setChannel","t","key","tDateTimeParser","input","translators","setTranslators","loadingTranslators","connectionRecovering","isOnline","mutedUsers","setUserAgent","SDK","Platform","OS","version","recoverStateOnReconnect","setActiveChannel","newChannel","chatContext","Chat"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AAIA;;AACA;;AAEA;;AAGA;;;;;;;;;AAEA;;AA+FA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAGtBC,KAHsB,EAInB;AACH,MAAQC,QAAR,GAAsFD,KAAtF,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAsFF,KAAtF,CAAkBE,MAAlB;AAAA,8BAAsFF,KAAtF,CAA0BG,2BAA1B;AAAA,MAA0BA,2BAA1B,sCAAwD,IAAxD;AAAA,MAA8DC,YAA9D,GAAsFJ,KAAtF,CAA8DI,YAA9D;AAAA,MAA4EC,KAA5E,GAAsFL,KAAtF,CAA4EK,KAA5E;;AAEA,kBAA8B,sBAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAsC,qBAAkC;AACtEC,IAAAA,CAAC,EAAE,WAACC,GAAD;AAAA,aAAiBA,GAAjB;AAAA,KADmE;AAEtEC,IAAAA,eAAe,EAAE,yBAACC,KAAD;AAAA,aAAoC,uBAAMA,KAAN,CAApC;AAAA;AAFqD,GAAlC,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAQA,MAAMC,kBAAkB,GAAG,kCAAc;AAAEV,IAAAA,YAAY,EAAZA,YAAF;AAAgBS,IAAAA,cAAc,EAAdA;AAAhB,GAAd,CAA3B;;AAKA,qBAA2C,+BACzCX,MADyC,EAEzCC,2BAFyC,CAA3C;AAAA,MAAQY,oBAAR,gBAAQA,oBAAR;AAAA,MAA8BC,QAA9B,gBAA8BA,QAA9B;;AAQA,MAAMC,UAAU,GAAG,kCAAkCf,MAAlC,CAAnB;AAEA,wBAAU,YAAM;AACd,QAAIA,MAAM,CAACgB,YAAX,EAAyB;AACvBhB,MAAAA,MAAM,CAACgB,YAAP,CAAuBC,WAAvB,SAA8BC,sBAASC,EAAvC,SAA6CC,gBAA7C;AAEApB,MAAAA,MAAM,CAACqB,uBAAP,GAAiC,KAAjC;AACD;AACF,GAND,EAMG,EANH;;AAQA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD;AAAA,WAA8ClB,UAAU,CAACkB,UAAD,CAAxD;AAAA,GAAzB;;AAEA,MAAMC,WAAW,GAAG,gDAAqB;AACvCpB,IAAAA,OAAO,EAAPA,OADuC;AAEvCJ,IAAAA,MAAM,EAANA,MAFuC;AAGvCa,IAAAA,oBAAoB,EAApBA,oBAHuC;AAIvCC,IAAAA,QAAQ,EAARA,QAJuC;AAKvCC,IAAAA,UAAU,EAAVA,UALuC;AAMvCO,IAAAA,gBAAgB,EAAhBA;AANuC,GAArB,CAApB;AASA,MAAIV,kBAAJ,EAAwB,OAAO,IAAP;AAExB,SACE,gCAAC,yBAAD;AAAkC,IAAA,KAAK,EAAEY,WAAzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,uCAAD;AAAqB,IAAA,KAAK,EAAEd,WAA5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,2BAAD;AAAe,IAAA,KAAK,EAAEP,KAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAA8BJ,QAA9B,CADF,CADF,CADF;AAOD,CA3DD;;AAkFO,IAAM0B,IAAI,GAAG,SAAPA,IAAO,CAGlB3B,KAHkB,EAIf;AACH,2BAAkB,wCAAlB;AAAA,MAAQK,KAAR,sBAAQA,KAAR;;AAEA,SAAO,gCAAC,eAAD;AAAuBA,IAAAA,KAAK,EAALA;AAAvB,KAAoCL,KAApC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAP;AACD,CARM","sourcesContent":["import React, { PropsWithChildren, useEffect, useState } from 'react';\nimport { Platform } from 'react-native';\n\nimport Dayjs from 'dayjs';\n\nimport type { Channel } from 'stream-chat';\n\nimport { useCreateChatContext } from './hooks/useCreateChatContext';\nimport { useIsOnline } from './hooks/useIsOnline';\nimport { useMutedUsers } from './hooks/useMutedUsers';\n\nimport { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';\nimport { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';\nimport { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';\nimport type { Theme } from '../../contexts/themeContext/utils/theme';\nimport {\n  TranslationContextValue,\n  TranslationProvider,\n} from '../../contexts/translationContext/TranslationContext';\nimport { useStreami18n } from '../../hooks/useStreami18n';\nimport init from '../../init';\n\nimport { SDK } from '../../native';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { Streami18n } from '../../utils/Streami18n';\nimport { version } from '../../version.json';\n\ninit();\n\nexport type ChatProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {\n  /**\n   * When false, ws connection won't be disconnection upon backgrounding the app.\n   * To receive push notifications, its necessary that user doesn't have active\n   * websocket connection. So by default, we disconnect websocket connection when\n   * app goes to background, and reconnect when app comes to foreground.\n   */\n  closeConnectionOnBackground?: boolean;\n  /**\n   * Instance of Streami18n class should be provided to Chat component to enable internationalization.\n   *\n   * Stream provides following list of in-built translations:\n   * 1. English (en)\n   * 2. Dutch (nl)\n   * 3. ...\n   * 4. ...\n   *\n   * Simplest way to start using chat components in one of the in-built languages would be following:\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * If you would like to override certain keys in in-built translation.\n   * UI will be automatically updated in this case.\n   *\n   * ```\n   * const i18n = new Streami18n('nl');\n   *\n   * i18n.registerTranslation('nl', {\n   *  'Nothing yet...': 'Nog Niet ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',\n   * });\n   *\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   *\n   * You can use the same function to add whole new language.\n   *\n   * ```\n   * const i18n = new Streami18n('it');\n   *\n   * i18n.registerTranslation('it', {\n   *  'Nothing yet...': 'Non ancora ...',\n   *  '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',\n   * });\n   *\n   * // Make sure to call setLanguage to reflect new language in UI.\n   * i18n.setLanguage('it');\n   * <Chat client={chatClient} i18nInstance={i18n}>\n   *  ...\n   * </Chat>\n   * ```\n   */\n  i18nInstance?: Streami18n;\n  /**\n   * 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)\n   *\n   * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.\n   *\n   * ```\n   * import type { DeepPartial, Theme } from 'stream-chat-react-native';\n   *\n   * const theme: DeepPartial<Theme> = {\n   *   messageSimple: {\n   *     file: {\n   *       container: {\n   *         backgroundColor: 'red',\n   *       },\n   *       icon: {\n   *         height: 16,\n   *         width: 16,\n   *       },\n   *     },\n   *   },\n   * };\n   *\n   * <Chat style={theme}>\n   * </Chat>\n   * ```\n   *\n   * @overrideType object\n   */\n  style?: DeepPartial<Theme>;\n};\n\nconst ChatWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;\n\n  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();\n  const [translators, setTranslators] = useState<TranslationContextValue>({\n    t: (key: string) => key,\n    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),\n  });\n\n  /**\n   * Setup translators\n   */\n  const loadingTranslators = useStreami18n({ i18nInstance, setTranslators });\n\n  /**\n   * Setup connection event listeners\n   */\n  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(\n    client,\n    closeConnectionOnBackground,\n  );\n\n  /**\n   * Setup muted user listener\n   */\n  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);\n\n  useEffect(() => {\n    if (client.setUserAgent) {\n      client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);\n      // This is to disable recovery related logic in js client, since we handle it in this SDK\n      client.recoverStateOnReconnect = false;\n    }\n  }, []);\n\n  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);\n\n  const chatContext = useCreateChatContext({\n    channel,\n    client,\n    connectionRecovering,\n    isOnline,\n    mutedUsers,\n    setActiveChannel,\n  });\n\n  if (loadingTranslators) return null;\n\n  return (\n    <ChatProvider<StreamChatGenerics> value={chatContext}>\n      <TranslationProvider value={translators}>\n        <ThemeProvider style={style}>{children}</ThemeProvider>\n      </TranslationProvider>\n    </ChatProvider>\n  );\n};\n\n/**\n * Chat - Wrapper component for Chat. The needs to be placed around any other chat components.\n * This Chat component provides the ChatContext to all other components.\n *\n * The ChatContext provides the following props:\n *\n * - channel - currently active channel\n * - client - client connection\n * - connectionRecovering - whether or not websocket is reconnecting\n * - isOnline - whether or not set user is active\n * - setActiveChannel - function to set the currently active channel\n *\n * The Chat Component takes the following generics in order:\n * - At (AttachmentType) - custom Attachment object extension\n * - Ct (ChannelType) - custom Channel object extension\n * - Co (CommandType) - custom Command string union extension\n * - Ev (EventType) - custom Event object extension\n * - Me (MessageType) - custom Message object extension\n * - Re (ReactionType) - custom Reaction object extension\n * - Us (UserType) - custom User object extension\n */\nexport const Chat = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,\n) => {\n  const { style } = useOverlayContext();\n\n  return <ChatWithContext {...{ style }} {...props} />;\n};\n"]}

package/lib/module/init.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactNativeUrlPolyfill = require("react-native-url-polyfill");
+
+var _default = function _default() {
+  (0, _reactNativeUrlPolyfill.setupURLPolyfill)();
+};
+
+exports["default"] = _default;
+//# sourceMappingURL=init.js.map

package/lib/module/init.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["init.ts"],"names":[],"mappings":";;;;;AAAA;;eAEe,oBAAM;AACnB;AACD,C","sourcesContent":["import { setupURLPolyfill } from 'react-native-url-polyfill';\n\nexport default () => {\n  setupURLPolyfill();\n};\n"]}

package/lib/module/utils/getResizedImageUrl.js

@@ -7,20 +7,23 @@ var _reactNative = require("react-native");
 
 function getResizedImageUrl(_ref) {
   var height = _ref.height,
+      _ref$resize = _ref.resize,
+      resize = _ref$resize === void 0 ? 'clip' : _ref$resize,
       url = _ref.url,
       width = _ref.width;
-  var isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');
+  var isResizableUrl = url.includes('.stream-io-cdn.com');
   if (!isResizableUrl || !height && !width) return url;
-  var resizedUrl = url;
+  var parsedUrl = new URL(url);
 
   if (height) {
-    resizedUrl = resizedUrl.replace('h=*', "h=" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(height)));
+    parsedUrl.searchParams.set('h', "" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(height)));
   }
 
   if (width) {
-    resizedUrl = resizedUrl.replace('w=*', "w=" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(width)));
+    parsedUrl.searchParams.set('w', "" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(Number(width)));
   }
 
-  return resizedUrl.replace('resize=*', "resize=clip");
+  parsedUrl.searchParams.set('resize', "" + resize);
+  return parsedUrl.toString();
 }
 //# sourceMappingURL=getResizedImageUrl.js.map

package/lib/module/utils/getResizedImageUrl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getResizedImageUrl.ts"],"names":["getResizedImageUrl","height","url","width","isResizableUrl","includes","resizedUrl","replace","PixelRatio","getPixelSizeForLayoutSize","Number"],"mappings":";;;;;AAAA;;AAoBO,SAASA,kBAAT,OAA8E;AAAA,MAAhDC,MAAgD,QAAhDA,MAAgD;AAAA,MAAxCC,GAAwC,QAAxCA,GAAwC;AAAA,MAAnCC,KAAmC,QAAnCA,KAAmC;AACnF,MAAMC,cAAc,GAAGF,GAAG,CAACG,QAAJ,CAAa,MAAb,KAAwBH,GAAG,CAACG,QAAJ,CAAa,MAAb,CAAxB,IAAgDH,GAAG,CAACG,QAAJ,CAAa,WAAb,CAAvE;AAEA,MAAI,CAACD,cAAD,IAAoB,CAACH,MAAD,IAAW,CAACE,KAApC,EAA4C,OAAOD,GAAP;AAE5C,MAAII,UAAU,GAAGJ,GAAjB;;AAEA,MAAID,MAAJ,EAAY;AACVK,IAAAA,UAAU,GAAGA,UAAU,CAACC,OAAX,CACX,KADW,SAENC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACT,MAAD,CAA3C,CAFM,CAAb;AAID;;AAED,MAAIE,KAAJ,EAAW;AACTG,IAAAA,UAAU,GAAGA,UAAU,CAACC,OAAX,CACX,KADW,SAENC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACP,KAAD,CAA3C,CAFM,CAAb;AAID;;AAED,SAAOG,UAAU,CAACC,OAAX,CAAmB,UAAnB,gBAAP;AACD","sourcesContent":["import { PixelRatio } from 'react-native';\n\ntype GetResizedImageUrlParams = {\n  url: string;\n  height?: string | number;\n  width?: string | number;\n};\n\n/**\n * Any file or image upload done through stream's chat SDK or components get uploaded\n * to CloudFront CDN. Following function returns a url of resized image (to given width and height).\n * It can be used to avoid rendering heavy images on UI, for the sake of performance.\n *\n * This function accepts an object with following properties:\n * - height: height of the resized image.\n * - url: url of the image.\n * - width: width of the resized image.\n *\n * @returns {string} Url of the image with given height and width.\n */\nexport function getResizedImageUrl({ height, url, width }: GetResizedImageUrlParams) {\n  const isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');\n\n  if (!isResizableUrl || (!height && !width)) return url;\n\n  let resizedUrl = url;\n\n  if (height) {\n    resizedUrl = resizedUrl.replace(\n      'h=*',\n      `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`,\n    );\n  }\n\n  if (width) {\n    resizedUrl = resizedUrl.replace(\n      'w=*',\n      `w=${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`,\n    );\n  }\n\n  return resizedUrl.replace('resize=*', `resize=clip`);\n}\n"]}
+{"version":3,"sources":["getResizedImageUrl.ts"],"names":["getResizedImageUrl","height","resize","url","width","isResizableUrl","includes","parsedUrl","URL","searchParams","set","PixelRatio","getPixelSizeForLayoutSize","Number","toString"],"mappings":";;;;;AAAA;;AAqBO,SAASA,kBAAT,OAKsB;AAAA,MAJ3BC,MAI2B,QAJ3BA,MAI2B;AAAA,yBAH3BC,MAG2B;AAAA,MAH3BA,MAG2B,4BAHlB,MAGkB;AAAA,MAF3BC,GAE2B,QAF3BA,GAE2B;AAAA,MAD3BC,KAC2B,QAD3BA,KAC2B;AAE3B,MAAMC,cAAc,GAAGF,GAAG,CAACG,QAAJ,CAAa,oBAAb,CAAvB;AACA,MAAI,CAACD,cAAD,IAAoB,CAACJ,MAAD,IAAW,CAACG,KAApC,EAA4C,OAAOD,GAAP;AAE5C,MAAMI,SAAS,GAAG,IAAIC,GAAJ,CAAQL,GAAR,CAAlB;;AAEA,MAAIF,MAAJ,EAAY;AACVM,IAAAA,SAAS,CAACE,YAAV,CAAuBC,GAAvB,CAA2B,GAA3B,OAAmCC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACZ,MAAD,CAA3C,CAAnC;AACD;;AAED,MAAIG,KAAJ,EAAW;AACTG,IAAAA,SAAS,CAACE,YAAV,CAAuBC,GAAvB,CAA2B,GAA3B,OAAmCC,wBAAWC,yBAAX,CAAqCC,MAAM,CAACT,KAAD,CAA3C,CAAnC;AACD;;AAEDG,EAAAA,SAAS,CAACE,YAAV,CAAuBC,GAAvB,CAA2B,QAA3B,OAAwCR,MAAxC;AAEA,SAAOK,SAAS,CAACO,QAAV,EAAP;AACD","sourcesContent":["import { PixelRatio } from 'react-native';\n\ntype GetResizedImageUrlParams = {\n  url: string;\n  height?: string | number;\n  resize?: 'clip' | 'crop' | 'fill' | 'scale';\n  width?: string | number;\n};\n\n/**\n * Any file or image upload done through stream's chat SDK or components get uploaded\n * to CloudFront CDN. Following function returns a url of resized image (to given width and height).\n * It can be used to avoid rendering heavy images on UI, for the sake of performance.\n *\n * This function accepts an object with following properties:\n * - height: height of the resized image.\n * - url: url of the image.\n * - width: width of the resized image.\n *\n * @returns {string} Url of the image with given height and width.\n */\nexport function getResizedImageUrl({\n  height,\n  resize = 'clip',\n  url,\n  width,\n}: GetResizedImageUrlParams) {\n  // Check if url belongs to cloudfront CDN\n  const isResizableUrl = url.includes('.stream-io-cdn.com');\n  if (!isResizableUrl || (!height && !width)) return url;\n\n  const parsedUrl = new URL(url);\n\n  if (height) {\n    parsedUrl.searchParams.set('h', `${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`);\n  }\n\n  if (width) {\n    parsedUrl.searchParams.set('w', `${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`);\n  }\n\n  parsedUrl.searchParams.set('resize', `${resize}`);\n\n  return parsedUrl.toString();\n}\n"]}

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.0.0-beta.6"
+  "version": "4.0.0-beta.7"
 }

package/lib/typescript/init.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => void;
+export default _default;

package/lib/typescript/utils/getResizedImageUrl.d.ts

@@ -1,6 +1,7 @@
 declare type GetResizedImageUrlParams = {
     url: string;
     height?: string | number;
+    resize?: 'clip' | 'crop' | 'fill' | 'scale';
     width?: string | number;
 };
 /**
@@ -15,5 +16,5 @@ declare type GetResizedImageUrlParams = {
  *
  * @returns {string} Url of the image with given height and width.
  */
-export declare function getResizedImageUrl({ height, url, width }: GetResizedImageUrlParams): string;
+export declare function getResizedImageUrl({ height, resize, url, width, }: GetResizedImageUrlParams): string;
 export {};

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.0.0-beta.6",
+  "version": "4.0.0-beta.7",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -27,8 +27,6 @@
     "lint-fix-translations": "prettier --check 'src/i18n/*.json' --write 'src/i18n/*.json' .eslintrc.json ../.prettierrc .babelrc",
     "build-translations": "rm -rf .tmpi18ncache || true && mkdir .tmpi18ncache && yarn run babel --config-file ./babel.i18next-extract.json 'src/**/*.{js,jsx,ts,tsx}' --out-dir '.tmpi18ncache/' && rm -rf .tmpi18ncache && prettier --write 'src/i18n/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
     "copy-translations": "echo '\u001b[34mℹ\u001b[0m Copying translation files to \u001b[34mlib/typescript/i18n\u001b[0m' && cp -R -f ./src/i18n ./lib/typescript/i18n && echo '\u001b[32m✓\u001b[0m Done Copying Translations'",
-    "docs": "styleguidist build",
-    "docs-server": "styleguidist server",
     "eslint": "eslint 'src/**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
     "lint": "prettier --ignore-path ../.prettierignore --list-different 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn run validate-translations",
     "lint-fix": "prettier --ignore-path ../.prettierignore --write 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc && eslint --fix 'src/**/*.{js,ts,tsx,md}' --max-warnings 0",
@@ -80,6 +78,7 @@
     "path": "0.12.7",
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
+    "react-native-url-polyfill": "^1.3.0",
     "stream-chat": "6.0.0"
   },
   "peerDependencies": {
@@ -138,7 +137,6 @@
     "react-native-svg": "12.1.1",
     "react-native-typescript-transformer": "1.2.13",
     "react-native-web": "0.15.0",
-    "react-styleguidist": "11.1.6",
     "react-test-renderer": "17.0.2",
     "typescript": "4.4.3",
     "uuid": "8.3.2",

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

@@ -97,7 +97,7 @@ describe('buildGallery', () => {
   it('thumbnail size should be smaller than the limits set by sizeConfig', () => {
     const bigImage = generateImageAttachment({
       image_url:
-        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+        'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
       original_height: 1200,
       original_width: 900,
     });
@@ -107,13 +107,13 @@ describe('buildGallery', () => {
       sizeConfig: defaultSizeConfig,
     });
     const t1 = tg1[0][0];
-    expect(t1.url.includes(`h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
+    expect(t1.url.includes(`&h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
     expect(t1.url.includes(`&w=${PixelRatio.getPixelSizeForLayoutSize(t1.width)}`)).toBe(true);
     expect(t1.url.includes(`&resize=clip`)).toBe(true);
 
     const smallImage = generateImageAttachment({
       image_url:
-        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+        'https://us-east.stream-io-cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
       original_height: 30,
       original_width: 20,
     });
@@ -124,7 +124,7 @@ describe('buildGallery', () => {
     });
 
     const t2 = tg2[0][0];
-    expect(t2.url.includes(`h=*`)).toBe(true);
+    expect(t2.url.includes(`&h=*`)).toBe(true);
     expect(t2.url.includes(`&w=*`)).toBe(true);
     expect(t2.url.includes(`&resize=*`)).toBe(true);
   });

package/src/components/Chat/Chat.tsx

@@ -18,12 +18,15 @@ import {
   TranslationProvider,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
+import init from '../../init';
 
 import { SDK } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
+init();
+
 export type ChatProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {

package/src/init.ts

@@ -0,0 +1,5 @@
+import { setupURLPolyfill } from 'react-native-url-polyfill';
+
+export default () => {
+  setupURLPolyfill();
+};

package/src/utils/__tests__/getResizedImageUrl.test.js

@@ -0,0 +1,56 @@
+import { PixelRatio } from 'react-native';
+
+import { getResizedImageUrl } from '../getResizedImageUrl';
+
+describe('getResizedImageUrl', () => {
+  it('should return same url if its not cloudfront cdn', () => {
+    const testUrl = 'http://foo.com/blah_(wikipedia)#cite-1';
+
+    const resizedUrl = getResizedImageUrl({ height: 100, url: testUrl, width: 100 });
+    expect(resizedUrl).toEqual(testUrl);
+  });
+
+  it('should append given height, width and resize mode to url', () => {
+    const testUrl = 'http://us-east.stream-io-cdn.com/blah';
+
+    const testConfigs = [
+      { height: 100, resize: 'scale', width: 100 },
+      { height: 200, resize: 'fill', width: 300 },
+      { height: 1000, resize: 'clip', width: 10 },
+    ];
+
+    testConfigs.forEach(({ height, resize, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url: testUrl, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    });
+  });
+
+  it('should replace wildcards with given height, width and resize mode within url', () => {
+    const testUrl = 'http://us-east.stream-io-cdn.com/blah?h=*&w=*&resize=*';
+
+    const testConfigs = [
+      { height: 100, resize: 'scale', width: 100 },
+      { height: 200, resize: 'fill', width: 300 },
+      { height: 1000, resize: 'clip', width: 10 },
+    ];
+
+    testConfigs.forEach(({ height, resize, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url: testUrl, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    });
+  });
+});

package/src/utils/getResizedImageUrl.ts

@@ -3,6 +3,7 @@ import { PixelRatio } from 'react-native';
 type GetResizedImageUrlParams = {
   url: string;
   height?: string | number;
+  resize?: 'clip' | 'crop' | 'fill' | 'scale';
   width?: string | number;
 };
 
@@ -18,26 +19,27 @@ type GetResizedImageUrlParams = {
  *
  * @returns {string} Url of the image with given height and width.
  */
-export function getResizedImageUrl({ height, url, width }: GetResizedImageUrlParams) {
-  const isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');
-
+export function getResizedImageUrl({
+  height,
+  resize = 'clip',
+  url,
+  width,
+}: GetResizedImageUrlParams) {
+  // Check if url belongs to cloudfront CDN
+  const isResizableUrl = url.includes('.stream-io-cdn.com');
   if (!isResizableUrl || (!height && !width)) return url;
 
-  let resizedUrl = url;
+  const parsedUrl = new URL(url);
 
   if (height) {
-    resizedUrl = resizedUrl.replace(
-      'h=*',
-      `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`,
-    );
+    parsedUrl.searchParams.set('h', `${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`);
   }
 
   if (width) {
-    resizedUrl = resizedUrl.replace(
-      'w=*',
-      `w=${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`,
-    );
+    parsedUrl.searchParams.set('w', `${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`);
   }
 
-  return resizedUrl.replace('resize=*', `resize=clip`);
+  parsedUrl.searchParams.set('resize', `${resize}`);
+
+  return parsedUrl.toString();
 }

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.0.0-beta.6"
+  "version": "4.0.0-beta.7"
 }