Using SVG in React Native

on YouTube ↗21m

" summary

Claims that SVG can fit into React Native while staying performant on the UI thread and shows concrete tools and hacks: uses react-native-svg and d3 to generate complex path D attributes, animates a pie by driving the end-angle multiplier, animates strokes by using Animated.addListener and setNativeProps to update stroke-dasharray imperatively, demonstrates standard Animated API and notes useNativeDriver is not yet supported for SVG (there is a working branch), and reports a production app shipped to the App Store.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 3:30Why Vector Graphics?
3. 4:42Scalable Vector Graphics (SVG)
4. 6:21Positioning - the grid system
5. 8:46Vector Graphics in React Native
6. 10:36Native view bridge
7. 12:35Pie example
8. 14:55Animations

" related talks

• 21mSVG illustrations as React ComponentsElizabet Oliveira · React Conf 2018
• 22mCan it be done in React NativeWilliam Candillon · App.js Conf 2019
• 28mDemystifying complex animations creation process in React NativeVladimir Novick · React Native EU 2018
• 46mAnimations in React NativeNiya Panamdanam · Connect.Tech 2021
• 10mReact Native, your UX superheroNoemi Rozpara · React Alicante 2019
• 29mIt all starts with navigationKrzysztof Magiera · React Native EU 2018
• 25mReact Native <3 60FPS -- Improving React Native animations>Krzysztof Magiera · ReactEurope 2016
• 35mReact Native: Building Fluid User ExperiencesSpencer Ahrens · ReactEurope 2015