1
00:00:00,940 --> 00:00:05,450
We've now got that create screen wired up but a user needs to actually be able to navigate over to it

2
00:00:05,870 --> 00:00:11,080
to do so we need to add a little button into our header that will only be displayed on the index screen.

3
00:00:11,300 --> 00:00:13,920
So let's figure out how to first just do that.

4
00:00:14,030 --> 00:00:17,750
Back inside my code editor I'm gonna find the index screen dot J.S. file.

5
00:00:17,750 --> 00:00:19,450
Here it is right here.

6
00:00:19,550 --> 00:00:25,490
I'm going to find the index screen component and I'm going to scroll down underneath it to right above

7
00:00:25,490 --> 00:00:27,830
Stiles right underneath the component.

8
00:00:27,830 --> 00:00:33,110
I'm going to add in a new section here called index screen so that's a direct reference to our functional

9
00:00:33,110 --> 00:00:34,080
component.

10
00:00:34,150 --> 00:00:41,600
And I'll say navigation options equals a function like so and then inside this function we're going

11
00:00:41,600 --> 00:00:49,030
to return an object whenever our index screen is about to be displayed by react navigation react navigation

12
00:00:49,030 --> 00:00:54,580
will automatically call this function that we just assigned to navigation options and then it will inspect

13
00:00:54,820 --> 00:01:00,010
the object that we return we can use this object right here to customize the different things that are

14
00:01:00,010 --> 00:01:06,090
displayed inside of our header and what happens whenever users say taps on them or something like that.

15
00:01:06,100 --> 00:01:11,460
So one option we can set inside this object is header right.

16
00:01:11,580 --> 00:01:16,920
We're going to assign a react element directly to this thing the react element will then be displayed

17
00:01:16,950 --> 00:01:19,140
on the right hand side of the header.

18
00:01:19,140 --> 00:01:24,420
So in our case on the right hand side we want to show some kind of plus icon we could show a text element

19
00:01:24,660 --> 00:01:30,150
with a simple plus inside of it or alternatively we could find another icon from our icon directory

20
00:01:30,510 --> 00:01:35,980
to show as a little plus icon usually a text plus doesn't always show up very nicely.

21
00:01:36,030 --> 00:01:38,390
So we'll use an actual plus icon.

22
00:01:38,550 --> 00:01:44,190
So over at this icon directory I'll do a search for say plus and it looks like I've got a couple of

23
00:01:44,190 --> 00:01:45,570
results here.

24
00:01:45,760 --> 00:01:51,690
Looks like feather once again has a pretty good result so I'll import the feather icon into my index

25
00:01:51,690 --> 00:01:57,410
screen and use the plus icon on the right hand side of the header so I'll first go up to the top of

26
00:01:57,500 --> 00:02:01,550
next screen it looks like we've already imported feather into this.

27
00:02:01,730 --> 00:02:08,290
So we don't need to import it a second time we'll go back down to my header header right and assign

28
00:02:08,290 --> 00:02:16,330
it the feather icon with the name of plus all then also directly assign a size to the thing I'll try

29
00:02:16,330 --> 00:02:19,720
out a size of like 30 just to get started.

30
00:02:19,960 --> 00:02:20,230
Okay.

31
00:02:20,260 --> 00:02:27,290
Let's now save this and make sure that the icon is actually displayed so I'll save that and yep looks

32
00:02:27,290 --> 00:02:29,000
like the icon is there.

33
00:02:29,060 --> 00:02:31,580
Now it's a little bit too far to the right hand side.

34
00:02:31,610 --> 00:02:35,750
I might want to add in a little bit of margin on the right hand side to kind of push it over a little

35
00:02:35,750 --> 00:02:36,300
bit.

36
00:02:36,500 --> 00:02:40,250
But once again I'm not going to really worry about styling too much on this application so I'll just

37
00:02:40,250 --> 00:02:44,480
leave it as is if you want to add in a little bit of margin on the right hand side of the icon.

38
00:02:44,480 --> 00:02:45,960
Go for it.

39
00:02:45,980 --> 00:02:50,210
Now we've got that put together the next we need to do is make sure that if a user taps on this thing

40
00:02:50,540 --> 00:02:55,620
we navigate them to the create screen so that's really two separate steps.

41
00:02:55,630 --> 00:02:58,870
First we have to detect a tap on this icon.

42
00:02:58,870 --> 00:03:03,640
Well we've gone through that process many times remember we can use that touchable opacity element and

43
00:03:03,640 --> 00:03:08,320
then step to actually doing the navigation Well we'll figure that out in just a moment.

44
00:03:08,320 --> 00:03:14,020
Let's first rapper icon with another touchable opacity so we can detect a tap on it.

45
00:03:14,020 --> 00:03:19,470
So I'm gonna wrap my feather with touchable opacity

46
00:03:23,240 --> 00:03:31,460
like so and then I'll add it on the on press prop so inside of here I'll put my arrow function and right

47
00:03:31,460 --> 00:03:35,560
inside that arrow function is where we're going to want to initiate some navigation.

48
00:03:35,630 --> 00:03:39,990
So here's the trick to handling navigation inside of navigation options.

49
00:03:40,040 --> 00:03:46,220
This function right here is going to be called with these same navigation prop that we get up inside

50
00:03:46,250 --> 00:03:47,760
of our index screen component.

51
00:03:48,170 --> 00:03:52,580
So remember up inside of index screen we're pulling off that navigation prop right there and that thing

52
00:03:52,580 --> 00:03:57,920
has the navigate function that allows us to navigate around well we get the same thing down here inside

53
00:03:57,920 --> 00:04:01,970
of navigation options as well so we can d structure off navigation.

54
00:04:01,970 --> 00:04:10,280
Notice the curly braces and then inside of on press we can call navigation dot navigate and then pass

55
00:04:10,280 --> 00:04:12,780
in the name of the route that we want to show.

56
00:04:12,800 --> 00:04:17,540
So once again I'll open up app dot J.S. if you recall the name of our route for the create screen is

57
00:04:17,540 --> 00:04:23,360
simply create with a capital C and so in the navigate call I'll put in create with a capital C as well

58
00:04:23,640 --> 00:04:28,580
and I'll save this I get a little bit of automatic formatting but nothing has changed and that looks

59
00:04:28,580 --> 00:04:31,550
good Gates.

60
00:04:31,560 --> 00:04:34,520
Let's do a quick test so I'll go back over.

61
00:04:34,590 --> 00:04:39,960
I'm going to tap on that icon and I navigate over to the create screen and I can very easily navigate

62
00:04:39,960 --> 00:04:41,450
between the two.

63
00:04:41,520 --> 00:04:42,490
Perfect.

64
00:04:42,530 --> 00:04:42,740
OK.

65
00:04:42,780 --> 00:04:44,600
So now we are showing the create screen.

66
00:04:44,640 --> 00:04:50,280
We can now start to focus on showing the actual form to the user and then adding in a new blog post.

67
00:04:50,340 --> 00:04:52,700
Once the user has actually filled it out.

68
00:04:53,070 --> 00:04:56,910
So let's start to take care of some implementation on the great screen in the next video.