fix: add pointerEvents to ReactionList

[aharwood9]

🎯 Goal

Currently ReactionList has several Views that are take up basically the full screen width. These views have a height that is based on the reactionSize. Using the default reactionSize, these take up roughly half the size of the MessageContent size if the message is a single line of text.

This absolute overlay then blocks the MessageContent components TouchableOpacity. Thus, the goal is to fix #2021 by making ReactionList not block the TouchableOpacity in MessageContent. FYI I couldn't repo the hit box moving when adding a reaction, only the blocking of long press on both iOS and Android.

🛠 Implementation details

Update the View and Svg to have pointerEvents that don't block the underlying TouchableOpacity from MessageContnet while maintaining the TouchOpacity of the ReactionList functionality.

🎨 UI Changes

iOS & Android

Screen.Recording.2023-07-24.at.16.37.20.mov

🧪 Testing

☑️ Checklist

• I have signed the Stream CLA (required)
• PR targets the develop branch
• Documentation is updated
• New code is tested in main example apps, including all possible scenarios
  • SampleApp iOS and Android
  • Expo iOS and Android

[khushal87]

Hey @aharwood9 thanks for fixing the bug. The solution works after testing. 🚀

The only thing here is if you can remove the pointerEvents from the View as per suggested above. It seems unnecessary. Thanks 😄

[aharwood9]

Hey @aharwood9 thanks for fixing the bug. The solution works after testing. 🚀

The only thing here is if you can remove the pointerEvents from the View as per suggested above. It seems unnecessary. Thanks 😄

Nice catch 👍 committed your suggestion

[stream-ci-bot]

🎉 This PR is included in version 5.18.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀