1
00:00:01,070 --> 00:00:03,720
Our entire sign up process is working out pretty well.

2
00:00:03,730 --> 00:00:07,490
So now we need to make sure that we've got something very similar for signing as well.

3
00:00:07,550 --> 00:00:12,290
The first thing we have to do is make sure that there's a link to navigate over to the sign and screen.

4
00:00:12,290 --> 00:00:17,950
So back inside of my sign up dot J.S. file your sign up screen right here.

5
00:00:18,030 --> 00:00:22,260
We need to make sure that underneath our entire form we show some kind of link that the user can tap

6
00:00:22,260 --> 00:00:22,960
on.

7
00:00:23,060 --> 00:00:30,740
So instead of here we can just add in a import statement for touchable opacity from React Native.

8
00:00:31,070 --> 00:00:36,800
Remember we can make use of touchable opacity to essentially turn anything into a tangible kind of element

9
00:00:36,800 --> 00:00:37,790
of sorts.

10
00:00:37,820 --> 00:00:41,550
It's all place a touchable opacity with a text element inside of it.

11
00:00:41,700 --> 00:00:46,340
And whenever a user taps on the touchable opacity I'll make sure that I trigger some navigation using

12
00:00:46,340 --> 00:00:52,220
our navigation prop and we just went through all that work of exposing navigation to everything outside

13
00:00:52,220 --> 00:00:53,960
of our React Components.

14
00:00:53,960 --> 00:00:58,180
So in this case because we are inside of a react component we can just use the navigation prop.

15
00:00:58,220 --> 00:01:03,530
We only went through that navigation rough stuff so we can trigger navigation from a action function

16
00:01:03,560 --> 00:01:05,320
or something like that.

17
00:01:05,350 --> 00:01:05,560
OK.

18
00:01:05,570 --> 00:01:14,500
So inside of sign up screen down towards the bottom after my button I'll add in a touchable opacity

19
00:01:18,910 --> 00:01:21,040
I'll add in a on press to it.

20
00:01:21,580 --> 00:01:28,900
Whenever a user presses this thing I'm going to call navigation dot navigate and we're going to go to

21
00:01:28,900 --> 00:01:35,320
our sign in screen remember inside of our app dot jazz file we call that route sign in.

22
00:01:35,320 --> 00:01:42,210
Which is why I'm just calling sign in get inside of here we can place some text and say something like

23
00:01:42,240 --> 00:01:49,010
already have an account sign in instead.

24
00:01:49,040 --> 00:01:50,260
Let's try this out really quick.

25
00:01:50,270 --> 00:01:53,110
I'll save it put back over there is our link.

26
00:01:53,120 --> 00:01:54,950
It's not blue yet but we'll fix setup.

27
00:01:54,980 --> 00:01:58,250
So going to tap it and I navigate over to sign and screen.

28
00:01:58,320 --> 00:01:58,600
OK.

29
00:01:58,640 --> 00:02:00,030
Definitely easy enough.

30
00:02:00,170 --> 00:02:04,610
Let's make sure that we just add in a little bit of styling tutting so the tech shows up blue and maybe

31
00:02:04,610 --> 00:02:12,470
add that spacer component around it just to pull the text off the left hand edge case or round my text

32
00:02:12,470 --> 00:02:13,380
element.

33
00:02:13,380 --> 00:02:14,690
I'm going to add that spacer

34
00:02:18,070 --> 00:02:21,080
and then down inside of my styles object.

35
00:02:21,080 --> 00:02:22,250
Here it is right here.

36
00:02:22,250 --> 00:02:26,840
I'm going to add in another section called How about navigation or about just link.

37
00:02:26,840 --> 00:02:30,400
I think that's pretty clear and to change the color of text.

38
00:02:30,410 --> 00:02:35,850
I'll put in a style property of color is blue.

39
00:02:36,080 --> 00:02:39,160
So let's take that new style and apply it to our text element.

40
00:02:39,190 --> 00:02:40,230
So here's my text element.

41
00:02:40,230 --> 00:02:46,910
I'll say style is styles dot link hey we'll save this and see what it's looking like.

42
00:02:46,970 --> 00:02:53,890
Yeah it sounds pretty reasonable now a user can top that and navigate over to sign and screen now right

43
00:02:53,890 --> 00:02:54,400
away.

44
00:02:54,400 --> 00:02:58,120
Has I start to look at this code right here that we put together for the touchable opacity.

45
00:02:58,180 --> 00:03:03,370
I'm immediately thinking to myself well you know we have to do the exact same thing on the other screen

46
00:03:03,880 --> 00:03:08,960
so there's two ways we can get that similar link right there placed over on sign in.

47
00:03:09,040 --> 00:03:14,860
We can either retype out all this j is X or alternatively we could just make a separate reusable component

48
00:03:15,090 --> 00:03:19,720
that will essentially show the blue text for us and allow us to customize where we navigate to as a

49
00:03:19,720 --> 00:03:20,920
prop.

50
00:03:20,920 --> 00:03:25,990
So right now we'll just see this code as is but I really suspect that we're going to extract this into

51
00:03:25,990 --> 00:03:29,370
a separate reusable component very soon get.

52
00:03:29,380 --> 00:03:31,730
So this is looking pretty good and we can navigate over there.

53
00:03:31,760 --> 00:03:35,920
So let's take another quick pause and start working on our sign in screen in the next video.