React Native Animated Donut Chart with React Native SVG and Animated API
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 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/a...
👉Join Discord: / discord .
👉👉👉 More react native animations: www.animatereactnative.com/ 👈👈👈
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinm...
- Paypal: paypal.me/catalinmiron
You can find me on:
- Github: github.com/catalinmiron
- Twitter: / 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-chart
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.
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 ✌️
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 ;) !
From Benin (Africa) I follow you. Watch your Conf and your animation tutoral. You're just amazing.
amazing content!!! addicted to your tutorials!!!
Mersi mult Catalin. Am incercat 1000 de metode si in final tot un roman m-a ajutat sa rezolv :)
Great work Catalin, Very well explained.
Thank you Ankit, I’m glad you like it. Thanks ✌️
Amazing video, as always... Thanks for sharing!!
Nice tutorial I like it. Thanks. You are one of the best react native teachers on youtube. 🙏
Wow, thanks a lot Leonel! ✌️
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!
So good man, thanks for this!
Thank you so much, Catalin.
Awesome as always!
Thank you so much Youssef 🤗
Nice!!! Thanks for posting these videos!
Glad you like them! Thanks ✌️
Thanks a lot, man. This is awesome.
Thanks man, this tutorial helped alot..
Thank you very much for sharing!
Thanks a lot Catalin...Love from Canada.
Thank you Sidhant 🤗
thank you, very helpful
Awesome tutorial buddy!
Thanks a lot ✌️I’m glad that you liked it 👍
Thank you
Really Really Really Really APPRECIATED!!
Thank you so much ✌️
You are a saviour
thank you
Nice job bro
Awesome content as always! Any coming tuts on pan gesture handle like pinch to zoom or tinder swipes ?
Great suggestion! I'll consider creating a tinder like app in the upcoming videos. Thanks Madhurjya! ✌️
Great video, and explanation
Glad you liked it and thank you Godwin ✌️
awesome, keep it up!
Thanks Samuel ✌️
thanx, very helpful
You’re welcome Laila, I’m glad that you found it useful. ✌️
Wow amazing 😍
Thank you Khalid, I’m glad you found it useful ✌️
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
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…
How did you learn to do all of this? It's amazing!
Really great video ..
Thanks Nishad, I’m glad it helped you ✌️
Amazing video!
Can I put the donuts one inside the other?
Hi Catalin, lovely vid, really enjoyed it, how i can make sure the donut doesn't animate past 100% but remains there at 100%
its very nice.
Thanks Nadeem I’m glad you like it ✌️
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.
cool
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 ?
Thanks Itamar. For gradients I recomment using Def + gradient svg and apply the gradient as fill for the path. Fill=“url(#grad)” ✌️
@@CatalinMironDev thanks! I'll give it a go :)
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.
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
You saved me, thank you
thank you sir for this amazing video but how to stop the donut from refreshing it self?
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?
Can someone help me why the cicle ring is not full width and height of the view outside?
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!
Can you please create demo on how to animate polygon as well. Couldn't find lot of assets for it.
I miss his videos a lot, He lately not uploading. Hope you are doing good and will get back to youtube soon
@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
Never mind, It is because I was wrapping my screen in a touchableWithoutFeedback
Hi, I want to add an svg icon above the bar chart. How can I do that?
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.
Any idea for setting rotation to 135 degree? The origin is not correct.
what theme did you use? the color really smooth, like it.
My VSCode theme is Palenight and font family is Operator Mono. Thanks Jorday! ✌️
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.
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 ✌️
Hello Sir please make video on react d3 gauge with needle which show value.
how to move it anti clock wise?
I don't think "percentage" means what you think it means. Other than that - great tutorial. Thanks!
Please make a video about firebase using expo and hooks
I’ll start a series about firebase really soon. Thanks for the great suggestion Naveen ✌️
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?
Never mind... I added useNativeDriver = {false} for android, and that seemed to fix it. Thanks for the great video!
@@QueenA7 had the same issue, and came here to find the answer. Thank you so much for this!
@@edgardoalvarez980 Glad it helped!
HOW CAN I STOP THE ANIMATION ONCE IT REACHES THE MAX??
PLEASE HELP
Can you please make more content about graphs... There's a huge shortage in this context of RN
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 ✌️
sorry sir, after i try yor tutorial, the animation is not working on android device
what is the name of the font
Bro i also need know how i can show also number at the end of the bar ???
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} ))_
@@muhamadimron9785 dont get it where i have to add this can add this and push in the source ?
please also make pie chart in expo
Hey, I really like your videos and want to know whether you have a course or something
Amazing work btw
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 ✌️
@@CatalinMironDev Nice, but I dont think reanimated2 works on expo sdk 38. Either way, can't wait to be part of your "students"
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. ✌️
@@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
the code on snack is broken
Your snack code is not animating and pasting it in my react native code didn't start the animation
Has anyone implemented this with Reanimated 2 by chance?
Yes, I did:) its on my Patreon. Its the same thing with Animated API you only need to useAnimatedProps
🍎😍
🥑 thanks Zameer ✌️
useNativeDriver is only working in expo but not in react native
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.
This looks amazing Nishant, I didn’t knew about it. Thanks for sharing it with us. ✌️
@@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.
can you to make delivery app please with react native
🇮🇩 Indonesia
thanks for your tutorials but if you will explain a little more about everything which you do will help beginners understand better whats going
I will try my best. Can you also share some feedback? I'd like to be better at explaining stuff. Thanks!
@@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 🙏🎉
Hey man, thank you for this very clear tutorial :) However it doesn't seem to work on Android, is that right?
the source code is not working even updated the version and dependency...
i take it back it works.. question: is it possible to loop the animation? like it is circling around?
Sir you didn’t add github source code
Added the snack for it. Thanks Murph ✌️
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
The circle (stroke) looks jagged on Android