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

[@hypersudo8092]

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.

[@CatalinMironDev]

I can’t describe how happy I am that I can share my knowledge with you. Thank you so much for showing your support and kind words I truly appreciate it. Thanks Harshvardhan ✌️

[@BLUEOVI]

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]

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

[@justanotherguy8121]

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!

[@os23-n8g]

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

[@leonelkahameni5315]

Nice tutorial I like it. Thanks. You are one of the best react native teachers on youtube. 🙏

[@CatalinMironDev]

Wow, thanks a lot Leonel! ✌️

[@marianareissilveira]

Amazing video, as always... Thanks for sharing!!

[@enio.carlos]

Thank you so much, Catalin.

[@legcsabi]

Fixes for the web: - originX={halfCircle} and originY={halfCircle} instead of origin={`${halfCircle}, ${halfCircle}`} - circleRef.current.setNativeProps is undefined, use a state to store the calculated strokeDashoffset - add [] as dependency to React.useEffect to prevent additional calls

[@justanotherguy8121]

You saved me, thank you

[@chamaldezilva]

amazing content!!! addicted to your tutorials!!!

[@xdankitjain]

Great work Catalin, Very well explained.

[@CatalinMironDev]

Thank you Ankit, I’m glad you like it. Thanks ✌️

[@sidhant500]

Thanks a lot Catalin...Love from Canada.

[@CatalinMironDev]

Thank you Sidhant 🤗

[@ayushKumar-9835]

Thanks man, this tutorial helped alot..

[@totaltotal157]

Nice!!! Thanks for posting these videos!

[@CatalinMironDev]

Glad you like them! Thanks ✌️

[@eduardopelitti7799]

Thank you very much for sharing!

[@syedmoamberraza1490]

i have tried many time but won't get success, the actual thing is to explain in a proper general manners, which he knows very well. Great Work LOVE From PAKISTAN.

[@rahulraina711]

You are a saviour

[@tininottiny8685]

So good man, thanks for this!

[@juliendevleeschauwer8226]

Thanks a lot, man. This is awesome.

[@bilelrahmouni01]

Thank you

[@remixedOne]

I miss his videos a lot, He lately not uploading. Hope you are doing good and will get back to youtube soon

[@youssefmuhamad3213]

Awesome as always!

[@CatalinMironDev]

Thank you so much Youssef 🤗

[@devina1957]

thank you, very helpful

[@rockNbrain]

Nice job bro

[@emilsvensson7212]

This video really helped me with the project I am doing! Wanted to get you a coffee for the help but the link does not work - so I guess I need a tutorial for buying coffee next…

[@정이든-i4r]

Really Really Really Really APPRECIATED!!

[@CatalinMironDev]

Thank you so much ✌️

[@geekthegeek730]

Awesome tutorial buddy!

[@CatalinMironDev]

Thanks a lot ✌️I’m glad that you liked it 👍

[@Dmitri_Ivanovich]

I don't think "percentage" means what you think it means. Other than that - great tutorial. Thanks!

[@edgardoalvarez980]

How did you learn to do all of this? It's amazing!

[@godwinebikwo6544]

Great video, and explanation

[@CatalinMironDev]

Glad you liked it and thank you Godwin ✌️

[@migom6]

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

[@CatalinMironDev]

Great suggestion! I'll consider creating a tinder like app in the upcoming videos. Thanks Madhurjya! ✌️

[@charfeddinehajlaoui4572]

Well done sir you have a great videos in this channel ... my question is how to fix the value and not let it change like in the tutorial .. for example i want to display the balance of holiday or the days left in a holiday.. and thanx

[@anthonyamponsah1693]

Great tutorials Miron. I have a minor issue. I have followed the tutorials but there is a problem. The component does not animate on mount unless I bind the animated value to a view and later remove it from the view then it animates. What could be the issue?

[@senixcode5601]

cool

[@lailabouziani7704]

thanx, very helpful

[@CatalinMironDev]

You’re welcome Laila, I’m glad that you found it useful. ✌️

[@khalidkhan5308]

Wow amazing 😍

[@CatalinMironDev]

Thank you Khalid, I’m glad you found it useful ✌️

[@NaveenKumar-fo4kz]

Please make a video about firebase using expo and hooks

[@CatalinMironDev]

I’ll start a series about firebase really soon. Thanks for the great suggestion Naveen ✌️

[@SamuelBotelho]

awesome, keep it up!

[@CatalinMironDev]

Thanks Samuel ✌️

[@sumanparajuli229]

Sir, i am grateful that i got your channel. Sir can you create a fully functional react native app using react native CLI with good UI, good animation and backend and finally publish to google play store.

[@CatalinMironDev]

I plan on doing it after I'll finish the 10 Video series for Shared Element transitions in React Native. Thanks for the suggestion Suman ✌️

[@nishadpatil9886]

Really great video ..

[@CatalinMironDev]

Thanks Nishad, I’m glad it helped you ✌️

[@iaxelrad]

Amazing! That's just what i was looking for. What type of adjustments would you recommend to do if I wanted to add a kind of gradient to the color ?

[@CatalinMironDev]

Thanks Itamar. For gradients I recomment using Def + gradient svg and apply the gradient as fill for the path. Fill=“url(#grad)” ✌️

[@iaxelrad]

@@CatalinMironDev thanks! I'll give it a go :)

[@utkarsh223]

HOW CAN I STOP THE ANIMATION ONCE IT REACHES THE MAX?? PLEASE HELP

[@nadeemkhan-yu4wf]

its very nice.

[@CatalinMironDev]

Thanks Nadeem I’m glad you like it ✌️

[@johanagamez450]

Amazing video! Can I put the donuts one inside the other?

[@3366ashish]

Can you please create demo on how to animate polygon as well. Couldn't find lot of assets for it.

[@fouadchahd2969]

thank you sir for this amazing video but how to stop the donut from refreshing it self?

[@krtgaming8253]

Any idea for setting rotation to 135 degree? The origin is not correct.

[@vietcuong7972]

Can someone help me why the cicle ring is not full width and height of the view outside?

[@richardkirigaya8254]

Hi Catalin, lovely vid, really enjoyed it, how i can make sure the donut doesn't animate past 100% but remains there at 100%

[@richardsonlyon8108]

Hi, thanks for the great tutorial, but I seem to be having some problems. I seem to be getting an error message: Animated node with tag 23 does not exist, please help if you can.

[@itsmejorday4426]

what theme did you use? the color really smooth, like it.

[@CatalinMironDev]

My VSCode theme is Palenight and font family is Operator Mono. Thanks Jorday! ✌️

[@tknumber12]

@Catalin Miron, thanks for the great video. It was very helpful. I have a question. I have used some animated svgs just as you have shown, but now my scrollview won't work unless my finger touches an animation. Outside of the animation (donut svgs) a touch event on the screen does not work and the screen won't scroll. Any tips? Thanks

[@tknumber12]

Never mind, It is because I was wrapping my screen in a touchableWithoutFeedback

[@nileshsingh7253]

Hello Sir please make video on react d3 gauge with needle which show value.

[@appforeseen6298]

I tried setting animatedValue to strokeDashoffset directly. It look like: strokeDashoffset={animatedValue}. But why it can't animate to final value or the round still there(strokeLinecap="round")? And your way the round will disappear!

[@umaralfaruq1304]

what is the name of the font

[@muhammadmuzammil7592]

please also make pie chart in expo

[@saishkalbag7103]

Your snack code is not animating and pasting it in my react native code didn't start the animation

[@karthikbalasubramanian5122]

Hey thanks for a Great Video. One doubt though, Will this work in the React Native Web or a Web Storybook? Can anyone help me out here.

[@anasalamin9164]

Can you please make more content about graphs... There's a huge shortage in this context of RN

[@CatalinMironDev]

Anas Alamin right now I have a 10 video series about shared element transition, most probably after it I’ll tackle this subject. Thanks Anas ✌️

[@bloggerklik]

Hi, I want to add an svg icon above the bar chart. How can I do that?

[@naishe]

Not a moment ago I installed and used this library: github.com/vydimitrov/react-countdown-circle-timer and here is your video. Pleasantly surprised. Love your videos.

[@CatalinMironDev]

This looks amazing Nishant, I didn’t knew about it. Thanks for sharing it with us. ✌️

[@naishe]

@@CatalinMironDev yeah, I was wondering how it was done, and bam! your tutorial. Thanks for the videos. Keep them coming. I like them a lot.

[@QueenA7]

This was a really helpful video. Thank you! I am having issues with it showing up properly on Android, though. It will show the circles properly when they are unanimated, but as soon as I animate them, it only shows circle one and never shows the animation. Any advice on what I can check to get this working?

[@QueenA7]

Never mind... I added useNativeDriver = {false} for android, and that seemed to fix it. Thanks for the great video!

[@edgardoalvarez980]

@@QueenA7 had the same issue, and came here to find the answer. Thank you so much for this!

[@QueenA7]

@@edgardoalvarez980 Glad it helped!

[@ahmadsopandi100]

sorry sir, after i try yor tutorial, the animation is not working on android device

[@toel_]

Hey, I really like your videos and want to know whether you have a course or something Amazing work btw

[@CatalinMironDev]

I’m working on Reanimated2 course (zero to hero) which I plan to release by the end of this month-mid of October. If you’d like to get a little discount there you can become a Patreon: patreon.com/catalinmiron (there are other benefits, including access to a private repository where I’m pushing code mostly on a daily basis). Thanks you so mich for your support Apiut ✌️

[@toel_]

@@CatalinMironDev Nice, but I dont think reanimated2 works on expo sdk 38. Either way, can't wait to be part of your "students"

[@CatalinMironDev]

Apiut Toel you are right and that also bothers me:( there’s work in progress for expo which I wish to happen asap). Thanks and no problem about not becoming a student yet. ✌️

[@toel_]

@@CatalinMironDev I meant I'll be your student irregardless because i have been having issues with reanimated v1 its complex in a way to beginners

[@dannylamtoro8447]

🇮🇩 Indonesia

[@zameer-haider]

🍎😍

[@CatalinMironDev]

🥑 thanks Zameer ✌️

[@harshdeepsaiyam570]

how to move it anti clock wise?

[@doniaelfouly4142]

the code on snack is broken

[@rp1283]

useNativeDriver is only working in expo but not in react native

[@AbdulRehmanSiddiquii]

Bro i also need know how i can show also number at the end of the bar ???

[@muhamadimron9785]

try to Change the initial value of percentage same as max value or extract the max value then show it _data.map(t => ( {t.max} ))_

[@AbdulRehmanSiddiquii]

@@muhamadimron9785 dont get it where i have to add this can add this and push in the source ?

[@axelbryancasauran5159]

the source code is not working even updated the version and dependency...

[@axelbryancasauran5159]

i take it back it works.. question: is it possible to loop the animation? like it is circling around?

[@CreativeJE]

thanks for your tutorials but if you will explain a little more about everything which you do will help beginners understand better whats going

[@CatalinMironDev]

I will try my best. Can you also share some feedback? I'd like to be better at explaining stuff. Thanks!

[@CreativeJE]

@@CatalinMironDev like where you used the new Nullish coalescing operator (??) and also in the if statement. Also if you can tell why and how animations are working like why you used text input instead of normal text. I know video will be longer but I am sure it will give us a deep understanding of all of your codes. Thanks again 🙏🎉

[@fernandorojo6311]

Has anyone implemented this with Reanimated 2 by chance?

[@CatalinMironDev]

Yes, I did:) its on my Patreon. Its the same thing with Animated API you only need to useAnimatedProps

[@israel333666]

can you to make delivery app please with react native

[@guleye]

Sir you didn’t add github source code

[@CatalinMironDev]

Added the snack for it. Thanks Murph ✌️

[@jurianboots395]

Hey man, thank you for this very clear tutorial :) However it doesn't seem to work on Android, is that right?

[@Anas_Alaqeel]

This guy is good and know what he doing, but if we talk about how he teaching or explaining things, well, explaining is bad, so only people who will understand him who those have already experience in what he doing

[@pasteancalin7826]

The circle (stroke) looks jagged on Android

[@bilelrahmouni01]

thank you