We've now assembled all of our different screens together but like we just saw we can only see these
sign up screen for right now.
So we're going to flip around to some of our different files so we currently have.
We're going to add in a couple of buttons to each one and make sure that we can kind of navigate around
this flow and see some of the appropriate interactions occur.
So let's get to it.
Well first start off on our sign up screen.
It's going to open up my sign up screen inside of here from HREOC native.
I'm going to import my button element then I'm going to receive on my props object right here.
Remember we get that navigation from I'm then going to display a react fragment which remember means
we can return multiple elements from this component but it's not going to cause something to actually
be displayed on the screen.
Then right underneath that I'm going to show a button with a title of go to sign in and whenever a user
presses this thing I'm going to make sure that I call navigation dot navigate and then remember even
though we've got all this crazy nested stuff going on in order to go to a different screen we're still
going to just print out the key of the screen we want to go through to even if it is one these deeply
nested ones down here.
So in our case for the button we're putting together we want to go to the sign and screen.
So we're gonna navigate to simply sign in so back over here navigation not navigate and I'll go to sign
in
it's now I'll save this thing and we'll do a quick test.
There's my button I'll tap on it and I go over to the sign and screen.
Now I can very easily go back and forth between these two.
Now of course in our original mockups we don't have any header at the top of the sign up screen.
Instead the navigation between these is going to occur through that those kind of like blue links down
here.
So eventually we're gonna have to hide the header at the top and implement some really solid blue links
if you're on AOS you might think that we've kind of already got that in the form of the button but if
you were actually running this on Android remember on Android whenever we show a button element it shows
a big blue button through events eventually can have to come back and fix us up a little bit okay.
So we now have our intended navigation between sign up and sign in.
So now we're going to put together another button inside of here that's gonna kick us over to our main
flow.
So going to copy that button right there I'm going to paste it down here and I'm going to say go to
main flow then whenever user taps this we're going to try to navigate to our main flow remember our
main flow is essentially this whole block right here so when we go to our main flow we should see a
bottom tab navigator and we should first see our track list so I'm going to save this really quickly
I'll then tap on go to main flow in as soon as I tap that.
Notice how that navigation was 100 percent instant.
So that's the switch navigator in inaction.
Remember going between our off flow in our main flow we really want to be instantaneous and just like
okay you're logged in.
Boom.
Here you go here's your trackless screen.
So looks like that definitely the appropriate fact once we're here at the trackless screen.
Notice how we now have the bottom tab bar.
I know it looks a little empty right now.
That's just because we have not yet assigned any icons for any of these different elements.
But now we can tap between each of these different things.
And it's going to show us the appropriate screen.
Of course some of our content is going off.
That's why we increase the font size just to make sure we can see that text very easily so we can see
our track list flow our track create screen and our account screen as well.
So once again that is our bottom tab bar inaction.
Now to finish this all off the last thing we have to kind of wire up or have some kind of instrumentation
in place I suppose is to make sure that we can go from our track list screen over to the track detail
and then back to track list.
So to do so we can open up our track list screen inside of here we'll do the same thing we just did
inside of our sign up screen.
So I got to make sure that I get my button import from React Native I'll then put it in a fragment making
sure that I clean up the semicolon at the end of the text line.
I'll then show my button and give it a title of go to track detail
I'll make sure I receive that navigation prop and I'll add in my on press callback so whenever I press
that we'll do a navigation dot navigate and remember in this case we want to go over to our track detail
so put in a string here of track detail gets let's save this and we'll do one last test.
So once again we can go to our main flow.
We can then go to our track detail and we're back to that classic header interaction where we're going
back and forth back and forth.
So eventually we're going to have our big list of tracks right here that a user can tap on and go to
the detail and once they see the detail they'll then go back to the the screen.
So that's pretty much it.
That's the essentially entire navigation flow of our whole application we put together quite quite easily.
Now of course we're not going to do all this navigation with just button elements.
We're going to eventually have to have some really clever navigation where we detect that the user has
say successfully now logged in where authenticated and once they have authenticated that's when we're
going to want to actually go over to our main flow from the log and flow but I think that you can kind
of see what the overall feel is of our application now.
So once again if I refresh I can go to sign in.
Go back.
I can go to my main flow I can go between these different screens linked at the bottom.
And if I want to go to was very specific track and see it on the screen I can go to track detail.
So like I said that's pretty much it.
If you ever have to design an application from scratch as we just did I really recommend just throwing
together a big pile of navigators as we just did.
Because you're going to see that as we start to fill in some implementation here for all these different
screens.
The implementation is actually gonna be rather easy because all we have to really do now is think about
OK what data does each my different screens need.
And we're going to essentially wire up each screen in isolation and then put in a little bit navigation
between each.
But at the end of the day we're kind of just working on six separate screens and that's pretty much
it.
So this is definitely great progress.
So let's take a pause right here.
Come back the next video and start wiring up access to our API for our application.