You can see part 2 at kzread.info/dash/bejne/Y4Vtx8ihZ7LJgps.html

Conteúdo top! Parabéns! Acompanho e tenho uma playlist de react native com seus videos!

love this!! thanks!

@wcandillon

5 жыл бұрын

Thank you :)

That was great , thanks

Hey man! Nice tutorial. Is it possible to animate the circle based on percentage?

well done 👍

Hi! Is there a way to get the time elapsed at each second? I have implemented a setInterval for each second, using useEffect and updating the variable with useState, but only sometimes the time matches. Thanks and have a great day .

I need this thanks!

@wcandillon

5 жыл бұрын

super :)

ahhhh this is some fucking quality content right there. Thanks Wiiliam 🎉

@wcandillon

5 жыл бұрын

Thank you 😉

Thanks for making this video! I'm trying to start and stop the progress bar on click. I'm having trouble getting the animation to stop. Using `timing` in react-native-redash, I am able to run the animation when I click start, but I can't get it to stop by passing the clock node I use in timing to `stopClock` in react-native-reanimated. Any suggestions?

Biggest fan, here again, great video. I really enjoyed the 5-minute videos. I also decided to take Trigonometry because I'm trying to get good at animation. Really looking forward to your animation tutorial. Do you know when you're going to release the tutorial and what platform or you planning on releasing it on?

@wcandillon

5 жыл бұрын

Woah this is amazing. I really hope to release something within a month. It will be on my own platform.

@wcandillon

5 жыл бұрын

Thank you for your patience

@thinboy70

5 жыл бұрын

@@wcandillon I literally cant wait for the animation tutorial. Waiting with baited breathe!

What extension you use to get the hex color highlighted with its color value 😁😁

Anyone interested in how to do this without SVG's? Adding SVG support to a "react-native init" project just for a progress bar is an overkill. I did something similar for work this week while creating a doughnut chart. Basically, you 1) Draw a container view with equal width and height. 2) Give 50% radius to the container and hide over-flow (call it outer-circle). 3) Use another view with a smaller width/height than the outer-circle and call it inner-circle. 4) Give it a background color to create a ring shape. 5) Create 4 subviews inside a container view 6) Set color: transparent for two of them to make a C shape 7) Once you have a C shape you can animate it using transform: [{ rotate: ?deg }] on the outer circle :) inner-circle to create ring outer-circle with radius and overflow-hidden // transparent view // transparent view // colored view // colored view

@bozhidarvarbanov6001

5 жыл бұрын

You are right that this could be a bit of a overkill, although it is a pretty good process to learn. I got inspired a bit from your idea and checked it out, although it is a bit of an overkill too, instead of creating a 50% radius and numerous subviews, just make a parent container half the width of the child so you create a C shape and that is. Then I got an inspiration from here: medium.com/@0saurabhgour/react-native-percentage-based-progress-circle-no-external-library-e25b43e83888 . Here the process is even simpler, instead of backgrounds, just use border\borderWidth\borderColor and give borderRight and bordeTop transparent colors. However turns out that there is some bug and react-native does not support messing with the border properties and borderRadius, so at the end here is the end concept I came up with: jsfiddle.net/ezgcpr1q/ . Unfortunately, I could not find a reactnative code sharer, so you would have to copy paste it in your IDE.

How do you change the starting point of the animation?

Hi William! I am loving your content. Can you explain why strokeDasharray has to be `${circumference} ${circumference} and not just {circumference}` ?

Great tutorial, thanks William. I just had the issue that I could not use the full example code from the tutorial. I had the issue that Animated could not be imported like that. The fix was pretty easy, but it took me ages :D I could simply import Animated from react-native...

@ukaszzaborski8366

4 жыл бұрын

Hi. Can you describe how you fixed that ? :)

@Haude92

4 жыл бұрын

@@ukaszzaborski8366 Animated could be imported from react-native instead of the import that was used in the example

If i could press the like button more than once, i would do it

Hi William! First of all great job on the tutorials - very clear and on to the point! Big fan of yours! :) I've got a question and i'll be very grateful if you've got a minute to spare! Based on your implementation, in a component I added a text indicating the remaining time (as in an animated Countdown component using the Circular Progress Bar you built). Using a setInterval decrementing the value, the text is indicating the remaining seconds from X to 0. My question is why am I monitoring a difference between the circular progress bar's animation and the text value? As in, depending on the value, there's always a few seconds left when the animation has ended OR the animation still has a few secs left when the interval has finished decrementing the value to 0. Thanks and have a great day in beautiful Zurich, Switzerland

@jukata

4 жыл бұрын

From what it seems - the javascript thread's setInterval runs each second with approximately 65 milliseconds slower compared to the native thread. And after literally manually timing both seconds compared to a stopwatch lol, i can safely say that the javascript's the faulty one For what it's worth - i moved from class components to functional and I init a setInterval using useEffect that updates the state (useState) each second

Can I use this for the web?

Do you have to use tsx files for this?

Hi! How i set a callback when progress is over?

@wcandillon

4 жыл бұрын

You can use the call() function from reanimated to call back in to the JavaScript space. I hope this helps.

how to show the progress percentage here?

Animated package has been moved to 'react-native-animated' incase anyone has an issue with finding it

@jacksonstein3073

4 жыл бұрын

Is this an npm package? or do you mean the react-native component - "Animated"

@samerkayali4525

4 жыл бұрын

Just Saved my Life!

Liked the video. The object shorthand and spread operator combo was confusing at first. Might consider not using it in the future for the sake of beginners.

Did you need special setup for typescript or does it come that way with expo? Also, what do you think of the dev experience with typescript and RN? Do you ever have issues getting the types you need?

@wcandillon

5 жыл бұрын

I really like the TS support, made a video on that topic: kzread.info/dash/bejne/X2ec1rCRaainhrQ.html

@Smongo412

5 жыл бұрын

@@wcandillon thanks for the reply, I'll check that out

Hey there great video! I would like to loop this animation and would like some guidance please.

@wcandillon

5 жыл бұрын

That's an excellent question! I will try to update the example, I will keep you posted.

@pxulll

5 жыл бұрын

@@wcandillon Thanks alot! looking forward to your solution.

@wcandillon

5 жыл бұрын

Here it is: kzread.info/dash/bejne/Y4Vtx8ihZ7LJgps.html

why 100% is two PI ?

What about making it without SVG package from expo? )

@wcandillon

5 жыл бұрын

You can actually :) Vanilla React Native ships ART by default. docs.expo.io/versions/latest/sdk/art/

@AlmazovS

5 жыл бұрын

@@wcandillon I already know ART library )

@chronic888

5 жыл бұрын

@@wcandillon The SVG package isn't expo-only, it's just the react-native-community/react-native-svg package.

@lfatx

5 жыл бұрын

Just tried on iPhone using react-native-svg and reanimated - Non-expo libraries :) Works!

@AlmazovS

5 жыл бұрын

@@lfatx Try using ART library from React Native ;)

Hello I liked your video is very clear in the explanation but I would like to make a progressive bar in react js, could you help me?

How are u able to build the app so fast? Im taking about one minute to build the app to see the result of the code

@wcandillon

5 жыл бұрын

haha not too worry, I'm much slower in real life than on youtube of course :)

@user-qi6ig6gb8x

5 жыл бұрын

​@@wcandillon ohhh then how much you take in real life?

runTiming is not a function(

@Gogosmo

3 жыл бұрын

And then change the function call to this: timing({ clock, to: 1, easing: Easing.linear, duration: 10000, })

Guy is knowledgeable, too bad he has such a thick accent. Exponentially increases the difficulty of learning.