Реализация реакций на сообщения в чате мобильного приложения
Долгое нажатие на сообщение → пикер эмодзи → анимированная реакция под сообщением. Выглядит просто, но в продакшене всплывают детали: два пользователя реагируют одновременно — счётчик дублируется. Или пикер перекрывается клавиатурой. Или анимация прыгает потому что высота ячейки пересчитывается без контекста.
Как устроены данные
Таблица message_reactions: message_id, user_id, emoji (unicode-символ или short code), created_at, UNIQUE (message_id, user_id, emoji). Индекс по message_id — он нужен для быстрого получения всех реакций к сообщению.
В ответе API сообщение включает агрегированные реакции:
"reactions": [
{ "emoji": "👍", "count": 5, "reacted_by_me": true },
{ "emoji": "❤️", "count": 2, "reacted_by_me": false }
]
Группировка SELECT emoji, COUNT(*), bool_or(user_id = $current_user_id) — выполняется быстро при индексе по message_id. При большом числе реакций (тысячи) — кэш в Redis Hash с инвалидацией.
При добавлении/удалении реакции сервер рассылает WS-событие reaction.updated с message_id и обновлённым массивом реакций всем участникам conversation.
UI и анимации
Пикер эмодзи по long press
На iOS: UILongPressGestureRecognizer с minimumPressDuration = 0.35. При срабатывании — вычисляем позицию ячейки в superview координатах через convert(cell.frame, to: view), показываем кастомный UIView-попап с quick-reactions (6-8 эмодзи) позиционированный над сообщением. Haptic feedback через UIImpactFeedbackGenerator(style: .medium).impactOccurred().
В SwiftUI — .onLongPressGesture(minimumDuration: 0.35) + overlay с кастомным ReactionPickerView через ZStack.
На Android (Jetpack Compose): pointerInput(Unit) { detectTapGestures(onLongPress = {...}) } — показываем Popup с Row быстрых реакций.
Полный emoji-picker (если нужен) — библиотека emoji-picker-react для Flutter Web, EmojiPicker для Android (библиотека emoji-picker-android), кастомная UICollectionView по категориям для iOS.
Отображение реакций под сообщением
Горизонтальный flow-ряд кнопок-пилюль: [emoji + count]. На iOS: UICollectionView с кастомным UICollectionViewFlowLayout с переносом строк (estimatedItemSize = UICollectionViewFlowLayout.automaticSize). Либо проще — UIStackView с isLayoutMarginsRelativeArrangement и ручным wrapping.
В Compose: FlowRow из accompanist-flowlayout (или нативный FlowRow из Compose Foundation 1.5+) — удобнее.
Критичный момент: при добавлении новой реакции высота ячейки может увеличиться (добавился новый ряд). Без правильной анимации список дёргается. В UIKit — performBatchUpdates с reloadItems(at:) + UIView.animate. В Compose — animateContentSize() на контейнере реакций.
Анимация добавления
Новая реакция: иконка «появляется» с scale 0.3 → 1.2 → 1.0 + opacity 0 → 1. В UIKit — CASpringAnimation на transform.scale. В Compose — animate*AsState или AnimatedVisibility с кастомным EnterTransition.
Инкремент счётчика: число «прокручивается» вверх (старое уходит вверх, новое появляется снизу). UIKit — CATransition(type: .push, subtype: .fromTop) на UILabel. Compose — AnimatedContent с slideInVertically + slideOutVertically.
Список реагировавших
Тап на реакцию-пилюлю → bottom sheet со списком пользователей. iOS: UISheetPresentationController (iOS 15+) с detents: [.medium()]. Android: ModalBottomSheet в Material3. Данные: GET /messages/{id}/reactions?emoji=👍 → массив {user_id, display_name, avatar_url}.
Своя реакция
Если reacted_by_me = true — пилюля подсвечена (акцентный border или background). Тап по ней — удаляет реакцию (toggle). Optimistic update: сразу меняем UI, откатываем при ошибке.
Объём работ
Реакции как отдельная фича — 1-3 дня при наличии готового чата. Включает: API endpoint (add/remove), WS-ивент, UI-компонент реакций, пикер, анимации, список реагировавших. Стоимость зависит от платформы (iOS, Android или обе) и наличия существующего WS-протокола в проекте.