React Native Animated Donut Chart with React Native SVG and Animated API
In this video tutorial you'll learn how to create an animated donut chart component in React Native using React Native Animated API and React Native SVG.
The React Native Donut Chart component consist in:
building up the donut chart using React Native SVG (Circle and G)
how Stroke DashArray and Stroke DashOffset works and animate them
how to animate a number in React Native based on Animation value or Animated value.
Snack (Source code): https://snack.expo.io/@catalinmiron/a...
👉Join Discord: / discord .
👉👉👉 More react native animations: https://www.animatereactnative.com/ 👈👈👈
Want to support me?
Patreon: / catalinmiron
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
Paypal: https://paypal.me/catalinmiron
You can find me on:
Github: http://github.com/catalinmiron
Twitter: / mironcatalin
Website: http://batman.codes
Timeline:
00:00 Intro
01:13 VSCode
01:54 Create the Donut Chart with React Native SVG
04:10 How StrokeDashArray and StrokeDashOffset work
07:47 Calculate StrokeDashOffset based on percentage
11:45 Animate Donut Chart component
14:02 Initial React Native Donut Chart animation
14:50 Use TextInput for Percentage number
16:35 Animate TextInput value
17:40 Final Donut Chart animation presentation
17:49 Show how reusable Donut Chart work
19:25 Final words
#reactnative #animated #donutchart #react-native-svg #react-native-chart #gauge-chart
Watch video React Native Animated Donut Chart with React Native SVG and Animated API online without registration, duration hours minute second in high quality. This video was added by user Catalin Miron 02 September 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 43,837 once and liked it 1.3 thousand people.