React Native Touch & Gesture

on YouTube ↗28m

" summary

Explains why React Native’s JS responder and native gesture recognizers conflict, shows a concrete library that replaces them, and demonstrates that moving animation work to the UI thread via the native driver yields smooth visuals (60fps vs 17fps). Describes problems (cross-thread negotiation, inability to hook JS pan responder into native Animated), presents gesture-handler components (tap, pan, long press, native-view-wrapper), and notes the library lands with native animated event support and real examples that run and remove jank.

AI-written summary · about

" chapters (10)

1. 0:00Intro
2. 2:41JS RESPONDER SYSTEM
3. 6:36PAN RESPONDER
4. 7:51SWITCH
5. 8:51COLLAPSABLE HEADERS
6. 13:45INTERACTIVE DRAWER
7. 18:08VIEWS WITH NATIVE GESTURE RECOGNIZERS
8. 19:48NATIVE DRIVER
9. 22:19INTERACTABLE
10. 24:23GESTURE HANDLERS INTERACTION

" related talks

• 35mAnimations and gesture handling in React Native and native languagesMichał Osadnik · Mobilization 8
• 10mReact Native, your UX superheroNoemi Rozpara · React Alicante 2019
• 27mDeclarative future of gestures and animations in React NativeKrzysztof Magiera · ReactEurope 2018
• 29mIt all starts with navigationKrzysztof Magiera · React Native EU 2018
• 34mGestures here. Gestures there. Gestures everywhere!Kyle Poole, Thomas Bruketta · Chain React 2017
• 30mLiving in an async world of React NativeKrzysztof Magiera · ReactiveConf 2016
• 22mCan it be done in React NativeWilliam Candillon · App.js Conf 2019
• 46mAnimations in React NativeNiya Panamdanam · Connect.Tech 2021