[🐛] 🔥 Thread main message's reactions are out-of-sync

[jakubdrozdek]

Issue

The main message within the thread view is not updated properly - as long as we stay on the thread view, we don't see real-time changes to reactions. To see them, we need to refresh the thread or write a message.

What's more, the default thread footer component doesn't allow to press on the main message, making it impossible to add reactions to it.

Steps to reproduce

Steps to reproduce the behavior:

1. Open a message in the thread view.
2. Try to react to the main message a. Long press on the main message, or try to add a reaction to it. b. Alternatively, as another user, react to the message in the main chat view.
3. See that the thread's main reaction counters do not update at all.

Expected behavior

Users should be allowed to react to the thread's main message, and they should see the reaction counters update in real time.

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:

{
  "name": "stream-chat-react-native-template-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-camera-roll/camera-roll": "^5.2.3",
    "@react-native-community/netinfo": "^9.3.7",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/stack": "^6.3.11",
    "@stream-io/flat-list-mvcp": "^0.10.2",
    "react": "18.2.0",
    "react-native": "0.71.1",
    "react-native-document-picker": "^8.1.3",
    "react-native-dotenv": "^3.4.7",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-haptic-feedback": "^1.14.0",
    "react-native-image-crop-picker": "^0.39.0",
    "react-native-image-resizer": "^1.4.5",
    "react-native-pager-view": "^6.3.0",
    "react-native-reanimated": "^2.14.4",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.19.0",
    "react-native-share": "^8.1.0",
    "react-native-svg": "^13.7.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-video": "6.0.0-alpha.1",
    "stream-chat-react-native": "^5.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

react-native info output:

info Fetching system and libraries information...
System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Pro
    Memory: 86.33 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    Watchman: 2022.11.14.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: Not Found
  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.3 AI-233.14808.21.2331.11709847
    Xcode: 15.4/15F31d - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.10 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.1 => 0.71.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

• Platform that you're experiencing the issue on:
  • [x] iOS
  • [x] 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.9.0
• 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

---

[jakubdrozdek]

I was able to fix the issue by updating the following file: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Channel/hooks/useCreateThreadContext.ts#L41

and adding the following dependency to the useMemo hook:

const threadLatestReactions = thread?.latest_reactions

As for the main message being unpressable, I removed preventPress from here: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Thread/components/ThreadFooterComponent.tsx#L74

[oddanderson]

+1

[stream-ci-bot]

:tada: This issue has been resolved in version 5.33.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: