Timers in iOS are notoriously hard to set up. But not in SwiftUI because that is just one single
line of code and of course an onReceive. So if you do want to learn about this go ahead and hit that
SUBSCRIBE button because today we are going to build out this interface. We are going to count
down till new year's eve. So if you are interested in that go ahead and hit also the LIKE button and
let's dive in. New year's eve is around the corner so let's learn how to set up a countdown timer
to new year's eve and along the way you are going to learn about timers, onReceive, view modifiers
and of course all of this in SwiftUI. Before we dive into the tutorial let me remind you about
DEV_FACTORY. It is at rebeloper.com/mentoring where I can meet you with a one-on-one Zoom call where
you can just ask me any questions about Swift, SwiftUI, iOS development or if you do have a
bug in your code I would be happy to help or you could just learn with me SwiftUI, okay. So it is
at rebeloper.com/mentoring. So let me just show you what we are going to build out today.
So actually it's this one. So as you can see it's a countdown timer till new year's eve. We have
34 days 11 hours 38 minutes and 56 seconds till new year's eve and this is a really good opportunity
to learn about timers and the onReceived view modifier. So let's see. I have already prepared a
simple like vanilla Xcode project here and you can take a look at the resources down below
so you can just drag and drop them. So it's a link where you can sign up for all of my YouTube
tutorial resources and this is what you will find. A photo to files, ContentView and then int plus
and a photo credit. So let's just start off by adding our photo right over here. Let's just drag
and drop it and then let's delete our Content View. Let's move to trash and then let us just
move both of them right over here, okay. And on the Content View I have set up some stuff so let us,
let me just build and run till then here's the extension for our Int. You can have two seconds,
two minutes, two hours to string, yeah. You will see that in just a second, okay. So this is how it
looks like. It's just the image with 2022 and then 0 is set for the counter and let's take a look
at our Content View how it looks like. This is basically this is where we are going to work.
So let me just make that a little bit larger so we can see and this is basically it. VStack with all
of these texts and spacers and the background for the image. And that's it. So what we want to do here
as you can see currently we have a text of zero string as the countdown timer.
First of all we want to have a state variable which actually stores the state of the time
remaining. Because we are going to count down from the time remaining, okay. So that's a private
state variable. @State private var and let me just name this maybe time remaining, there we go.
And let's set the default value to zero. Now it's time to set up our timer and setting
up a timer in SwiftUI couldn't be easier. So let's just call this timer. So let timer equals
and we are going to go timer dot and we are going to publish and let's just use
this every tolerance on in options. We're not going to use all of them but let's just go
with this initializer. On every, that's a time interval so let's just use one for every one
second. So the timer will tick a once a second. We don't care about the tolerance.
Now this is important. On the run loop. We want to have that dot main because this is going to update
our UI. So we want to have that on the main thread and then run loop mode. Let's just use our common
that's our usual one and we don't care about the options for now. Now this is our timer.
Also when this view loads we want to start the timer and that is really simple. We just go
auto connect and that's it. We have our timer. So let's just connect this to our time
remaining. So how do we actually get these values from our timer? This is actually a publisher.
So if you take a look at it, let's just go right over here this is actually a publisher. So we can
listen to that publisher with the onReceive view modifier and right over here after background
let's just add dot onReceive and we just go timer and we are going to get back here, let's just
select this, oh it's not auto completing. Oh that's because I added a comma instead of the dot.
So onReceive again timer and then here on the output we are going to get the actual type. First of all
we want to check if our time remaining is greater than zero. Otherwise we don't want to subscript
one from that. So let's just go if self dot time remaining is greater than zero then go self
dot time remaining minus equals one. So this will actually get one out of the time remaining on
each second. So that's great but currently our time remaining is zero. So yeah, it will not trigger.
So what we want to do is calculate actually the seconds that we have till new year's eve
and then add those seconds to the time remaining private state variable. We are going to do that
when this view appears. So let's just go onAppear right over here and first of all we want to
know when new year's eve is coming and that will be an optional. So let's just
start off by having a guard let statement here. New year and equals and we are going to use the
calendar for this purpose. So calendar dot current dot date component.
Let's just use the one with the date from. Yes! Date from and here as you can see we need a date
components and that will be a date component with a set year and that is 2022. And this couldn't
be easier, so date components and let's just have this initializer and I will again
have this long initializer, all we care about is the year. So let's just add a 2022 right over there
and then let's remove all of these because as you can see they are all optional. So let's just
have that as is, okay. So if we do have our new year date else we just want to return.
So if we do have that new year's then we want to set the date components from the current
date till our new year. So this is how it goes. So time remaining, I'm already setting the time
remaining up because we are going to use that date seconds value. Let me just type it out.
It's relatively simple. So first of all calendar again current date components, date components this one
and as you can see we are requiring a components set. So let's just have this as a dot second and
then from our date. Date if you just initialize it that is now actually. And we still need here to.
Yes! So yeah that wasn't the correct initializer from autocomplete but this is what we want to
new year. And then after this we can access its second value and this is also an optional
otherwise let's just use zero. So let's set the time remaining to zero and now every error
should go away and it does and basically with the logic we are all set up. Now it's just time
to add the time remaining right over here. So let's just add it like so. Time remaining.
Okay! So let's hit Command + R so we can see that everything went okay and it does. As you can see
now we are displaying all of the seconds and it's counting down but this is actually not
what we want. This is where the handy extension for the int comes in. So let's just take a look at it.
So here we have to seconds, to minutes, to hours, to days and to string let's just go through them
one by one because this is a really interesting to see. So right over here for the time remaining
those int value, int extensions will return a string. So I can just delete this and go
time remaining. Select the int and then two seconds and this will convert the int value to
an actual string. As you can see this is the amount of seconds that we have till new year's eve.
Also we can have to minutes. So we are converting the in value to minutes. Those are the
minutes. Now you see it's not counting down because the timer is triggered every second. Of course once
the seconds do go down and it will be 49 649 or 48 rather minutes then it will change, okay.
The same goes for hours. So to hours. Let's just see that also. And finally we have to string, this
is the hours remain till midnight, not midnight. Midnight new year's eve and then we can just go to
also to days. Let's just take a look at how many days we still have left. 39 days, okay.
And finally we can just go to string and this is kind of what we actually want here.
As you can see we still have 34 days 11 hours 28 minutes and 37 seconds and now you can calculate
if you are smart enough when this video was recorded, okay. So yeah this is how you can create
an actual countdown timer in SwiftUI. Now if you do like these types of videos go ahead and check
out rebeloper.com/mentoring where you can meet me on a one-on-one zoom call. 60 minutes of
debugging your code or maybe you want to learn SwiftUI or if you just want to talk about iOS
development. I am there at rebeloper.com/mentoring. Go ahead and book your call now. Setting up
timers with the help of onReceive view modifier couldn't be easier. Now if you do like this video
go ahead and smash that LIKE button and while you are at it make sure to hit that notification bell
to get notified of new videos. New videos like these ones. Go ahead and check them out.
They are all about Swift and SwiftUI and while you're at it make sure to check
out my channel right over there I dare you and as usual I will see you in the next one.