All right my friends just one last tiny extraction here.
So from our sign up screen we want to make sure that we take out that touchable opacity into a reusable
component.
We can call it something like nav link that we can very easily reuse it between both our sign up and
sign and screens.
So give me that blue link right down there.
So let's get to it.
First off inside my components directory I'll make a new file called nav link dot J.S. then inside of
here we're going to throw in a couple of different imports.
So I will import react from react.
I'll get text and touchable opacity rom react native and I think we probably also need style sheet as
well huh.
Let's get that to
Next up we're going to get our spacer component from the same directory.
And then finally we're also going to import that helper function called with navigation from react navigation
and you might not quite recall what with navigation does.
Remember all the different components inside of our application that are rendered directly by a navigator.
So inside of our app dot J.S. file all of these different screen components will be rendered directly
by react navigation and each of them will be given a props object that includes that navigation prop.
And that's why all of our different screens are always able to reach into its props object and get access
to that navigator if we ever have a child component like a reusable component that's displayed by one
those screens that needs to access that navigator.
We can either pass props from the screen component down to this reusable component or alternatively
we can wrap the reusable component with that with navigation function with navigation is going to make
sure that our component that we create inside this file will have direct access to that navigation prop
and so be able to call the navigate function you might be kind of curious why are we using with navigation
here when we just went through all that trouble of setting up that navigation ref thing.
Well it's pretty simple at the end of the day you and I know that with navigation works 100 percent
of the time.
So in general we want to use what react navigation has made available to us.
We're only made use of navigation ref over here we only created this because we're trying to navigate
from somewhere outside of a real component.
So I only want to use this code when I really have to because essentially it's kind of untested even
though this is essentially what react navigation recommends we do.
Well it's still a little bit janky and who knows when we might have to come back inside of here and
change something out.
So in other words I'm going to go with these solid solution when I can and I'm going to fall back to
our homemade solution over here for navigation when I have to OK.
So inside of here will now define nav link
well then do our style sheet so styles is style sheet.
Create.
And then finally we will export default nav link.
Now remember how we make use of with navigation.
All we have to do is wrap this export component right.
Right here with with navigation.
So I'll call it with navigation and I'll wrap nav link with it.
So now our NAV link is going to be called with the navigation prop and inside there remember is the
navigate function and that's what we really care about.
OK.
Now inside of here let's go back over to our sign up screen.
We're going to cut out all that touchable opacity stuff and just paste it directly inside of here.
So back inside of sign up screen I'm going to take that entire touchable opacity block right here.
I'm going to cut it and then put it inside of NAV link
so now once again we have to go through this exercise of identifying what we want to extract and have
be provided into NAB link as a prop.
So I think that chances are we want to make sure that this text right here is provided as a prop.
So I'm going to accept a prop called simply text for lack of a better term and I'll just throw it directly
in.
Next up we probably want the name of the route that we're going to navigate to to be passed in as well
as a prop.
So I'm going to accept a prop called How about root name and whenever we call navigation or navigate
we will pass in route name case that looks good.
Now the very last thing we have to do is take care of that Stiles dot link.
So back inside of sign up screen I'll once again go down to my style sheet.
There is our link style.
I'll cut it out and then paste it down inside of my style's object inside of the NAV linked J.S. file
okay.
So I think that's it.
We've now got a reusable nav link component.
Now we'll just make sure that we show this inside of our sign up screen so back inside a sign up screen
we can once again clean up some of these imports.
So going to take those two out.
I can also take out touchable opacity and then we can import nav link from components nav link then
underneath my art form.
Also nav link
I'll put in my root name which is track list.
That's where we want to see me not track list.
That's what we did for our auth form after we signed up our root name here is going to be signed in
we want to go over to the sign and screen then we also have to make sure we take in some text to show.
So it's a text is already have an account sign in instead
and that should pretty much be it.
OK.
So let's save this and we'll do a final test to make sure they save all the different files we've now
edited and I'll flip back over.
Kate I can still see the text down there says already have an account sign in said and I can tap on
it and go over to my sign and screen.
Perfect.
OK.
So I know that extracting all this logic into nav link and auth form was a little bit annoying.
But look at how compact our sign up screen is now.
There's like not really a lot going on inside of your very small component.
Really easy to understand.
And in addition we're going to essentially have the exact same stuff going on for our sign and screen
too.
So we're going to have the same auth form the same nav link all we have to do is customize some props.
That's it.
Nothing else so we are going to be able to put together our sign and screen in just a total fraction
of the time as we've taken for sign up which is the great thing about react.
OK.
So enough talking.
Let's take a pause right here.
We'll tackle our sign in screen with these reusable components in the next video.