stream-chat-react-native-core 5.12.0-beta.3 → 5.12.0

package/lib/commonjs/components/Channel/hooks/useTargetedMessage.js

@@ -19,15 +19,15 @@ var useTargetedMessage = function useTargetedMessage(messageId) {
       clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);
     };
   }, []);
-  var setTargetedMessageTimeout = function setTargetedMessageTimeout(messageId) {
+  var setTargetedMessageTimeoutRef = (0, _react.useRef)(function (messageId) {
     clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);
     clearTargetedMessageCall.current = setTimeout(function () {
       setTargetedMessage(undefined);
     }, 3000);
     setTargetedMessage(messageId);
-  };
+  });
   return {
-    setTargetedMessage: setTargetedMessageTimeout,
+    setTargetedMessage: setTargetedMessageTimeoutRef.current,
     targetedMessage: targetedMessage
   };
 };

package/lib/commonjs/components/Channel/hooks/useTargetedMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","useTargetedMessage","messageId","clearTargetedMessageCall","useRef","_useState","useState","_useState2","_slicedToArray2","targetedMessage","setTargetedMessage","useEffect","current","setTimeout","undefined","clearTimeout","setTargetedMessageTimeout","exports"],"sources":["useTargetedMessage.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const useTargetedMessage = (messageId?: string) => {\n  const clearTargetedMessageCall = useRef<ReturnType<typeof setTimeout>>();\n  const [targetedMessage, setTargetedMessage] = useState(messageId);\n\n  useEffect(() => {\n    clearTargetedMessageCall.current = setTimeout(() => {\n      setTargetedMessage(undefined);\n    }, 3000);\n\n    return () => {\n      clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);\n    };\n  }, []);\n\n  const setTargetedMessageTimeout = (messageId: string) => {\n    clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);\n\n    clearTargetedMessageCall.current = setTimeout(() => {\n      setTargetedMessage(undefined);\n    }, 3000);\n\n    setTargetedMessage(messageId);\n  };\n\n  return {\n    setTargetedMessage: setTargetedMessageTimeout,\n    targetedMessage,\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,SAAkB,EAAK;EACxD,IAAMC,wBAAwB,GAAG,IAAAC,aAAM,GAAiC;EACxE,IAAAC,SAAA,GAA8C,IAAAC,eAAQ,EAACJ,SAAS,CAAC;IAAAK,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAA1DI,eAAe,GAAAF,UAAA;IAAEG,kBAAkB,GAAAH,UAAA;EAE1C,IAAAI,gBAAS,EAAC,YAAM;IACdR,wBAAwB,CAACS,OAAO,GAAGC,UAAU,CAAC,YAAM;MAClDH,kBAAkB,CAACI,SAAS,CAAC;IAC/B,CAAC,EAAE,IAAI,CAAC;IAER,OAAO,YAAM;MACXX,wBAAwB,CAACS,OAAO,IAAIG,YAAY,CAACZ,wBAAwB,CAACS,OAAO,CAAC;IACpF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMI,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAId,SAAiB,EAAK;IACvDC,wBAAwB,CAACS,OAAO,IAAIG,YAAY,CAACZ,wBAAwB,CAACS,OAAO,CAAC;IAElFT,wBAAwB,CAACS,OAAO,GAAGC,UAAU,CAAC,YAAM;MAClDH,kBAAkB,CAACI,SAAS,CAAC;IAC/B,CAAC,EAAE,IAAI,CAAC;IAERJ,kBAAkB,CAACR,SAAS,CAAC;EAC/B,CAAC;EAED,OAAO;IACLQ,kBAAkB,EAAEM,yBAAyB;IAC7CP,eAAe,EAAfA;EACF,CAAC;AACH,CAAC;AAACQ,OAAA,CAAAhB,kBAAA,GAAAA,kBAAA"}
+{"version":3,"names":["_react","require","useTargetedMessage","messageId","clearTargetedMessageCall","useRef","_useState","useState","_useState2","_slicedToArray2","targetedMessage","setTargetedMessage","useEffect","current","setTimeout","undefined","clearTimeout","setTargetedMessageTimeoutRef","exports"],"sources":["useTargetedMessage.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const useTargetedMessage = (messageId?: string) => {\n  const clearTargetedMessageCall = useRef<ReturnType<typeof setTimeout>>();\n  const [targetedMessage, setTargetedMessage] = useState(messageId);\n\n  useEffect(() => {\n    clearTargetedMessageCall.current = setTimeout(() => {\n      setTargetedMessage(undefined);\n    }, 3000);\n\n    return () => {\n      clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);\n    };\n  }, []);\n\n  const setTargetedMessageTimeoutRef = useRef((messageId: string) => {\n    clearTargetedMessageCall.current && clearTimeout(clearTargetedMessageCall.current);\n\n    clearTargetedMessageCall.current = setTimeout(() => {\n      setTargetedMessage(undefined);\n    }, 3000);\n\n    setTargetedMessage(messageId);\n  });\n\n  return {\n    setTargetedMessage: setTargetedMessageTimeoutRef.current,\n    targetedMessage,\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,SAAkB,EAAK;EACxD,IAAMC,wBAAwB,GAAG,IAAAC,aAAM,GAAiC;EACxE,IAAAC,SAAA,GAA8C,IAAAC,eAAQ,EAACJ,SAAS,CAAC;IAAAK,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAA1DI,eAAe,GAAAF,UAAA;IAAEG,kBAAkB,GAAAH,UAAA;EAE1C,IAAAI,gBAAS,EAAC,YAAM;IACdR,wBAAwB,CAACS,OAAO,GAAGC,UAAU,CAAC,YAAM;MAClDH,kBAAkB,CAACI,SAAS,CAAC;IAC/B,CAAC,EAAE,IAAI,CAAC;IAER,OAAO,YAAM;MACXX,wBAAwB,CAACS,OAAO,IAAIG,YAAY,CAACZ,wBAAwB,CAACS,OAAO,CAAC;IACpF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMI,4BAA4B,GAAG,IAAAZ,aAAM,EAAC,UAACF,SAAiB,EAAK;IACjEC,wBAAwB,CAACS,OAAO,IAAIG,YAAY,CAACZ,wBAAwB,CAACS,OAAO,CAAC;IAElFT,wBAAwB,CAACS,OAAO,GAAGC,UAAU,CAAC,YAAM;MAClDH,kBAAkB,CAACI,SAAS,CAAC;IAC/B,CAAC,EAAE,IAAI,CAAC;IAERJ,kBAAkB,CAACR,SAAS,CAAC;EAC/B,CAAC,CAAC;EAEF,OAAO;IACLQ,kBAAkB,EAAEM,4BAA4B,CAACJ,OAAO;IACxDH,eAAe,EAAfA;EACF,CAAC;AACH,CAAC;AAACQ,OAAA,CAAAhB,kBAAA,GAAAA,kBAAA"}

package/lib/commonjs/components/ChannelPreview/ChannelPreview.js

@@ -35,6 +35,13 @@ var ChannelPreviewWithContext = function ChannelPreviewWithContext(props) {
   var latestMessagePreview = (0, _useLatestMessagePreview.useLatestMessagePreview)(channel, forceUpdate, translatedLastMessage);
   var channelLastMessage = channel.lastMessage();
   var channelLastMessageString = "" + (channelLastMessage == null ? void 0 : channelLastMessage.id) + (channelLastMessage == null ? void 0 : channelLastMessage.updated_at);
+  (0, _react.useEffect)(function () {
+    var _client$on = client.on('notification.mark_read', function () {
+        setUnread(channel.countUnread());
+      }),
+      unsubscribe = _client$on.unsubscribe;
+    return unsubscribe;
+  }, []);
   (0, _react.useEffect)(function () {
     if (channelLastMessage && (channelLastMessage.id !== (lastMessage == null ? void 0 : lastMessage.id) || channelLastMessage.updated_at !== (lastMessage == null ? void 0 : lastMessage.updated_at))) {
       setLastMessage(channelLastMessage);
@@ -89,7 +96,7 @@ var ChannelPreviewWithContext = function ChannelPreviewWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 115,
       columnNumber: 10
     }
   });
@@ -106,7 +113,7 @@ var ChannelPreview = function ChannelPreview(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 124,
+      lineNumber: 131,
       columnNumber: 10
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_useLatestMessagePreview","_ChannelsContext","_ChatContext","_useTranslatedMessage","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ChannelPreviewWithContext","props","channel","client","Preview","_useState","useState","state","messages","length","_useState2","_slicedToArray2","lastMessage","setLastMessage","translatedLastMessage","useTranslatedMessage","_useState3","_useState4","forceUpdate","setForceUpdate","_useState5","countUnread","_useState6","unread","setUnread","latestMessagePreview","useLatestMessagePreview","channelLastMessage","channelLastMessageString","id","updated_at","useEffect","newUnreadCount","handleNewMessageEvent","event","message","parent_id","show_in_channel","handleUpdatedOrDeletedMessage","prevLastMessage","_event$message","listeners","on","forEach","l","unsubscribe","handleReadEvent","_event$user","_event$user2","user","userID","prev","listener","createElement","__self","__source","fileName","lineNumber","columnNumber","ChannelPreview","_useChatContext","useChatContext","_useChannelsContext","useChannelsContext","_extends2","exports"],"sources":["ChannelPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';\n\nimport { useLatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport {\n  ChannelsContextValue,\n  useChannelsContext,\n} from '../../contexts/channelsContext/ChannelsContext';\nimport { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';\n\nimport { useTranslatedMessage } from '../../hooks/useTranslatedMessage';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nexport type ChannelPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &\n  Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview'> & {\n    /**\n     * The previewed channel\n     */\n    channel: Channel<StreamChatGenerics>;\n  };\n\n/**\n * This component manages state for the ChannelPreviewMessenger UI component and receives\n * all props from the ChannelListMessenger component.\n */\nconst ChannelPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { channel, client, Preview } = props;\n\n  const [lastMessage, setLastMessage] = useState<\n    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>\n    | MessageResponse<StreamChatGenerics>\n    | undefined\n  >(channel.state.messages[channel.state.messages.length - 1]);\n\n  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(\n    lastMessage || ({} as MessageResponse<StreamChatGenerics>),\n  );\n\n  const [forceUpdate, setForceUpdate] = useState(0);\n  const [unread, setUnread] = useState(channel.countUnread());\n\n  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, translatedLastMessage);\n\n  const channelLastMessage = channel.lastMessage();\n  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;\n\n  useEffect(() => {\n    if (\n      channelLastMessage &&\n      (channelLastMessage.id !== lastMessage?.id ||\n        channelLastMessage.updated_at !== lastMessage?.updated_at)\n    ) {\n      setLastMessage(channelLastMessage);\n    }\n\n    const newUnreadCount = channel.countUnread();\n    setUnread(newUnreadCount);\n  }, [channelLastMessageString]);\n\n  useEffect(() => {\n    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {\n      const message = event.message;\n      if (message && (!message.parent_id || message.show_in_channel)) {\n        setLastMessage(event.message);\n        setUnread(channel.countUnread());\n      }\n    };\n\n    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {\n      setLastMessage((prevLastMessage) => {\n        if (prevLastMessage?.id === event.message?.id) {\n          return event.message;\n        }\n        return prevLastMessage;\n      });\n    };\n\n    const listeners = [\n      channel.on('message.new', handleNewMessageEvent),\n      channel.on('message.updated', handleUpdatedOrDeletedMessage),\n      channel.on('message.deleted', handleUpdatedOrDeletedMessage),\n    ];\n\n    return () => listeners.forEach((l) => l.unsubscribe());\n  }, []);\n\n  useEffect(() => {\n    const handleReadEvent = (event: Event<StreamChatGenerics>) => {\n      if (event.user?.id === client.userID) {\n        setUnread(0);\n      } else if (event.user?.id) {\n        setForceUpdate((prev) => prev + 1);\n      }\n    };\n\n    const listener = channel.on('message.read', handleReadEvent);\n    return () => listener.unsubscribe();\n  }, []);\n\n  return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;\n};\n\nexport type ChannelPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>> &\n  Pick<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>;\n\nexport const ChannelPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewProps<StreamChatGenerics>,\n) => {\n  const { client } = useChatContext<StreamChatGenerics>();\n  const { Preview } = useChannelsContext<StreamChatGenerics>();\n\n  return <ChannelPreviewWithContext {...{ client, Preview }} {...props} />;\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useLatestMessagePreview","_ChannelsContext","_ChatContext","_useTranslatedMessage","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ChannelPreviewWithContext","props","channel","client","Preview","_useState","useState","state","messages","length","_useState2","_slicedToArray2","lastMessage","setLastMessage","translatedLastMessage","useTranslatedMessage","_useState3","_useState4","forceUpdate","setForceUpdate","_useState5","countUnread","_useState6","unread","setUnread","latestMessagePreview","useLatestMessagePreview","channelLastMessage","channelLastMessageString","id","updated_at","useEffect","_client$on","on","unsubscribe","newUnreadCount","handleNewMessageEvent","event","message","parent_id","show_in_channel","handleUpdatedOrDeletedMessage","prevLastMessage","_event$message","listeners","forEach","l","handleReadEvent","_event$user","_event$user2","user","userID","prev","listener","createElement","__self","__source","fileName","lineNumber","columnNumber","ChannelPreview","_useChatContext","useChatContext","_useChannelsContext","useChannelsContext","_extends2","exports"],"sources":["ChannelPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';\n\nimport { useLatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport {\n  ChannelsContextValue,\n  useChannelsContext,\n} from '../../contexts/channelsContext/ChannelsContext';\nimport { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';\n\nimport { useTranslatedMessage } from '../../hooks/useTranslatedMessage';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nexport type ChannelPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &\n  Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview'> & {\n    /**\n     * The previewed channel\n     */\n    channel: Channel<StreamChatGenerics>;\n  };\n\n/**\n * This component manages state for the ChannelPreviewMessenger UI component and receives\n * all props from the ChannelListMessenger component.\n */\nconst ChannelPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { channel, client, Preview } = props;\n\n  const [lastMessage, setLastMessage] = useState<\n    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>\n    | MessageResponse<StreamChatGenerics>\n    | undefined\n  >(channel.state.messages[channel.state.messages.length - 1]);\n\n  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(\n    lastMessage || ({} as MessageResponse<StreamChatGenerics>),\n  );\n\n  const [forceUpdate, setForceUpdate] = useState(0);\n  const [unread, setUnread] = useState(channel.countUnread());\n\n  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, translatedLastMessage);\n\n  const channelLastMessage = channel.lastMessage();\n  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;\n\n  useEffect(() => {\n    const { unsubscribe } = client.on('notification.mark_read', () => {\n      setUnread(channel.countUnread());\n    });\n    return unsubscribe;\n  }, []);\n\n  useEffect(() => {\n    if (\n      channelLastMessage &&\n      (channelLastMessage.id !== lastMessage?.id ||\n        channelLastMessage.updated_at !== lastMessage?.updated_at)\n    ) {\n      setLastMessage(channelLastMessage);\n    }\n\n    const newUnreadCount = channel.countUnread();\n    setUnread(newUnreadCount);\n  }, [channelLastMessageString]);\n\n  useEffect(() => {\n    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {\n      const message = event.message;\n      if (message && (!message.parent_id || message.show_in_channel)) {\n        setLastMessage(event.message);\n        setUnread(channel.countUnread());\n      }\n    };\n\n    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {\n      setLastMessage((prevLastMessage) => {\n        if (prevLastMessage?.id === event.message?.id) {\n          return event.message;\n        }\n        return prevLastMessage;\n      });\n    };\n\n    const listeners = [\n      channel.on('message.new', handleNewMessageEvent),\n      channel.on('message.updated', handleUpdatedOrDeletedMessage),\n      channel.on('message.deleted', handleUpdatedOrDeletedMessage),\n    ];\n\n    return () => listeners.forEach((l) => l.unsubscribe());\n  }, []);\n\n  useEffect(() => {\n    const handleReadEvent = (event: Event<StreamChatGenerics>) => {\n      if (event.user?.id === client.userID) {\n        setUnread(0);\n      } else if (event.user?.id) {\n        setForceUpdate((prev) => prev + 1);\n      }\n    };\n\n    const listener = channel.on('message.read', handleReadEvent);\n    return () => listener.unsubscribe();\n  }, []);\n\n  return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;\n};\n\nexport type ChannelPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>> &\n  Pick<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>;\n\nexport const ChannelPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewProps<StreamChatGenerics>,\n) => {\n  const { client } = useChatContext<StreamChatGenerics>();\n  const { Preview } = useChannelsContext<StreamChatGenerics>();\n\n  return <ChannelPreviewWithContext {...{ client, Preview }} {...props} />;\n};\n"],"mappings":"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"}

package/lib/commonjs/components/MessageList/MessageList.js

@@ -131,7 +131,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
     overlay = props.overlay,
     reloadChannel = props.reloadChannel,
     ScrollToBottomButton = props.ScrollToBottomButton,
-    scrollToFirstUnreadThreshold = props.scrollToFirstUnreadThreshold,
     selectedPicker = props.selectedPicker,
     setFlatListRef = props.setFlatListRef,
     setMessages = props.setMessages,
@@ -175,27 +174,31 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var onStartReachedInPromise = (0, _react.useRef)(null);
   var onEndReachedInPromise = (0, _react.useRef)(null);
   var flatListRef = (0, _react.useRef)(null);
-  var initialScrollSet = (0, _react.useRef)(!initialScrollToFirstUnreadMessage);
+  var _useState3 = (0, _react.useState)(!initialScrollToFirstUnreadMessage),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isInitialScrollDone = _useState4[0],
+    setInitialScrollDone = _useState4[1];
   var channelResyncScrollSet = (0, _react.useRef)(true);
   var scrollToDebounceTimeoutRef = (0, _react.useRef)();
+  var initialScrollSettingTimeoutRef = (0, _react.useRef)();
   var messageIdToScrollToRef = (0, _react.useRef)();
   var messageIdLastScrolledToRef = (0, _react.useRef)();
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    hasMoved = _useState4[0],
-    setHasMoved = _useState4[1];
-  var _useState5 = (0, _react.useState)((_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(messageList)) == null ? void 0 : _getLastReceivedMessa.id),
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    lastReceivedId = _useState6[0],
-    setLastReceivedId = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    hasMoved = _useState6[0],
+    setHasMoved = _useState6[1];
+  var _useState7 = (0, _react.useState)((_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(messageList)) == null ? void 0 : _getLastReceivedMessa.id),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    scrollToBottomButtonVisible = _useState8[0],
-    setScrollToBottomButtonVisible = _useState8[1];
-  var _useState9 = (0, _react.useState)(),
+    lastReceivedId = _useState8[0],
+    setLastReceivedId = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    stickyHeaderDate = _useState10[0],
-    setStickyHeaderDate = _useState10[1];
+    scrollToBottomButtonVisible = _useState10[0],
+    setScrollToBottomButtonVisible = _useState10[1];
+  var _useState11 = (0, _react.useState)(),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    stickyHeaderDate = _useState12[0],
+    setStickyHeaderDate = _useState12[1];
   var stickyHeaderDateRef = (0, _react.useRef)();
   var channelRef = (0, _react.useRef)(channel);
   channelRef.current = channel;
@@ -227,11 +230,23 @@ var MessageListWithContext = function MessageListWithContext(props) {
     setScrollToBottomButtonVisible(false);
   }, [disabled]);
   (0, _react.useEffect)(function () {
-    var shouldMarkReadOnFirstLoad = !loading && channel && (!initialScrollToFirstUnreadMessage && channel.countUnread() > 0 || initialScrollToFirstUnreadMessage && channel.countUnread() <= scrollToFirstUnreadThreshold);
-    if (shouldMarkReadOnFirstLoad) {
+    var getShouldMarkReadAutomatically = function getShouldMarkReadAutomatically() {
+      if (loading || !channel) {
+        return false;
+      } else if (channel.countUnread() > 0) {
+        if (!initialScrollToFirstUnreadMessage) {
+          return true;
+        } else {
+          if (scrollToBottomButtonVisible) return false;
+          return isInitialScrollDone;
+        }
+      }
+      return false;
+    };
+    if (getShouldMarkReadAutomatically()) {
       markRead();
     }
-  }, [loading]);
+  }, [loading, scrollToBottomButtonVisible, isInitialScrollDone]);
   (0, _react.useEffect)(function () {
     var _lastReceivedMessage$;
     var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(messageList);
@@ -263,7 +278,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     };
     if (threadList || hasNoMoreRecentMessagesToLoad) {
       scrollToBottomIfNeeded();
-    } else if (!scrollToBottomButtonVisible) {
+    } else {
       setScrollToBottomButtonVisible(true);
     }
     if (!hasNoMoreRecentMessagesToLoad && flatListRef.current && messageListLengthBeforeUpdate.current === 0 && messageListLengthAfterUpdate < 10) {
@@ -282,28 +297,23 @@ var MessageListWithContext = function MessageListWithContext(props) {
       message = _ref2.item;
     if (!channel || !channel.initialized && !channel.offlineMode) return null;
     var lastRead = channel.lastRead();
-    var countUnread = channel.countUnread();
     function isMessageUnread(messageArrayIndex) {
-      if (lastRead && message.created_at) {
-        return lastRead < message.created_at;
-      } else {
-        var isLatestMessageSetShown = !!channel.state.messageSets.find(function (set) {
-          return set.isCurrent && set.isLatest;
-        });
-        return isLatestMessageSetShown && messageArrayIndex <= countUnread - 1;
+      var msg = messageList == null ? void 0 : messageList[messageArrayIndex];
+      if (lastRead && msg != null && msg.created_at) {
+        return lastRead < msg.created_at;
       }
+      return false;
     }
     var isCurrentMessageUnread = isMessageUnread(index);
-    var isLastMessageUnread = isMessageUnread(index + 1);
     var showUnreadUnderlay = isCurrentMessageUnread && scrollToBottomButtonVisible;
-    var insertInlineUnreadIndicator = showUnreadUnderlay && !isLastMessageUnread;
+    var insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1);
     if (message.type === 'system') {
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
         testID: "message-list-item-" + index,
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 553,
+          lineNumber: 560,
           columnNumber: 11
         }
       }, _react["default"].createElement(MessageSystem, {
@@ -312,14 +322,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 554,
+          lineNumber: 561,
           columnNumber: 13
         }
       })), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 556,
+          lineNumber: 563,
           columnNumber: 43
         }
       }));
@@ -330,7 +340,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 566,
+        lineNumber: 573,
         columnNumber: 36
       }
     }), _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -338,7 +348,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 567,
+        lineNumber: 574,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -346,7 +356,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 568,
+        lineNumber: 575,
         columnNumber: 11
       }
     }, _react["default"].createElement(Message, {
@@ -362,7 +372,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 569,
+        lineNumber: 576,
         columnNumber: 13
       }
     }))), !shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -370,14 +380,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 586,
+        lineNumber: 593,
         columnNumber: 36
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 588,
+        lineNumber: 595,
         columnNumber: 41
       }
     })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -385,7 +395,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 592,
+        lineNumber: 599,
         columnNumber: 9
       }
     }, shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -393,7 +403,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 595,
+        lineNumber: 602,
         columnNumber: 38
       }
     }), _react["default"].createElement(Message, {
@@ -409,7 +419,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 596,
+        lineNumber: 603,
         columnNumber: 11
       }
     })), !shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -417,14 +427,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 616,
+        lineNumber: 623,
         columnNumber: 36
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 618,
+        lineNumber: 625,
         columnNumber: 41
       }
     }));
@@ -536,7 +546,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
-    var isScrollAtBottom = offset <= 300;
+    var isScrollAtBottom = offset <= 150;
     var showScrollToBottomButton = !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
     var shouldMarkRead = !threadList && offset <= 0 && hasNoMoreRecentMessagesToLoad && channel.countUnread() > 0;
     if (shouldMarkRead) {
@@ -623,16 +633,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     resetPaginationTrackersRef.current();
   }, [messageList]);
   (0, _react.useEffect)(function () {
-    if (scrollToDebounceTimeoutRef.current) clearTimeout(scrollToDebounceTimeoutRef.current);
     scrollToDebounceTimeoutRef.current = setTimeout(function () {
-      var _channelRef$current;
+      if (initialScrollToFirstUnreadMessage) {
+        initialScrollSettingTimeoutRef.current = setTimeout(function () {
+          setInitialScrollDone(true);
+        }, 500);
+      }
       var messageIdToScroll = messageIdToScrollToRef.current;
-      var countUnread = (_channelRef$current = channelRef.current) == null ? void 0 : _channelRef$current.countUnread();
-      if (!initialScrollSet.current && initialScrollToFirstUnreadMessage && countUnread > scrollToFirstUnreadThreshold) {
-        if (messageList.length >= countUnread) {
-          messageIdToScroll = messageList[countUnread - 1].id;
-        }
-      } else if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
+      if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
         messageIdToScroll = targetedMessage;
       }
       if (!messageIdToScroll) return;
@@ -647,14 +655,13 @@ var MessageListWithContext = function MessageListWithContext(props) {
         });
         messageIdToScrollToRef.current = undefined;
         messageIdLastScrolledToRef.current = messageIdToScroll;
-        if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
-          initialScrollSet.current = true;
-        } else {
-          setTargetedMessage(messageIdToScroll);
-        }
       }
     }, 150);
-  }, [channel.initialized, messageList, targetedMessage, initialScrollToFirstUnreadMessage]);
+    return function () {
+      clearTimeout(scrollToDebounceTimeoutRef.current);
+      clearTimeout(initialScrollSettingTimeoutRef.current);
+    };
+  }, [targetedMessage, initialScrollToFirstUnreadMessage, messageList]);
   var messagesWithImages = legacyImageViewerSwipeBehaviour && messageList.filter(function (message) {
     var isMessageTypeDeleted = message.type === 'deleted';
     if (!isMessageTypeDeleted && message.attachments) {
@@ -718,7 +725,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 970,
+        lineNumber: 971,
         columnNumber: 7
       }
     }, _react["default"].createElement(EmptyStateIndicator, {
@@ -726,7 +733,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 974,
+        lineNumber: 975,
         columnNumber: 9
       }
     }));
@@ -737,14 +744,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 982,
+        lineNumber: 983,
         columnNumber: 7
       }
     }, _react["default"].createElement(FooterComponent, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 983,
+        lineNumber: 984,
         columnNumber: 9
       }
     }));
@@ -755,14 +762,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 991,
+        lineNumber: 992,
         columnNumber: 7
       }
     }, _react["default"].createElement(HeaderComponent, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 992,
+        lineNumber: 993,
         columnNumber: 9
       }
     }));
@@ -774,7 +781,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1002,
+        lineNumber: 1003,
         columnNumber: 7
       }
     }, _react["default"].createElement(LoadingIndicator, {
@@ -782,7 +789,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1003,
+        lineNumber: 1004,
         columnNumber: 9
       }
     }));
@@ -794,7 +801,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1010,
+        lineNumber: 1011,
         columnNumber: 30
       }
     });
@@ -803,7 +810,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1011,
+        lineNumber: 1012,
         columnNumber: 46
       }
     });
@@ -824,7 +831,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1027,
+      lineNumber: 1028,
       columnNumber: 5
     }
   }, _react["default"].createElement(FlatList, (0, _extends2["default"])({
@@ -860,7 +867,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1031,
+      lineNumber: 1032,
       columnNumber: 7
     }
   })), !loading && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -868,28 +875,28 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1076,
+      lineNumber: 1077,
       columnNumber: 11
     }
   }, _react["default"].createElement(StickyHeaderComponent, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1077,
+      lineNumber: 1078,
       columnNumber: 13
     }
   })), !disableTypingIndicator && TypingIndicator && _react["default"].createElement(TypingIndicatorContainer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1080,
+      lineNumber: 1081,
       columnNumber: 13
     }
   }, _react["default"].createElement(TypingIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1081,
+      lineNumber: 1082,
       columnNumber: 15
     }
   })), _react["default"].createElement(ScrollToBottomButton, {
@@ -899,14 +906,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1084,
+      lineNumber: 1085,
       columnNumber: 11
     }
   })), _react["default"].createElement(NetworkDownIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1091,
+      lineNumber: 1092,
       columnNumber: 7
     }
   }));
@@ -1013,7 +1020,7 @@ var MessageList = function MessageList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1149,
+      lineNumber: 1150,
       columnNumber: 5
     }
   }));