Practical hacks for delightful interactions

on YouTube ↗23m

" summary

A live photo viewer implements a shared‑element “third element” transition that runs smoothly even on a $50 Android and a four‑year iPhone. It wires Animated + useNativeDriver for 60fps fire‑and‑forget animations, uses InteractionManager and early-start touch work to hide setup latency, and finally abuses a scroll view as gesture recognizer to get main‑thread touch responsiveness today. Limitations: native driver lacks flex/position/image‑resize support so heavy precomputed math is required, and driving gestures on the native thread shows noticeable iOS latency. Libraries to watch: react-native-interactable and react-native-gesture-handler.

AI-written summary · about

" chapters (42)

1. 0:00Introduction
2. 0:52Live Demo
3. 1:05Close Button
4. 1:17Beautiful UI
5. 1:44Third Element Transition
6. 2:00Horizontal Scroll View
7. 2:14General Hacks
8. 2:47Animating
9. 3:00React Native Thread
10. 3:18UI Thread
11. 3:33JavaScript
12. 4:07Delegate
13. 4:33Native Driver
14. 4:48Native Driver Limitations
15. 5:03React Native Threads
16. 6:37Squish View
17. 6:58Shared Transition
18. 7:56The Great Finger
19. 8:13Touch Events
20. 8:45Example
21. 9:25How does it work
22. 10:01If only
23. 10:14What does the client expect
24. 10:43Response time
25. 11:05Touchend
26. 11:46Smoothing Touchend
27. 12:18Latency
28. 12:34Android
29. 12:58Initial Perception Delay
30. 13:50Interaction Manager
31. 15:30React Native Interactable
32. 16:07React Native Gesture Handler
33. 17:08React Native Hacks
34. 17:56Animated Scroll View
35. 19:02Behavior
36. 19:19Paging
37. 19:32Scroll view
38. 19:47Follow through
39. 20:26Summary
40. 20:42The 3 hacks
41. 21:36Should we feel bad
42. 21:50Own your hacks

" related talks

• 28mReact Native Touch & GestureKrzysztof Magiera · React Amsterdam 2017
• 21mMicrointeractions: The Little Big ThingsKacper Kapuściak · Chain React 2024
• 22mCan it be done in React NativeWilliam Candillon · App.js Conf 2019
• 30mMicrointeractions & Animations in React Native: Help users understand the UICatalin Miron · React Day Berlin 2019
• 30mLiving in an async world of React NativeKrzysztof Magiera · ReactiveConf 2016
• 27mDeclarative future of gestures and animations in React NativeKrzysztof Magiera · ReactEurope 2018
• 27mMoving Beyond Animations to User Interactions at 60 FPS in React NativeTal Kol · React Conf 2017
• 29mIt all starts with navigationKrzysztof Magiera · React Native EU 2018