feat(reactions): add emoji keyboard [WPB-4292] #2310
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Submission Checklist for internal contributors
The PR Title
SQPIT-764
The PR Description
What's new in this PR?
Issues
Users can only select reaction emojis from a small set of hardcoded reactions.
Solutions
Add a full emoji keyboard / emoji picker.
As I wrote down in this article. I couldn't find a perfect emoji picker with recent emoji, search, compose support, etc.
I went with the Google-provided Emoji2 Picker, which doesn't have search support, nor first-class compose support, but looks nice and it's simple to use.
The issue with scrolling
Material3's
ModalBottomSheet
does not support disabling the swipe up/down gesture. The swipe gesture conflicts with the emoji picker scroll, making it almost useless.After some days fiddling with it, I attempted to use different bottom sheets using Compose, until I eventually gave up and switched to
BottomSheetDialog
(not Compose).This one was easy to enable/disable the dragging using the
BottomSheetBehavior
. But in order to keep it draggable by the top handle, required the creation of aDraggableByHandleBottomSheetBehavior
, which checks if the touch is inside the DragHandle or not.Also, one dark theme definition was needed in order to get the right contrasting text colors in the bottom sheet / emoji picker.
Testing
Manually tested
Attachments
Emoji.Picker.webm
PR Post Merge Checklist for internal contributors
References
feat(conversation-list): Sort conversations by most emojis in the title #SQPIT-764
.