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

jakubdrozdek commented 5 months ago

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:

Open a message in the thread view.
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.
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

```typescript jsx # 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`: ```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 commented 5 months ago

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 commented 4 months ago

+1

stream-ci-bot commented 4 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

GetStream / stream-chat-react-native