React Native Animated Donut Chart with React Native SVG and Animated API

42,856

1,375 0

Published 2020-09-02

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): snack.expo.io/@catalinmiron/advanced-donut-animati…

👉Join Discord: discord.gg/vg7hUDU.

👉👉👉 More react native animations: www.animatereactnative.com/ 👈👈👈

Want to support me?

- Patreon: patreon.com/catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinmiron
- Paypal: paypal.me/catalinmiron

You can find me on:

- Github: github.com/catalinmiron
- Twitter: twitter.com/mironcatalin
- Website: 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

All Comments (21)

@hypersudo8092 3 years ago

This man is really sharing good practices for react-native because many of us focus on functionality but not in good UI. Guys, please support him may be he will teach us awesome parts of react-native. Love from INDIA.
@BLUEOVI 3 years ago

I came here searching for a way to animate a number text input and ended up solving 2 problems in my app. Amazing tutorial man! Keep it up ;) !
@tawalioualao7444 3 years ago

From Benin (Africa) I follow you. Watch your Conf and your animation tutoral. You're just amazing.
@chamaldezilva 3 years ago

amazing content!!! addicted to your tutorials!!!
@octaviansirbu1192 2 years ago

Mersi mult Catalin. Am incercat 1000 de metode si in final tot un roman m-a ajutat sa rezolv :)
@justanotherguy8121 1 year ago

Small note: React native recommends against setNativeProps nowadays. So instead, just make a strokeDashoffset variable with useState, then pass that into the circle. animatedValue.addListener((v) => { if (circleRef?.current) { const maxPerc = (100 * v.value) / max; const strokeDashOffset = circleCircumference - (circleCircumference * maxPerc) / 100; setStrokeDashoffset(strokeDashOffset); // I no longer use this below code // circleRef.current.setNativeProps({ // strokeDashOffset, // }); } }); Thank you so much for this!
@xdankitjain 3 years ago

Great work Catalin, Very well explained.
@marianareissilveira 2 years ago

Amazing video, as always... Thanks for sharing!!
@leonelkahameni5315 3 years ago

Nice tutorial I like it. Thanks. You are one of the best react native teachers on youtube. 🙏
@youssefmuhamad3213 3 years ago

Awesome as always!
@tininottiny8685 3 years ago

So good man, thanks for this!
@totaltotal157 3 years ago

Nice!!! Thanks for posting these videos!
@enio.carlos 1 year ago

Thank you so much, Catalin.
@juliendevleeschauwer8226 3 years ago

Thanks a lot, man. This is awesome.
@ayushKumar-9835 1 year ago

Thanks man, this tutorial helped alot..
@eduardopelitti7799 2 years ago

Thank you very much for sharing!
@geekthegeek730 3 years ago

Awesome tutorial buddy!
@sidhant500 3 years ago

Thanks a lot Catalin...Love from Canada.
@user-zu6rm3js4d 3 years ago

Really Really Really Really APPRECIATED!!
@migom6 3 years ago

Awesome content as always! Any coming tuts on pan gesture handle like pinch to zoom or tinder swipes ?