We've now got our authentication flow in a very good location.
So now it's time for us to start thinking about the track list detail and create screens.
I think it makes a lot of sense to first make sure we have the ability to create a new track.
Remember the entire purpose of this application is to show a map to the user.
Once they press that record button we're going to record their path throughout the world.
And as they start to walk around we're going to draw a black line on the map to track the path that
they make.
So let's focus first on this create screen.
Now the create screen is actually going to end up having a lot of different logic inside of it.
Way more than you would ever expect.
So from the get go we're going to break that track create screen into a couple of different separate
components.
First we're going to add the create screen itself.
That's going to be a single component.
We're also going to create a component just dedicated to showing the map right here.
And that black line across it will create that component inside of a component called Map.
And then finally all this form stuff down here.
So a text input and a record button we will display inside of a another component called Track form.
Now it might be a little bit kind of unclear as to why this component is going to end up being rather
complicated and why we would want to break it up in two separate subcomponents right from the get go
but as soon as we start to discuss how we track a user's location in general to react native you're
going to understand that well there's kind of a lot that goes into it.
And so breaking this up into separate components right now is going to save us a lot of headache down
the line.
All right.
So to get started let's create a new component file called simply map for right now we'll just put a
little bit of boilerplate in there.
But once we get that wired up to our track great screen will then start to focus on showing an actual
map inside of it.
All right.
So back inside my code.
Ed I'll find the components directory and make a new file inside there called Map dot J.S..
So like I said just a little bit of boilerplate for right now.
So I'm going to import react.
I'm going to get text and style sheet from React Native or then make my map component so inside of here
just some text right now and I'll say something like I am a map will then create our sales object.
We are going to eventually use this to apply some styling to the map you and I are going to create.
So this is not going to be an unused line of code right here even though it very frequently is for us.
And finally we will export default map at the bottom so let's now import this into our track create
screen.
It's all fine inside my screens directory track it creates screen inside of here.
I will import map from components map and then right now inside of here we're still using the text element
coming from React Native.
Let's update that to use the text element from React Native elements so we can add on that simple like
each one two or three for a prop as opposed to applying a style like we currently are.
In addition we probably want to make sure that the track create screen doesn't spin off the edge of
the actual device here.
So we should probably also wrap all the stuff inside of a safe view that's coming from react navigation
which we saw just a moment ago OK.
So inside of a track create screen I'm going to remove the import from React Native for text right there.
I'm also going to clean up view because I don't think we're going to need that anytime soon.
I'll then get a import for text from react native elements.
And now we can do a little bit of update to our render method inside of here.
I'm gonna delete the entire existing text element.
I'm going to instead return one more import my mistake.
At the very top let's make sure we also get safe The View safe area view.
There we go from react navigation.
So now we can get started.
So I gonna do a multi line J.S. x return we'll do a safe area view and we'll throw on force inset is
top always
then we'll place our text I'm going to display it as like a h three and we'll say create a track and
then finally we can show our map okay.
Let's give this a try.
I'll save the file.
Let's flip back over I'll hit track create.
And that's definitely a good start.
Now create a track is a little bit small compared to the original mockup so if you wanted to maybe we
could change that to like an H2 instead.
There we go.
It's a little bit better a little bit closer to the mockup so I'll try this out on Android as well.
Just make sure I've got everything displaying yep looks good.
All right.
So now we've got some scaffolding put inside of here.
Let's take a quick pause.
When we come back the next video we're gonna start to take a look at how we show an actual map on the
screen that a user can interact with.