Our entire sign up process is working out pretty well.
So now we need to make sure that we've got something very similar for signing as well.
The first thing we have to do is make sure that there's a link to navigate over to the sign and screen.
So back inside of my sign up dot J.S. file your sign up screen right here.
We need to make sure that underneath our entire form we show some kind of link that the user can tap
on.
So instead of here we can just add in a import statement for touchable opacity from React Native.
Remember we can make use of touchable opacity to essentially turn anything into a tangible kind of element
of sorts.
It's all place a touchable opacity with a text element inside of it.
And whenever a user taps on the touchable opacity I'll make sure that I trigger some navigation using
our navigation prop and we just went through all that work of exposing navigation to everything outside
of our React Components.
So in this case because we are inside of a react component we can just use the navigation prop.
We only went through that navigation rough stuff so we can trigger navigation from a action function
or something like that.
OK.
So inside of sign up screen down towards the bottom after my button I'll add in a touchable opacity
I'll add in a on press to it.
Whenever a user presses this thing I'm going to call navigation dot navigate and we're going to go to
our sign in screen remember inside of our app dot jazz file we call that route sign in.
Which is why I'm just calling sign in get inside of here we can place some text and say something like
already have an account sign in instead.
Let's try this out really quick.
I'll save it put back over there is our link.
It's not blue yet but we'll fix setup.
So going to tap it and I navigate over to sign and screen.
OK.
Definitely easy enough.
Let's make sure that we just add in a little bit of styling tutting so the tech shows up blue and maybe
add that spacer component around it just to pull the text off the left hand edge case or round my text
element.
I'm going to add that spacer
and then down inside of my styles object.
Here it is right here.
I'm going to add in another section called How about navigation or about just link.
I think that's pretty clear and to change the color of text.
I'll put in a style property of color is blue.
So let's take that new style and apply it to our text element.
So here's my text element.
I'll say style is styles dot link hey we'll save this and see what it's looking like.
Yeah it sounds pretty reasonable now a user can top that and navigate over to sign and screen now right
away.
Has I start to look at this code right here that we put together for the touchable opacity.
I'm immediately thinking to myself well you know we have to do the exact same thing on the other screen
so there's two ways we can get that similar link right there placed over on sign in.
We can either retype out all this j is X or alternatively we could just make a separate reusable component
that will essentially show the blue text for us and allow us to customize where we navigate to as a
prop.
So right now we'll just see this code as is but I really suspect that we're going to extract this into
a separate reusable component very soon get.
So this is looking pretty good and we can navigate over there.
So let's take another quick pause and start working on our sign in screen in the next video.