Animated

on YouTube ↗23m

" summary

Shows how React Native gets 60fps animations by trading generality for targeted fixes: tries shouldComponentUpdate and static container to avoid rerenders, experiments with DOM mutations and element caching, then builds an Animated component + Animated.Value bindings that register lifecycle listeners to push fast style updates. Demonstrates working examples (F8 header, image gallery, text transitions), describes race conditions and unmount errors and explains how the binding approach keeps React safety while delivering the frame-rate performance needed.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 1:15Examples
3. 3:48Performance
4. 7:52Element Caching
5. 10:27React Mutation
6. 14:14Data Binding
7. 16:50Implement Data Binding
8. 21:47Conclusion

" related talks

• 46mAnimations in React NativeNiya Panamdanam · Connect.Tech 2021
• 28mThe Power of InterpolationMike Grabowski · React Day Berlin 2017
• 28mDemystifying complex animations creation process in React NativeVladimir Novick · React Native EU 2018
• 36mMake Your Apps Move! Awesome Animations with React Native ⚡️Luca Caputo · Voxxed Days Ticino 2025
• 22mA Novel Approach to Declarative Animations in React NativeJoel Arvidsson · ReactEurope 2017
• 31mAnimations in React NativeFreddy Harris · Best of Web 2019
• 35mReact Native: Building Fluid User ExperiencesSpencer Ahrens · ReactEurope 2015
• 32mAnimations Should Be FunCatalin Miron · App.js Conf 2022