[🐛] Bug - Thread navigation in Pinned Messages tab shows stale thread data intermittently

[virajpsimformsolutions]

Issue

When navigating between different threads from the Pinned Messages tab, the Thread component occasionally displays messages from the previously viewed thread instead of the newly selected thread. This issue occurs intermittently (approximately 5 out of 10 times) even when using closeThreadOnDismount={true} on the Thread component.

The problem appears to be related to thread state not being properly cleared or the Channel component not re-mounting with the correct thread data when navigating between threads.

Steps to reproduce

Steps to reproduce the behavior:

1. Login as a member to the app
2. Navigate to Groups → Pinned Messages tab
3. Click on a thread (Thread A) containing pinned messages
4. View the messages of Thread A - displays correctly
5. Navigate back to the Pinned Messages list
6. Click on a different thread (Thread B)
7. Observe that sometimes Thread B's messages are displayed, but other times Thread A's messages are still shown in the list

Expected behavior

Each time a different thread is selected from the Pinned Messages tab, the ThreadDetailScreen should display the messages for the newly selected thread, not the previously viewed one.

Project Related Information

Customization

Click To Expand

The Thread component is used within a Channel component with the following configuration:

<Channel
  enforceUniqueReaction
  Gallery={CustomGallery}
  channel={channel}
  thread={thread}
  threadList
  isAttachmentEqual={(
    prevAttachment: Attachment<DefaultStreamChatGenerics>,
    nextAttachment: Attachment<DefaultStreamChatGenerics>,
  ) => {
    const attachmentEqual = prevAttachment?.customField === nextAttachment?.customField;
    if (!attachmentEqual) return false;
    return true;
  }}
  supportedReactions={supportedReactions}
  hasCommands={false}
  MessageAvatar={Avatar}
  DateHeader={() => null}
  MessageSimple={MessageSimpleComponent}
  doImageUploadRequest={doImageUploadRequest}
  AutoCompleteSuggestionList={
    channel?.type !== "support" || !isMember ? CustomSuggestion : () => <></>
  }
  additionalKeyboardAvoidingViewProps={{
    behavior: "padding",
    contentContainerStyle: styles.threadListContainer,
  }}
  // @ts-ignore
  KeyboardCompatibleView={KeyboardAvoidingView}
  // Note: to resolved extra space issue below the keyboard [android specific]
  keyboardVerticalOffset={0}
  handleReaction={handleReaction}
  messageActions={messageActions}
  handleAttachButtonPress={onAttachButton}
  AttachButton={() => <CustomAttachButton onPress={onAttachButton} />}
>
  <Thread
    additionalMessageInputProps={{
      ShowThreadMessageInChannelButton: () => null,
      SendButton: (props) => (
        <CustomSendButton
          {...props}
          onResolved={onResolved}
          onSendMessageSuccessfully={onSendMessageSuccessfully}
        />
      ),
      additionalTextInputProps: {
        multiline: true,
        placeholder: Strings.ThreadDetailScreen.addReply,
        placeholderTextColor: Colors[theme].gray27,
        ...testProps(TestID.threadDetailScreen.messageInput),
      },
    }}
    additionalMessageListProps={additionalMessageListProps}
    closeThreadOnDismount={true}
    onThreadDismount={() => {
      setThread?.(undefined);
    }}
  />
</Channel>

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:

{
  "dependencies": {
    "stream-chat-expo": "^5.4.3",
    "stream-chat-react-native-core": "^5.4.3",
    // ... other dependencies
  }
}

react-native info output:

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 1.07 GB / 32.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
  Yarn: 1.22.19 - ~/.yarn/bin/yarn
  npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
Managers:
  CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
  Android SDK:
    API Levels: 23, 26, 27, 28, 29, 30, 31, 33, 34
    Build Tools: 30.0.3, 31.0.0, 33.0.0, 33.0.1, 34.0.0
    System Images: android-26 | Google APIs ARM 64 v8a, android-29 | Google APIs ARM 64 v8a, android-30 | Google APIs ARM 64 v8a, android-31 | Google Play ARM 64 v8a, android-33 | Google APIs ARM 64 v8a, android-34 | Google APIs ARM 64 v8a
    Android NDK: 23.1.7779620
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode: 15.0/15A240d - /usr/bin/xcodebuild
Languages:
  Java: 11.0.19 - /usr/bin/javac
npmPackages:
  @react-native-community/cli: Not Found
  react: 18.2.0 => 18.2.0
  react-native: 0.72.6 => 0.72.6
  react-native-macos: Not Found
npmGlobalPackages:
  *react-native*: Not Found

• 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:
  • 5.4.3 (via stream-chat-expo)
• Device/Emulator info:
  • I am using a physical device
  • OS version: iOS 17.0, Android 13
  • Device/Emulator: iPhone 14 Pro, Samsung Galaxy S22

Additional context

This issue persists even after implementing workarounds such as adding a key prop to the Channel component to force re-mounting when the thread changes. The intermittent nature suggests a race condition or caching issue within the Thread component's state management.

Screenshots

Click To Expand

No screenshots available at this time.