1
00:00:00,680 --> 00:00:03,430
All right my friends just one last tiny extraction here.

2
00:00:03,430 --> 00:00:08,710
So from our sign up screen we want to make sure that we take out that touchable opacity into a reusable

3
00:00:08,710 --> 00:00:09,600
component.

4
00:00:09,610 --> 00:00:15,130
We can call it something like nav link that we can very easily reuse it between both our sign up and

5
00:00:15,130 --> 00:00:16,330
sign and screens.

6
00:00:16,360 --> 00:00:18,190
So give me that blue link right down there.

7
00:00:18,610 --> 00:00:20,260
So let's get to it.

8
00:00:20,350 --> 00:00:26,980
First off inside my components directory I'll make a new file called nav link dot J.S. then inside of

9
00:00:26,980 --> 00:00:29,530
here we're going to throw in a couple of different imports.

10
00:00:29,530 --> 00:00:34,350
So I will import react from react.

11
00:00:34,500 --> 00:00:44,790
I'll get text and touchable opacity rom react native and I think we probably also need style sheet as

12
00:00:44,790 --> 00:00:45,330
well huh.

13
00:00:45,360 --> 00:00:46,110
Let's get that to

14
00:00:49,170 --> 00:00:55,260
Next up we're going to get our spacer component from the same directory.

15
00:00:55,420 --> 00:01:02,350
And then finally we're also going to import that helper function called with navigation from react navigation

16
00:01:03,420 --> 00:01:06,910
and you might not quite recall what with navigation does.

17
00:01:07,030 --> 00:01:12,610
Remember all the different components inside of our application that are rendered directly by a navigator.

18
00:01:12,610 --> 00:01:17,470
So inside of our app dot J.S. file all of these different screen components will be rendered directly

19
00:01:17,470 --> 00:01:22,830
by react navigation and each of them will be given a props object that includes that navigation prop.

20
00:01:22,990 --> 00:01:28,150
And that's why all of our different screens are always able to reach into its props object and get access

21
00:01:28,270 --> 00:01:34,200
to that navigator if we ever have a child component like a reusable component that's displayed by one

22
00:01:34,200 --> 00:01:36,780
those screens that needs to access that navigator.

23
00:01:36,930 --> 00:01:42,960
We can either pass props from the screen component down to this reusable component or alternatively

24
00:01:43,260 --> 00:01:50,000
we can wrap the reusable component with that with navigation function with navigation is going to make

25
00:01:50,000 --> 00:01:55,130
sure that our component that we create inside this file will have direct access to that navigation prop

26
00:01:55,400 --> 00:02:00,710
and so be able to call the navigate function you might be kind of curious why are we using with navigation

27
00:02:00,710 --> 00:02:05,730
here when we just went through all that trouble of setting up that navigation ref thing.

28
00:02:05,780 --> 00:02:10,730
Well it's pretty simple at the end of the day you and I know that with navigation works 100 percent

29
00:02:10,760 --> 00:02:11,910
of the time.

30
00:02:11,930 --> 00:02:16,150
So in general we want to use what react navigation has made available to us.

31
00:02:16,460 --> 00:02:21,680
We're only made use of navigation ref over here we only created this because we're trying to navigate

32
00:02:21,680 --> 00:02:24,490
from somewhere outside of a real component.

33
00:02:24,620 --> 00:02:30,050
So I only want to use this code when I really have to because essentially it's kind of untested even

34
00:02:30,050 --> 00:02:33,380
though this is essentially what react navigation recommends we do.

35
00:02:33,500 --> 00:02:37,610
Well it's still a little bit janky and who knows when we might have to come back inside of here and

36
00:02:37,610 --> 00:02:38,510
change something out.

37
00:02:38,990 --> 00:02:42,980
So in other words I'm going to go with these solid solution when I can and I'm going to fall back to

38
00:02:42,980 --> 00:02:47,770
our homemade solution over here for navigation when I have to OK.

39
00:02:47,810 --> 00:02:50,330
So inside of here will now define nav link

40
00:02:54,980 --> 00:02:59,510
well then do our style sheet so styles is style sheet.

41
00:02:59,570 --> 00:03:01,610
Create.

42
00:03:01,760 --> 00:03:04,880
And then finally we will export default nav link.

43
00:03:04,890 --> 00:03:07,140
Now remember how we make use of with navigation.

44
00:03:07,250 --> 00:03:09,850
All we have to do is wrap this export component right.

45
00:03:09,860 --> 00:03:12,580
Right here with with navigation.

46
00:03:12,710 --> 00:03:17,840
So I'll call it with navigation and I'll wrap nav link with it.

47
00:03:17,840 --> 00:03:23,270
So now our NAV link is going to be called with the navigation prop and inside there remember is the

48
00:03:23,330 --> 00:03:27,380
navigate function and that's what we really care about.

49
00:03:27,500 --> 00:03:27,800
OK.

50
00:03:27,810 --> 00:03:30,800
Now inside of here let's go back over to our sign up screen.

51
00:03:30,800 --> 00:03:35,720
We're going to cut out all that touchable opacity stuff and just paste it directly inside of here.

52
00:03:35,750 --> 00:03:41,460
So back inside of sign up screen I'm going to take that entire touchable opacity block right here.

53
00:03:41,600 --> 00:03:46,270
I'm going to cut it and then put it inside of NAV link

54
00:03:50,470 --> 00:03:55,300
so now once again we have to go through this exercise of identifying what we want to extract and have

55
00:03:55,300 --> 00:03:58,090
be provided into NAB link as a prop.

56
00:03:58,090 --> 00:04:03,480
So I think that chances are we want to make sure that this text right here is provided as a prop.

57
00:04:03,480 --> 00:04:09,780
So I'm going to accept a prop called simply text for lack of a better term and I'll just throw it directly

58
00:04:09,780 --> 00:04:12,910
in.

59
00:04:12,940 --> 00:04:16,960
Next up we probably want the name of the route that we're going to navigate to to be passed in as well

60
00:04:16,990 --> 00:04:18,180
as a prop.

61
00:04:18,340 --> 00:04:25,190
So I'm going to accept a prop called How about root name and whenever we call navigation or navigate

62
00:04:25,460 --> 00:04:31,250
we will pass in route name case that looks good.

63
00:04:31,250 --> 00:04:35,330
Now the very last thing we have to do is take care of that Stiles dot link.

64
00:04:35,520 --> 00:04:39,290
So back inside of sign up screen I'll once again go down to my style sheet.

65
00:04:39,440 --> 00:04:40,740
There is our link style.

66
00:04:40,920 --> 00:04:47,450
I'll cut it out and then paste it down inside of my style's object inside of the NAV linked J.S. file

67
00:04:50,060 --> 00:04:50,300
okay.

68
00:04:50,330 --> 00:04:51,020
So I think that's it.

69
00:04:51,020 --> 00:04:54,590
We've now got a reusable nav link component.

70
00:04:54,650 --> 00:05:00,040
Now we'll just make sure that we show this inside of our sign up screen so back inside a sign up screen

71
00:05:01,300 --> 00:05:03,740
we can once again clean up some of these imports.

72
00:05:03,820 --> 00:05:05,480
So going to take those two out.

73
00:05:05,500 --> 00:05:18,530
I can also take out touchable opacity and then we can import nav link from components nav link then

74
00:05:18,590 --> 00:05:20,350
underneath my art form.

75
00:05:20,520 --> 00:05:21,740
Also nav link

76
00:05:24,690 --> 00:05:28,430
I'll put in my root name which is track list.

77
00:05:28,440 --> 00:05:30,600
That's where we want to see me not track list.

78
00:05:30,600 --> 00:05:35,210
That's what we did for our auth form after we signed up our root name here is going to be signed in

79
00:05:35,220 --> 00:05:41,920
we want to go over to the sign and screen then we also have to make sure we take in some text to show.

80
00:05:41,920 --> 00:05:48,700
So it's a text is already have an account sign in instead

81
00:05:53,010 --> 00:05:54,940
and that should pretty much be it.

82
00:05:54,950 --> 00:05:55,210
OK.

83
00:05:55,240 --> 00:05:59,380
So let's save this and we'll do a final test to make sure they save all the different files we've now

84
00:05:59,410 --> 00:06:02,120
edited and I'll flip back over.

85
00:06:02,370 --> 00:06:07,240
Kate I can still see the text down there says already have an account sign in said and I can tap on

86
00:06:07,240 --> 00:06:09,640
it and go over to my sign and screen.

87
00:06:09,640 --> 00:06:10,790
Perfect.

88
00:06:10,840 --> 00:06:11,080
OK.

89
00:06:11,110 --> 00:06:15,990
So I know that extracting all this logic into nav link and auth form was a little bit annoying.

90
00:06:16,210 --> 00:06:19,460
But look at how compact our sign up screen is now.

91
00:06:19,510 --> 00:06:23,080
There's like not really a lot going on inside of your very small component.

92
00:06:23,080 --> 00:06:25,440
Really easy to understand.

93
00:06:25,540 --> 00:06:30,910
And in addition we're going to essentially have the exact same stuff going on for our sign and screen

94
00:06:30,910 --> 00:06:31,950
too.

95
00:06:31,960 --> 00:06:37,300
So we're going to have the same auth form the same nav link all we have to do is customize some props.

96
00:06:37,360 --> 00:06:37,870
That's it.

97
00:06:37,900 --> 00:06:43,750
Nothing else so we are going to be able to put together our sign and screen in just a total fraction

98
00:06:43,750 --> 00:06:48,560
of the time as we've taken for sign up which is the great thing about react.

99
00:06:48,580 --> 00:06:48,850
OK.

100
00:06:48,880 --> 00:06:50,110
So enough talking.

101
00:06:50,220 --> 00:06:51,520
Let's take a pause right here.

102
00:06:51,550 --> 00:06:55,330
We'll tackle our sign in screen with these reusable components in the next video.