stream-chat-react-native-core 5.0.0-offline-support.15 → 5.1.0

package/lib/module/icons/Time.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Time.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Time.tsx";
 
 var Time = function Time(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Unknown.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Unknown.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Unknown.tsx";
 
 var Unknown = function Unknown(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Unpin.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Unpin.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Unpin.tsx";
 
 var Unpin = function Unpin(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/User.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/User.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/User.tsx";
 
 var User = function User(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/UserAdd.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserAdd.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserAdd.tsx";
 
 var UserAdd = function UserAdd(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/UserAdmin.js

@@ -16,7 +16,7 @@ var _base = require("./utils/base");
 var _excluded = ["height", "width"];
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserAdmin.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserAdmin.tsx";
 
 var UserAdmin = function UserAdmin(props) {
   var height = props.height,

package/lib/module/icons/UserDelete.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserDelete.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserDelete.tsx";
 
 var UserDelete = function UserDelete(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/UserMinus.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/UserMinus.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/UserMinus.tsx";
 
 var UserMinus = function UserMinus(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/Video.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Video.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Video.tsx";
 
 var Video = function Video(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/Warning.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/Warning.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/Warning.tsx";
 
 var Warning = function Warning(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/WutReaction.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/WutReaction.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/WutReaction.tsx";
 
 var WutReaction = function WutReaction(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({}, props, {

package/lib/module/icons/XLS.js

@@ -14,7 +14,7 @@ var _reactNativeSvg = require("react-native-svg");
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/XLS.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/XLS.tsx";
 
 var XLS = function XLS(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/XLSX.js

@@ -14,7 +14,7 @@ var _reactNativeSvg = require("react-native-svg");
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/XLSX.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/XLSX.tsx";
 
 var XLSX = function XLSX(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/ZIP.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("./utils/base");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/ZIP.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/ZIP.tsx";
 
 var ZIP = function ZIP(props) {
   return _react["default"].createElement(_base.RootSvg, (0, _extends2["default"])({

package/lib/module/icons/utils/base.js

@@ -16,7 +16,7 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/icons/utils/base.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/icons/utils/base.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/lib/module/mock-builders/event/messageNew.js

@@ -7,6 +7,8 @@ var _default = function _default(client, newMessage) {
   var channel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   client.dispatchEvent({
     channel: channel,
+    channel_id: channel.id,
+    channel_type: channel.type,
     cid: channel.cid,
     message: newMessage,
     type: 'message.new'

package/lib/module/mock-builders/event/messageNew.js.map

@@ -1 +1 @@
-{"version":3,"sources":["messageNew.js"],"names":["client","newMessage","channel","dispatchEvent","cid","message","type"],"mappings":";;;;;eAAe,kBAACA,MAAD,EAASC,UAAT,EAAsC;AAAA,MAAjBC,OAAiB,uEAAP,EAAO;AACnDF,EAAAA,MAAM,CAACG,aAAP,CAAqB;AACnBD,IAAAA,OAAO,EAAPA,OADmB;AAEnBE,IAAAA,GAAG,EAAEF,OAAO,CAACE,GAFM;AAGnBC,IAAAA,OAAO,EAAEJ,UAHU;AAInBK,IAAAA,IAAI,EAAE;AAJa,GAArB;AAMD,C","sourcesContent":["export default (client, newMessage, channel = {}) => {\n  client.dispatchEvent({\n    channel,\n    cid: channel.cid,\n    message: newMessage,\n    type: 'message.new',\n  });\n};\n"]}
+{"version":3,"sources":["messageNew.js"],"names":["client","newMessage","channel","dispatchEvent","channel_id","id","channel_type","type","cid","message"],"mappings":";;;;;eAAe,kBAACA,MAAD,EAASC,UAAT,EAAsC;AAAA,MAAjBC,OAAiB,uEAAP,EAAO;AACnDF,EAAAA,MAAM,CAACG,aAAP,CAAqB;AACnBD,IAAAA,OAAO,EAAPA,OADmB;AAEnBE,IAAAA,UAAU,EAAEF,OAAO,CAACG,EAFD;AAGnBC,IAAAA,YAAY,EAAEJ,OAAO,CAACK,IAHH;AAInBC,IAAAA,GAAG,EAAEN,OAAO,CAACM,GAJM;AAKnBC,IAAAA,OAAO,EAAER,UALU;AAMnBM,IAAAA,IAAI,EAAE;AANa,GAArB;AAQD,C","sourcesContent":["export default (client, newMessage, channel = {}) => {\n  client.dispatchEvent({\n    channel,\n    channel_id: channel.id,\n    channel_type: channel.type,\n    cid: channel.cid,\n    message: newMessage,\n    type: 'message.new',\n  });\n};\n"]}

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.0.0-offline-support.15"
+  "version": "5.1.0"
 }

package/lib/typescript/components/Attachment/utils/getGiphyMimeType.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * @param giphyUrl The giphy attachment url
+ * @returns mimeType for the giphy attachment
+ */
+export declare function getGiphyMimeType(giphyUrl: string): string;

package/lib/typescript/components/Message/Message.d.ts

@@ -1,5 +1,5 @@
 import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
-import type { UserResponse } from 'stream-chat';
+import type { Attachment, UserResponse } from 'stream-chat';
 import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue } from '../../contexts/chatContext/ChatContext';
 import { KeyboardContextValue } from '../../contexts/keyboardContext/KeyboardContext';
@@ -24,12 +24,18 @@ export declare type UrlTouchableHandlerPayload = {
         url?: string;
     };
 };
+export declare type FileAttachmentTouchableHandlerPayload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    emitter: 'fileAttachment';
+    additionalInfo?: {
+        attachment?: Attachment<StreamChatGenerics>;
+    };
+};
 export declare type TouchableHandlerPayload = {
     defaultHandler?: () => void;
     event?: GestureResponderEvent;
 } & ({
-    emitter?: TouchableEmitter;
-} | TextMentionTouchableHandlerPayload | UrlTouchableHandlerPayload);
+    emitter?: Exclude<TouchableEmitter, 'textMention' | 'textLink' | 'card' | 'fileAttachment'>;
+} | TextMentionTouchableHandlerPayload | UrlTouchableHandlerPayload | FileAttachmentTouchableHandlerPayload);
 export declare type MessageTouchableHandlerPayload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TouchableHandlerPayload & {
     actionHandlers?: MessageActionHandlers;
     additionalInfo?: Record<string, unknown>;

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -263,6 +263,7 @@ export declare type Theme = {
         };
         imageUploadPreview: {
             dismiss: ViewStyle;
+            dismissIconColor: Color;
             flatList: ViewStyle;
             itemContainer: ViewStyle;
             upload: ImageStyle;

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": "5.0.0-offline-support.15",
+  "version": "5.1.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -78,9 +78,9 @@
     "mime-types": "^2.1.34",
     "path": "0.12.7",
     "react-art": "^17.0.2",
-    "react-native-markdown-package": "1.8.1",
+    "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "7.0.0-offline-support.3"
+    "stream-chat": "7.0.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"

package/src/components/Attachment/FileAttachment.tsx

@@ -103,6 +103,7 @@ const FileAttachmentWithContext = <
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
+            additionalInfo: { attachment },
             emitter: 'fileAttachment',
             event,
           });
@@ -111,6 +112,7 @@ const FileAttachmentWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            additionalInfo: { attachment },
             defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,
@@ -120,6 +122,7 @@ const FileAttachmentWithContext = <
       onPressIn={(event) => {
         if (onPressIn) {
           onPressIn({
+            additionalInfo: { attachment },
             defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,

package/src/components/Attachment/Gallery.tsx

@@ -580,6 +580,7 @@ export const Gallery = <
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
     images: propImages,
+    message: propMessage,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
     onPressIn: propOnPressIn,
@@ -597,7 +598,7 @@ export const Gallery = <
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
     images: contextImages,
-    message,
+    message: contextMessage,
     onLongPress: contextOnLongPress,
     onPress: contextOnPress,
     onPressIn: contextOnPressIn,
@@ -616,6 +617,7 @@ export const Gallery = <
 
   const images = propImages || contextImages;
   const videos = propVideos || contextVideos;
+  const message = propMessage || contextMessage;
 
   if (!images.length && !videos.length) return null;
 

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

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param giphyUrl The giphy attachment url
+ * @returns mimeType for the giphy attachment
+ */
+export function getGiphyMimeType(giphyUrl: string): string {
+  if (giphyUrl.includes('.mp4')) {
+    return 'video/mp4';
+  } else if (giphyUrl.includes('.webp')) {
+    return 'image/webp';
+  }
+  return 'image/gif';
+}

package/src/components/Channel/Channel.tsx

@@ -577,7 +577,7 @@ const ChannelWithContext = <
   const channelId = channel?.id || '';
   useEffect(() => {
     const initChannel = () => {
-      if (!channel || !shouldSyncChannel || channel.staticState) return;
+      if (!channel || !shouldSyncChannel || channel.offlineMode) return;
       /**
        * Loading channel at first unread message  requires channel to be initialized in the first place,
        * since we use read state on channel to decide what offset to load channel at.

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

@@ -246,6 +246,34 @@ describe('ChannelList', () => {
         });
       });
 
+      it('should add channel to top if channel is hidden from the list', async () => {
+        const { getAllByRole, getByTestId, getByText } = render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} />
+          </Chat>,
+        );
+
+        await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+        act(() => dispatchChannelHiddenEvent(chatClient, testChannel3.channel));
+
+        const newItems = getAllByRole('list-item');
+        await waitFor(() => {
+          expect(newItems).toHaveLength(2);
+        });
+
+        const newMessage = sendNewMessageOnChannel3();
+
+        await waitFor(() => {
+          expect(getByText(newMessage.text)).toBeTruthy();
+        });
+
+        const items = getAllByRole('list-item');
+
+        await waitFor(() => {
+          expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
+        });
+      });
+
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
         const { getAllByRole, getByTestId, getByText } = render(
           <Chat client={chatClient}>

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -24,11 +24,24 @@ export const useNewMessage = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
-        if (!lockChannelOrder && event.cid) {
-          return moveChannelUp<StreamChatGenerics>({
-            channels,
-            cid: event.cid,
-          });
+        if (!lockChannelOrder && event.cid && event.channel_type && event.channel_id) {
+          const targetChannelIndex = channels.findIndex((c) => c.cid === event.cid);
+
+          if (targetChannelIndex >= 0) {
+            return moveChannelUp<StreamChatGenerics>({
+              channels,
+              cid: event.cid,
+            });
+          }
+
+          // If channel doesn't exist in existing list, check in activeChannels as well.
+          // It may happen that channel was hidden using channel.hide(). In that case
+          // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
+          const channel = client.channel(event.channel_type, event.channel_id);
+
+          if (channel.initialized) {
+            return [channel, ...channels];
+          }
         }
 
         return [...channels];

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -192,7 +192,7 @@ export const usePaginatedChannels = <
           if (channelsFromDB) {
             setChannels(
               client.hydrateActiveChannels(channelsFromDB, {
-                staticState: true,
+                offlineMode: true,
               }),
             );
           }

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -78,9 +78,12 @@ const ChannelPreviewWithContext = <
     };
 
     const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
-      if (event.message?.id === lastMessage?.id) {
-        setLastMessage(event.message);
-      }
+      setLastMessage((prevLastMessage) => {
+        if (prevLastMessage?.id === event.message?.id) {
+          return event.message;
+        }
+        return prevLastMessage;
+      });
     };
 
     const listeners = [

package/src/components/ImageGallery/ImageGallery.tsx

@@ -65,6 +65,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { vh, vw } from '../../utils/utils';
+import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
@@ -283,7 +284,7 @@ export const ImageGallery = <
         created_at: cur.created_at,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
-        mime_type: a.type === 'giphy' ? 'image/gif' : a.mime_type,
+        mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
         type: a.type,

package/src/components/Message/Message.tsx

@@ -73,15 +73,23 @@ export type UrlTouchableHandlerPayload = {
   additionalInfo?: { url?: string };
 };
 
+export type FileAttachmentTouchableHandlerPayload<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  emitter: 'fileAttachment';
+  additionalInfo?: { attachment?: Attachment<StreamChatGenerics> };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
   event?: GestureResponderEvent;
 } & (
   | {
-      emitter?: TouchableEmitter;
+      emitter?: Exclude<TouchableEmitter, 'textMention' | 'textLink' | 'card' | 'fileAttachment'>;
     }
   | TextMentionTouchableHandlerPayload
   | UrlTouchableHandlerPayload
+  | FileAttachmentTouchableHandlerPayload
 );
 
 export type MessageTouchableHandlerPayload<

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -117,8 +117,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
   nextProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { message: prevMessage, onlyEmojis: prevOnlyEmojis } = prevProps;
-  const { message: nextMessage, onlyEmojis: nextOnlyEmojis } = nextProps;
+  const {
+    markdownStyles: prevMarkdownStyles,
+    message: prevMessage,
+    onlyEmojis: prevOnlyEmojis,
+  } = prevProps;
+  const {
+    markdownStyles: nextMarkdownStyles,
+    message: nextMessage,
+    onlyEmojis: nextOnlyEmojis,
+  } = nextProps;
 
   const messageTextEqual = prevMessage.text === nextMessage.text;
   if (!messageTextEqual) return false;
@@ -134,6 +142,18 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
         prevMessage.mentioned_users[0].name === nextMessage.mentioned_users[0].name));
   if (!mentionedUsersEqual) return false;
 
+  // stringify could be an expensive operation, so lets rule out the obvious
+  // possibilities first such as different object reference or empty objects etc.
+  // Also keeping markdown equality check at the last to make sure other less
+  // expensive equality checks get executed first and markdown check will be skipped if returned
+  // false from previous checks.
+  const markdownStylesEqual =
+    prevMarkdownStyles === nextMarkdownStyles ||
+    (Object.keys(prevMarkdownStyles || {}).length === 0 &&
+      Object.keys(nextMarkdownStyles || {}).length === 0) ||
+    JSON.stringify(prevMarkdownStyles) === JSON.stringify(nextMarkdownStyles);
+  if (!markdownStylesEqual) return false;
+
   return true;
 };
 

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

@@ -261,7 +261,7 @@ export const renderText = <
   );
 
   const customRules = {
-    link: { link },
+    link: { react: link },
     list: { react: list },
     // Truncate long text content in the message overlay
     paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -87,9 +95,8 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay, white },
       messageInput: {
-        imageUploadPreview: { dismiss, flatList, itemContainer, upload },
+        imageUploadPreview: { flatList, itemContainer, upload },
       },
     },
   } = useTheme();
@@ -140,15 +147,11 @@ const ImageUploadPreviewWithContext = <
             style={[styles.upload, upload]}
           />
         </UploadProgressIndicator>
-        <TouchableOpacity
+        <DismissUpload
           onPress={() => {
             removeImage(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
-          testID='remove-image-upload-preview'
-        >
-          <Close pathFill={white} />
-        </TouchableOpacity>
+        />
         <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
       </View>
     );
@@ -170,6 +173,29 @@ const ImageUploadPreviewWithContext = <
   ) : null;
 };
 
+type DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;
+
+const DismissUpload = ({ onPress }: DismissUploadProps) => {
+  const {
+    theme: {
+      colors: { overlay, white },
+      messageInput: {
+        imageUploadPreview: { dismiss, dismissIconColor },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+      testID='remove-image-upload-preview'
+    >
+      <Close pathFill={dismissIconColor || white} />
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,

package/src/components/MessageList/MessageList.tsx

@@ -530,7 +530,7 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || (!channel.initialized && !channel.staticState)) return null;
+    if (!channel || (!channel.initialized && !channel.offlineMode)) return null;
 
     const lastRead = channel.lastRead();
 

package/src/contexts/themeContext/utils/theme.ts

@@ -267,6 +267,7 @@ export type Theme = {
     };
     imageUploadPreview: {
       dismiss: ViewStyle;
+      dismissIconColor: Color;
       flatList: ViewStyle;
       itemContainer: ViewStyle;
       upload: ImageStyle;
@@ -766,6 +767,7 @@ export const defaultTheme: Theme = {
     },
     imageUploadPreview: {
       dismiss: {},
+      dismissIconColor: '',
       flatList: {},
       itemContainer: {},
       upload: {},

package/src/mock-builders/event/messageNew.js

@@ -1,6 +1,8 @@
 export default (client, newMessage, channel = {}) => {
   client.dispatchEvent({
     channel,
+    channel_id: channel.id,
+    channel_type: channel.type,
     cid: channel.cid,
     message: newMessage,
     type: 'message.new',

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.0.0-offline-support.15"
+  "version": "5.1.0"
 }