We just created our location provider.
So now we've got these three different pieces of state that are being managed inside our application
as a little short term goal.
I want to try to make sure that every time that we get an update to the user's location I want to update
that current location property right there.
I then want to make sure that we hook up that piece of state to our map component and inside of our
map component.
I want to try to recenter our map view any time that we get a new current location.
So essentially I want to try to track the user's location as they move around the world.
Now as a quick reminder we do not yet have this used location hook.
We're going to add this stuff in in just a moment but right now we're just going to work solely from
our track create screen so to get all this stuff put together inside of track it create screen remember
we've got that callback right there that gets called anytime we see a new location.
So from that callback I want to make sure that we try to dispatch an action that's going to update our
current location property.
We're then going to just make sure that that piece of information eventually flows down to our map component
even though we're using all this fancy terminology right now this idea of updating some piece of state
and then consuming it inside of some component is 100 percent unchanged compared to all the stuff we've
done throughout this course.
We're still doing the same stuff we're updating some piece of state and then getting access to that
inside of some components okay.
So let's give this stuff a shot.
So to get started going to first find my track create screen inside of here I want to change some state
that's inside my context object to do so I need to make sure that I first get access to some action
function that's inside there anytime we want to get access to an action function we need to import the
use context took from react and we also need to import the context object itself so I'll do an import
context as location context from up one directory context location context it's now we can add in a
use context call inside of here.
So I'll say get the add location action function.
Remember we just kind of scaffolding that out right there.
We want to get that function from use context location context.
So right now add location does nothing but we're gonna add in some additional functionality to it in
just a moment.
So now down inside my call callback right here that gets invoked every single time a user changes their
location rather than just doing a console log I'm going to instead call add location with that new location
object so I'll call add location in passing the new location object okay.
So that's all we do inside of a track create screen.
So now every time we get an update we're calling an action function site of location provider.
So now inside of location provider we need to make sure that we dispatch an action that's going to run
through our reducer and update the current location piece of state so going to say this file and change
back over to the location context J.S. file.
So here's the add location function that we are now calling in like we just said this function is now
going to be invoked with a location object so inside of here we want to dispatch an action.
I'll give it a type of something like add current location and I'll also give it a payload of that location
object so remember any time we call dispatch function.
This object right here is going to show up inside of our reducer as that second argument.
So now we can put in an additional case statement of ADD current location and we can return our updated
state object.
So chances are we want to just take all the existing properties inside of our city object so we'll create
the new object right there and say dot dot dot state and we'll put in the update that we want to make.
So in this case we want to update the current location property.
We want to say hey we just got a new location read out so we're gonna take action not payload inside
of reducer and use that to update the current location property it's a backup here I'll say current
location is now going to be action dot payload and that should be at so we've now essentially gone from
our component up to location provider and we updated that piece of state.
It's now the last thing we have to do is make sure that that piece of information flows down to our
map component so I'm now going to open up my map dot J.S. file inside of our components directory remember
inside of here at present we are generating a random list of points.
Well not really random but more or less random.
We only did this to figure out how we could draw a line on the map.
So we really don't need this stuff anymore so I'm going to delete that for loop in the points array
now that we no longer have an array of points.
I'm also going to delete the poly line.
We're going to put this back in here in just a moment.
But for right now like I said we don't have an array of points songs can delete it for now.
All right.
So now we want to get some access to some piece of information inside of our map component and this
information is coming from our provider.
So as usual we need to make sure that we import our used context took and the context object itself
that is tied to that provider so at the very top from react I'm going to get used context and I'll also
import context as location context from up one directory context location context.
It's now inside of our component we can pull off the state object using used context with location context.
So now every single time that we get a location update we should see it inside that state object.
Right now let's just add in the console log and verified that that is the case.
So I'll do a console log of the entire state object like so now before I test this out.
I want to remind you that at this point in time it's kind of up to you how you are getting your location
updates inside of tracked rate screen.
I am relying upon the fake location data coming from mock location if you want to use some other type
of sourcing location updates either by using your android emulator or IO a simulator go for it.
But if you're on a physical device chances are you want to use that fake data it's going to save this
and then I'm going to go back over to my device.
I'll go to a track create and I'm going to make sure that I've got some console logs appearing in my
terminal so back inside my terminal.
Here's my big state object.
So I've got my current location.
I can see that about once every seconds the latitude and longitude is being updated by supposedly about
10 meters or so.
And I also have my locations array and recording property so notice that my location object has a court's
property and inside of cords is my latitude and longitude.
So this is looking pretty good now.
One quick thing here.
If you're on a physical device I would encourage you at this point in time to very quickly comment out
the mock location right here inside of track create screen.
Go back over the track create see your console log here and whatever console log you have on a physical
device should be your real latitude and longitude in the physical world.
So I would take that latitude longitude like your very real latitude and longitude for your location
in the world and I would use that as your starting point inside the mock location file right here so
inside of right here inside a mock location find longitude latitude and update those two values to be
your real world location.
If you do not do that you're going to see the map jumping all over the place as your physical device
gives you a real location and then the next second a fake location.
And so it's going to be a really disorienting and hard to figure out exactly what's going on.
So once again I would encourage you to update the longitude and latitude to your physical location.
All right.
So now that I've got that out of the way I'm going to comment Mark location back inside of mapped out.
J.S. very clearly our state object now has the information that we expected to have.
So now we can use that longitude enlarged latitude property inside of the current location dot coords
object to place our map view and center it on wherever we actually are.
So inside of here the first thing I'm going to do is d structure off of the state object.
I want to get just the current location property like so because I don't really care about the recording
flag or locations or anything else.
The next thing I need to make sure that I do.
I remember whenever we initialize our state object current location is going to be no because our application
first boots up.
We don't know what our current location is.
So if I don't have a current location chances are I don't want to show the map yet.
So I'm going to put inside if you're a quick check.
I'm going to say if we do not have a current location.
If that value is null then I want to return early and we can very easily do something just like say
don't show anything.
Alternatively we can very easily show a spinner to the user which might be kind of nice.
So I could instead do a return activity indicator like so I'll give it a size of large.
And I'm also going to hard code in some style property here it's going to pass in an object and I'll
do a margin top of 200.
That's just kind of like a very rough style there to kind of get the activity indicator to roughly show
up in the middle of the screen.
All right.
So then I'm going to make sure very quickly that I import the activity indicator from React Native.
So now we've handled a case in which we do not yet have a current location.
If we do have a current location and we end up returning the Mount View then we probably want to use
the latitude and longitude from the locate current location property as opposed to the hardcoded ones
we have right here.
So to do so we're gonna put in dot dot dot current location dot courts remember that coords object.
That's where our latitude and longitude are.
So we're gonna take the latitude and longitude out of that current location and then we're going to
also apply in the latitude Delta in longitude Delta which remember is essentially how wide and tall
the map is or essentially in reality how zoomed in it is I should say one less thing initial region
right here is an indication of what the map should show when it first gets rendered on the screen.
If we want to then kind of have the map track the user around.
We could also add in a second prop called simply region whenever we update this region property the
map is going to automatically update itself and recenter on the user and resume as well.
For our region we want it to be essentially identical to initial region because once again we want to
use whatever our current location led to in longitude hour and probably the same Delta as well.
So I'm going to copy all three of those down into a region like so OK.
So that should be it.
We should now be ready to test this stuff out now as a quick reminder we just went through this entire
flow so we got some updated data inside of track rate screen.
We threw it up to our provider.
We update the current location property and then consumed it inside of our map component.
Let's now save this and see how we're doing gag and go to track create.
I saw a spinner as my location was being obtained or the initial location.
And now once every second or so I can see that my map is kind of moving around.
Awesome.
So again I want to remind you at this point time that if your map is like wildly jumping all over the
place it is 100 percent because of the mock location stuff.
Remember at present we are reading the user's real location.
If we have a location like on a physical device and we are also simultaneously throwing out these fake
points as well.
So the two might be kind of conflicting with each other.
Obviously not super ideal.
Nonetheless this is the best solution we have for kind of moving around our map a little bit or simulating
movement without having to have you like walk around the block so to speak.
So if your map is jumping around super wildly remember you can set your longitude and latitude to be
essentially very close to wherever you are in the physical world.
Even then you might see still see a little bit of jumping around.
If that's still really annoying to you you can very easily go back to your track create screen and just
say I don't want to use mock location at all and just rely upon natural updates of your location if
you don't use map Mark location.
Once again it's going to a little bit challenging to actually simulate movement nonetheless that's the
solution we have for better or for worse OK.
So overall I would say this is working out pretty decently.
So now about once every second we get that location update and we use it to update the user's map or
similar location the world which therefore moves our map as well.
Now one thing one to mention is that because we are setting the region property on our map that's going
to essentially reset the map to that location even if the user starts to drag it around.
So if I start to drag like that I'm just gonna get kind of like rubber banded back maybe not the best
thing in the world but once again it's kind of what we have if we don't want to see that kind of rubber
band action we could remove the region property and we will not see any further updates.
We'll only see the initial region be set so I can now go back to try to create.
Now I'm here and I can once again drag but again I don't see any further updates in my maps location.
So it looks pretty reasonable.
So let's take a pause right here and continue in just a moment.