Implementing Message Reactions in Mobile Chat
Long-press on message → emoji picker → animated reaction under message. Seems simple, but production reveals details: two users react simultaneously — counter duplicates. Or picker overlaps keyboard. Or animation jumps because cell height recalculates without context.
How Data Is Organized
Table message_reactions: message_id, user_id, emoji (unicode symbol or short code), created_at, UNIQUE (message_id, user_id, emoji). Index on message_id — needed for fast fetching all reactions to message.
In API response message includes aggregated reactions:
"reactions": [
{ "emoji": "👍", "count": 5, "reacted_by_me": true },
{ "emoji": "❤️", "count": 2, "reacted_by_me": false }
]
Grouping SELECT emoji, COUNT(*), bool_or(user_id = $current_user_id) — executes fast with index on message_id. For huge reaction counts (thousands) — cache in Redis Hash with invalidation.
When adding/removing reaction, server broadcasts WebSocket event reaction.updated with message_id and updated reaction array to all conversation participants.
UI and Animations
Emoji Picker on Long Press
On iOS: UILongPressGestureRecognizer with minimumPressDuration = 0.35. On trigger — compute cell position in superview coordinates through convert(cell.frame, to: view), show custom UIView popup with quick-reactions (6-8 emoji) positioned above message. Haptic feedback through UIImpactFeedbackGenerator(style: .medium).impactOccurred().
In SwiftUI — .onLongPressGesture(minimumDuration: 0.35) + overlay with custom ReactionPickerView through ZStack.
On Android (Jetpack Compose): pointerInput(Unit) { detectTapGestures(onLongPress = {...}) } — show Popup with Row of quick-reactions.
Full emoji-picker (if needed) — emoji-picker-react library for Flutter Web, EmojiPicker for Android (library emoji-picker-android), custom UICollectionView by categories for iOS.
Displaying Reactions Under Message
Horizontal flow row of pills: [emoji + count]. On iOS: UICollectionView with custom UICollectionViewFlowLayout with line wrapping (estimatedItemSize = UICollectionViewFlowLayout.automaticSize). Or simpler — UIStackView with isLayoutMarginsRelativeArrangement and manual wrapping.
In Compose: FlowRow from accompanist-flowlayout (or native FlowRow from Compose Foundation 1.5+) — more convenient.
Critical moment: adding new reaction may increase cell height (new row added). Without proper animation, list jerks. In UIKit — performBatchUpdates with reloadItems(at:) + UIView.animate. In Compose — animateContentSize() on reaction container.
Add Animation
New reaction: icon "appears" with scale 0.3 → 1.2 → 1.0 + opacity 0 → 1. In UIKit — CASpringAnimation on transform.scale. In Compose — animate*AsState or AnimatedVisibility with custom EnterTransition.
Counter increment: number "scrolls" up (old goes up, new appears down). UIKit — CATransition(type: .push, subtype: .fromTop) on UILabel. Compose — AnimatedContent with slideInVertically + slideOutVertically.
List of Reactors
Tap on reaction pill → bottom sheet with user list. iOS: UISheetPresentationController (iOS 15+) with detents: [.medium()]. Android: ModalBottomSheet in Material3. Data: GET /messages/{id}/reactions?emoji=👍 → array {user_id, display_name, avatar_url}.
Own Reaction
If reacted_by_me = true — pill is highlighted (accent border or background). Tap it — removes reaction (toggle). Optimistic update: change UI immediately, rollback on error.
Scope of Work
Reactions as separate feature — 1-3 days with ready chat. Includes: API endpoint (add/remove), WebSocket event, reactions UI component, picker, animations, list of reactors. Cost depends on platform (iOS, Android, or both) and existing WebSocket protocol in project.