Looks like our app generation is complete.
So going to change into that tracks directory then do an npm install for react navigation and then after
that's done installing all startup might react native bundler with a quick NPM start all right.
And there we go so once this is open as usual if you're using a physical device don't forget to scan
that QR code.
Otherwise my case I'm gonna open everything up on Android in Iowa simulators just you can see what I'm
doing there easily.
OK so now we understand how we're going to essentially stitch all these different screens together in
this video.
We're going to go through a little bit of busy work and essentially set up our project to have all these
different screens and figure out how to use these different navigators to join them together.
So a first begin by creating some scaffolding for all these different screen elements so to get started
I can open up my code editor inside the track's directory.
I've already started it up ahead of time so here's my newly generated project then inside of my root
project directory I'm going to make a new folder as usual called RC.
Then inside of there I'll make a new folder called screen's
so inside of screens we're gonna create a scaffold or kind of a placeholder for every different one
these screens.
Six in total.
So let's get to it a little bit of typing here.
So inside of screens I'll make a new file.
The first one will be our sign up screen I'll zoom in just you can see these file names very easily
I'll then make a sign in screen.
Notice how in keeping the in and up inside of sign and sign up lowercase just makes life a little bit
easier to keep track of all.
Then do my.
How about account screen then we'll do our three different track screens.
So we've got track create screen we've got our track list screen and then finally we've got our track
detail screen.
So there's are six different files for each of our different screens.
So now we're gonna write out a little bit of boilerplate just inside of one file and then copy paste
it all around and just change a couple of variables here and there.
So I'll begin with account screen just because that's the first file inside of your SO at the top we're
gonna put together a little bit of boilerplate for a component like I said just copy paste it around
so I'll do a quick import on react from react.
I'll do a quick import of view and style sheet and text from React Native I'll then make my account
screen as usual inside there.
Right now I'll just return a piece of text and say account screen.
I'm also gonna put some styling on this text element just to make sure it's very easily visible.
I'll do a direct styled right on here just because I really expect we're not gonna have this text element
for very long.
So I gonna give the thing a font size of like about 48.
Just make it really nice and large I'll then create my style sheet
and I'll do my expert default account screen.
Now one of the change I going to do very quickly I'm going to change the text inside that text element
to be identical to the name of my component and the default expert down here as well.
Now I've got three instances of account screen get so going to save this file now I'm going to select
everything inside of here and then I'm going to go through these five other files inside the screens
directory and I'm gonna paste the exact same code.
So here's sign and screen I'll paste save sign up I'll paste and save I'll check create I'll paste and
save track detail and track list so there's all six.
Now we're gonna go through each of these additional five files and just update a couple of different
variables so I'll start first with sign and screen because the name of the component the text element
right there or the text inside the text element and the export right here are all the exact same text
we can actually change all three these things very quickly and easily if you're making use of U.S. code
you can double click on Account screen right here to select it and then if you're on Mac OS hit command
D or if you're on Windows hit I believe it is control D by default if you hit that twice it will do
a multi select on the account screen piece of text.
So now we can update all three instances at the same time just to save ourselves a little bit of time.
So going to change all three inside of sign on screen to sign in screen I'll save the file.
Notice I've got one two and three I'll close it all then go to my sign up screen so I'll do another
multi select I'll do sign up screen and save it.
I'll do my track create screen and save it I'll do my track detail.
There we go.
And then finally my track list okay.
So that should be all six.
I know there was a little pain but hey we've got them all put together and now we don't have to do a
bunch of copy pasting or rewriting of this boilerplate in this application again except for any additional
components we end up having to make.
OK.
So we've now got all six of our screens but together it's now the last thing I'm going to do is go back
to my app dot J.S. file as usual going to select everything inside of here and delete it and then we're
going to for right now just write out our six different imports for each of those different screens.
We're not going to worry about showing anything actually on the screen of our actual device just yet.
Right now let's just write out our import statements just to be done with them.
So inside of here I'm going to do an import account screen from source screens account screen and I'm
going to duplicate that down five times so I should have it six times total.
And then once again I'm going to use some multi select to get account screen right there and account
screen right there on the right hand side on the same line and I'll update each of these one by one
for the different files.
So sign and screen sign up screen track create screen
track detail screen and track list screen.
OK.
And that's it.
So I know there's a lot of typing a lot of file creation but I think we've got everything put together
like I said definitely saved ourselves some time.
So as usual very quickly just scan down here make sure you don't have any import listed twice.
Same thing over here on the right.
And then make sure that you've got the your six different files inside the screens directory.
OK.
So everything is looking pretty good to me.
So I'll take a quick pause right here.
When come back the next video we're going to start to stitch all these different screens together and
try to navigate between them with all these different navigator objects.
So quick pause and I'll see you in just a minute.