Свайп для удаления в списке
Вопрос
Как реализовать свайп строки списка для удаления, чтобы он был плавным и не конфликтовал с прокруткой?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Gesture Handler `Gesture.Pan()` с `activeOffsetX`, чтобы вертикальная прокрутка не перехватывалась
Смещение в shared value, стиль через `useAnimatedStyle` на UI-потоке
Порог и скорость в `onEnd`: довести до конца или вернуть пружиной
Удаление через `runOnJS` после завершения анимации, layout animation для схлопывания
Подтверждение или отмена удаления (undo), доступная альтернатива свайпу
Совместимость с переиспользованием строк в FlashList
Что могут спросить следом
- Как сделать, чтобы одновременно была открыта только одна строка?
- Что делать с доступностью для свайпа?
Разбор
Образцовый ответ: «Использую Gesture Handler и Reanimated. Жест Pan с activeOffsetX, например [-10, 10], активируется только при горизонтальном движении, поэтому вертикальная прокрутка списка не ломается. Смещение строки храню в shared value и меняю в onChange, стиль считается на UI-потоке. В onEnd смотрю на смещение и скорость: если прошли порог, довожу до края через withTiming, иначе возвращаю пружиной. После завершения анимации через runOnJS вызываю удаление, а схлопывание строки делаю layout animation. Даю отмену удаления и альтернативу свайпу через меню, потому что свайп недоступен для части пользователей. В FlashList сбрасываю смещение при смене id строки, иначе открытое состояние переедет к другой строке»
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.