Now that we have our focus subject, visualize, the next thing we want to do is actually add a progress
bar in the progress bar is an indicator that shows the user, Hey, this is how I'm tracking towards
my goal because OK, the countdown timer is nice.
And you know, we all know, Hey, we're looking at this and we kind of are aware that one minute,
59 seconds, 58 seconds and so forth, we can see time.
We can visualize time.
Look at this as a nice to have.
From the usability perspective, we're trying to add some flair to our UI, some nice little sprinkles
that are additive.
And so if we look at React native paper, which we've been using, they also have a progress bar.
And so again, they show the usage, import progress, bar and colors from React native paper.
It's pretty straightforward.
It takes a progress prop.
The default value is zero.
And the progress is a value between zero and one.
OK.
So knowing that let's go back over to our snacks, so we already have react native paper available here.
Now one thing I always like to do is I like to keep the relative imports below the absolute ones, so
we'll import progress.
Bar.
And we'll do that from React need of people now that we have a progress bar in here, is that all we
need?
Probably we're going to create our own colors.
So what we'll do is we'll actually go down here.
And should we add it here, let's have it here for now.
Let's create a view, and let's say that the style has a padding top.
Of spacing.
Thought, let's do small, and then what we'll do is we'll add our progress bar here.
Now one thing we need to add to the progress bar is the actual color.
So we'll do color is equal to.
And right now it's purple colors, dot and what colors that we have.
Let's go take a look at our colors again.
Well.
Those seem to be clicking through colors that dark blue, so let's add colors, the dark blue.
And let's see what that gives us.
Oh, we can't see it.
That means we need a lighter blue, so how do we go about that?
Well, you need to pick something that contrasts well to the blue.
You already have.
So let's go over here and let's say progress bar.
And let's add a color here.
Then let's go back to our timer and let's say color that progress bar.
That's a nice color.
Now, one thing I want to do is I want to give this progress bar a proper heights, we'll say Hide 20.
Oh, that seems to be a lot.
So let's give it 10.
Now, it's nice, invisible where it's going to count down, but actually, we could also just say spacing,
not small, which is an eight and everything will be consistent within the paradigm of the UI.
So now that we have that, we actually have to hook it up.
So it takes the prop progress, which we know, and we'll hook that up to a variable progress here that
we're going to define up here.
Now, how do we get variables again?
Well, we need you state.
So what we'll say is we're going to track a contest progress and we're going to set progress.
And we're going to say that that's equal to a U.S.
State.
Of what?
So we're going to track Oh.
Should that actually be won or should it be zero, should we count down from the top to the bottom or
the bottom to the top?
Well, in my opinion, you count down from 100, which is 100 percent of the time backwards.
So we're seeing that, hey, our progress bar is starting at the full amount of time and we're going
to count backwards.
So we're setting it to one.
If we set it to zero, then it would track from zero forwards.
So now we have our progress indicator that's actually set.
Now, if we remember correctly, our own progress here has a function, so that would probably give
us back the progress and what we could do here is, we could say, set progress to the progress.
Now how do we know that this progress is the correct progress?
Well, let's go look at our countdown component and let's go look if we remember correctly.
You know, every time we count down, we're setting the amount of milliseconds to track towards zero.
And so Countdown takes the on progress here and whenever we count down over here in this huge effect,
every time release counts down were dividing the amount of milliseconds by the amount of minutes to
release, and that will give us a number that's either, you know, tracking towards zero because it
can be like zero point nine zero point eight zero point seven.
We're giving the percentage number that kind of correlates to tracking down to zero.
So if we do that and we set the progress here, we don't actually need these brackets around here.
They're nice to have.
If we don't start our timer.
What we'll see is that, oh, it's tracking towards zero.
There we go.
Our timer is now hooked up.
Now the one thing we would want to do, probably here is say that will have a function.
On progress that's going to track.
Well, you know what we could do.
We could probably just give set progress to our progress because remember, progress is the equivalent
of a function that takes the value and then sets the value right.
So like values set progress value is the same thing as giving set progress directly to on progress.
So now if we press start.
It's still tracking down amazing.
We've now hooked up our progress bar.
That's awesome.
Now in the next video, we'll be looking at vibrating the phone once the timer has countdown fully.