🔥 [🐛] initialScrollToFirstUnreadMessage does not work

[ricardojmf]

Issue

I'm trying to check the default InlineUnreadIndicator but with no success, it does not appear (even if I declare that I'm using it). I research your code base and saw that for it to appear the scrollToBottomButtonVisible should be true which mean that we have to open the chat with lots of unread messages pointed to the first one so that the scroll to button appears on the screen.

Unfortuanatelly this also did not work, I've added the prop initialScrollToFirstUnreadMessage to my <MessageList />component but it does not scroll to the first unread message (I've tested with 30 and 40 unread mesages)

Steps to reproduce

Steps to reproduce the behavior:

Having this config:

<MessageList
  initialScrollToFirstUnreadMessage
  InlineUnreadIndicator={InlineUnreadIndicator}
/>

1. open up a chat with 40 unread messages
2. wait for it to point to the first unread message
3. it does not scroll
4. it stays at the bottom (most recent message)

Expected behavior

1. open up a chat with 40 unread messages
2. wait for it to point to the first unread message
3. it scrolls
4. the InlineUnreadIndicator should appear

Project Related Information

Customization

Click To Expand

<MessageList
  initialScrollToFirstUnreadMessage
  InlineUnreadIndicator={InlineUnreadIndicator}
/>

Offline support

• [x] I have enabled offline support.
• [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1 Pro
  Memory: 255.31 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.2
    path: ~/.nvm/versions/node/v20.12.2/bin/node
  Yarn: Not Found
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v20.12.2/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/ricardo.figueiredo/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

• Platform that you're experiencing the issue on:
  • [] iOS
  • [ ] Android
  • [x] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • 5.33.1
• Device/Emulator info:
  • [x] I am using a physical device
  • Device/Emulator: iPhone 13

Additional context

Screenshots

Click To Expand

---

[sergeyzhukov]

same issue

[isekovanic]

Hi @ricardojmf,

Can you please pass this property to the Channel component rather than MessageList ? Despite it being available in both Channel and MessageList, it does certain actions within the Channel whenever this happens.

The reason why the scrolling doesn't happen for you whenever you have 30-40 messages is because the pagination window is lower and the channel is not properly loaded around the message you want to scroll to.

Handling it through the Channel component should properly handle these cases.

[WeAreArne]

@isekovanic, I tried this in our application (using version 5.23.2) and the scroll does not occur. Even with only a few messages (around 10) and more (around 25), it stays at the most recent message in the chat.

[isekovanic]

Hi @WeAreArne ,

That's quite odd. Can you check if this is also happening on one of the newer versions of the SDK ? The reason being, there've been quite a lot of updates since version 5.23.2 and a lot of fixes to various things as well. It is possible that this got resolved in one of the newer versions.

[WeAreArne]

Hi @isekovanic, I tried updating to the most recent version, but this still doesn't seem to fix the issue.

[isekovanic]

Hi @WeAreArne ,

Could you please have a look at version v5.42.0 ? It should fix your issues (or if it does not we can revisit this again).

Here's the changelod: https://github.com/GetStream/stream-chat-react-native/releases/tag/v5.42.0

[isekovanic]

Hi again @WeAreArne ,

It seems that a regression was introduced in version 5.42.0 with an unrelated change - if you do bump please do it to version 5.42.1. Sorry for the inconvenience.

Changelog here: https://github.com/GetStream/stream-chat-react-native/commit/75c39072c2e5f8a570f394b337cce366b82ac756

[khushal87]

Hey @ricardojmf @sergeyzhukov, I am working on the improvements and mark as an unread feature as well, and this will soon be released in the v6 version. We will update you once it's done. Thanks 😄

[khushal87]

I will close this issue in favour of the new fixes as mentioned by @isekovanic and the new mark as unread feature and message list improvements on v6. Please feel free to reopen it if you face any issues. Currently we are not able to tirage the issue anymore. Thanks 😄