[🐛] iOS. deletedMessagesVisibilityType='never' breaks FlatList on message delete

[nemrosim]

Issue

Adding deletedMessagesVisibilityType={'never'} to Channels component...

stream-chat-react-native/examples/ExpoMessaging/app/channel/[cid]/thread/[cid]/index.tsx

Lines 16 to 27 in 4912ce9

	return (
	<SafeAreaView>
	<Stack.Screen options={{ title: 'Thread Screen' }} />
	<Channel
	audioRecordingEnabled={true}
	channel={channel}
	keyboardVerticalOffset={headerHeight}
	thread={thread}
	threadList
	>
	<View

  return (
    <SafeAreaView>
      <Stack.Screen options={{ title: 'Thread Screen' }} />

      <Channel
        audioRecordingEnabled={true}
        channel={channel}
        keyboardVerticalOffset={headerHeight}
        thread={thread}
        threadList
+     deletedMessagesVisibilityType={'never'}
      >

... will break list on iOS devices after deleting the only last thread message.

Broken.flash.list.mp4

If wait a bit we will get an infinite loop and a warning in console:

 Message pagination request failed with error [Error: StreamChat error code 9: GetReplies failed with error: "Too many requests, check response headers for more information."]

After removing maintainVisibleContentPosition styles in MessageList.tsx file -> issue will be gone.

stream-chat-react-native/package/src/components/MessageList/MessageList.tsx

Lines 1228 to 1245 in e2a01e9

	<FlatList
	contentContainerStyle={flatListContentContainerStyle}
	/** Disables the MessageList UI. Which means, message actions, reactions won't work. */
	data={processedMessageList}
	extraData={disabled}
	inverted={shouldApplyAndroidWorkaround ? false : inverted}
	ItemSeparatorComponent={WrappedItemSeparatorComponent}
	keyboardShouldPersistTaps='handled'
	keyExtractor={keyExtractor}
	ListFooterComponent={ListFooterComponent}
	ListHeaderComponent={ListHeaderComponent}
	/**
	If autoscrollToTopThreshold is 10, we scroll to recent only if before the update, the list was already at the
	bottom (10 offset or below).
	minIndexForVisible = 1 means that beyond the item at index 1 we will not change the position on list updates,
	however it is not used when autoscrollToTopThreshold = 10.
	*/
	maintainVisibleContentPosition={maintainVisibleContentPosition}

Steps to reproduce

Steps to reproduce the behavior:

1. Go to Main Chat App (iOS simulator/device. No issues on Android)
2. Click on any message, reply in Thread, and delete that only reply message.
3. See error
   etc...

Expected behavior

User should not see any UI glitches, infinite scroll event and there should be no pagination request failed with error warnings.

OK.mp4

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• 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 15.4.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 188.75 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 8.19.4
    path: ~/Documents/Projects/CHAT-DEMO/stream-chat-react-native/node_modules/.bin/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/artemdiashkin/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: ^18.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.1
    wanted: 0.77.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • 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:
  • e.g. 5.4.3
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

Broken.flash.list.mp4

---

[isekovanic]

Hi @nemrosim , thanks for reporting this !

This PR should fix the issue. I'll merge this later today.

[nemrosim]

@isekovanic Thank you. But by "solving" this issue new one appeared:

When user press on the "thread" and there are >1 messages -> those will be hidden.
Solution: Make changes in the stream-chat-react-native-core/src/components/MessageList/MessageList.tsx component

- maintainVisibleContentPosition={maintainVisibleContentPosition}
+ maintainVisibleContentPosition={Platform.OS === 'ios' ? undefined: maintainVisibleContentPosition}

NOTE: Sometimes threads will show messages from the previously opened thread too. Check video from the examples/ExpoMessaging project.

I created a separate ticket for this: #3155

Stream.chat.expo.mp4