Towards the end of the last video I added in a console log to the location context file.
I'm just gonna point out that I'm gonna remove that console log right there just to make sure that I
don't have a bunch of console logs all over the place.
Okay.
Now that our map is looking pretty good we're gonna start to work on our track form.
So remember track form is going to allow a user to enter any name for the track.
So like my hike my bike ride whatever else and then it will display a record button whenever a user
taps on that button.
We are starting the recording process so we're going to want to record all the different locations that
get emitted by Expo location.
In addition whenever user taps on record right there we should probably turn that button into something
it says like stop recording or something like that.
You know that definitely makes a lot of sense.
So to get started let's create a new component called Track form and it really has to do is show a text
input and a button all right.
So going to flip back over inside of my component directory I'll make a new file called Track form and
then inside of here.
Well we're just gonna do some typical boilerplate so at the very top I'm going to import react from
react.
I'm going to get input and button rom react native elements then create my component.
I'm not going to create a style sheet here.
I know that we've created style sheets like a billion times and not used them.
So let's just skip it this time because I don't think we're going to really need to apply any custom
styling and I'll do a export default track form okay.
So inside of my component I'm going to make sure that I return a fragment and inside that fragment I'm
gonna show a text input and I want to also show a button and right now I'll get the button.
A title of something like START RECORDING
All right that looks like a reasonable start.
Let's save this and go back over to a track create screen so the top of track create screen will add
in and import or track form from up one directory.
Components track form and then we can show track form right underneath that error message get set looks
good so I'll save this.
Let's flip back over go back to track create and yeah looks reasonable.
Now once again we've got a text input here.
Without a doubt it really is there.
But the underlined for it or kind of like the bottom bar is right up against the button.
So it's really hard to see nonetheless if I tap in there I definitely do have a text input.
Let's add a little bit of spacing around the text input just to make sure that it's easier for the user
to see what's going on.
So to add a little bit of spacing inside of track form rather than defining a style sheet we can reuse
that space or component to be created a little bit ago.
So all import spacer from spacer and then wrap my input with it.
Remember the spacer component just adds in some margin on all sides of some child element.
So we can test this and yet I'd say Alex can reasonable we could probably do the same thing for Button
as well and I'll skip it if you want to put some spacer around the button certainly feel free to do
so nonetheless little kind of I don't know.
Nice to have thing I'm going to throw inside of here on the input element I'll put in a place holder
of something like enter name because remember this is going to the name of the track that is being created
all right so looks very reasonable so I think that we've got some good scaffolding here.
Let's take a quick pause we come back the next video we'll start implementing the rest of track form.