Declarative future of gestures and animations in React Native

on YouTube ↗27m

" summary

Argues that moving gesture recognition and animation logic off the JS thread prevents frame drops, demonstrates JS fps falling from ~60 to ~20 when JS blocks, and shows a working declarative image preview built without imperative callbacks. Uses react-native-gesture-handler to run gesture logic on the native/UI thread, leverages the useNativeDriver idea for events, and introduces reanimated as a JavaScript-based animation engine that is 100% imperative-free and successfully reproduces bouncy pinch/decay interactions.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 1:25Understanding animations
3. 10:30Gesture handler system
4. 15:21React Native Gesture Handler
5. 22:00Reanimated library
6. 27:14Conclusion

" related talks

• 35mAnimations and gesture handling in React Native and native languagesMichał Osadnik · Mobilization 8
• 28mReact Native Touch & GestureKrzysztof Magiera · React Amsterdam 2017
• 29mIt all starts with navigationKrzysztof Magiera · React Native EU 2018
• 10mReact Native, your UX superheroNoemi Rozpara · React Alicante 2019
• 22mCan it be done in React NativeWilliam Candillon · App.js Conf 2019
• 46mAnimations in React NativeNiya Panamdanam · Connect.Tech 2021
• 25mReact Native <3 60FPS -- Improving React Native animations>Krzysztof Magiera · ReactEurope 2016
• 22mA Novel Approach to Declarative Animations in React NativeJoel Arvidsson · ReactEurope 2017