1
00:00:00,920 --> 00:00:05,660
In this video we're gonna start to set up our stock navigator and our index screen and just so you know

2
00:00:05,720 --> 00:00:09,950
we're going to eventually do the show screen create an edit but we're not going to worry about those

3
00:00:09,950 --> 00:00:10,770
right away.

4
00:00:10,910 --> 00:00:15,200
We're going to first just put together our stack navigator and the index screen and we're going to get

5
00:00:15,200 --> 00:00:19,130
just these two things working with this blog post provider.

6
00:00:19,130 --> 00:00:21,300
So we're not gonna worry about any other components.

7
00:00:21,470 --> 00:00:25,910
We're just gonna put together the index screen to start once we get a better understanding of how this

8
00:00:25,910 --> 00:00:31,520
blog post provider works then we're gonna come back and add in all those other screens to be honest

9
00:00:31,520 --> 00:00:31,940
with you.

10
00:00:31,940 --> 00:00:36,770
We're going to do kind of a series of re factors to get our blog post provider into a good spot.

11
00:00:36,890 --> 00:00:40,250
We're going to first write out some kind of basic simple code to implement it.

12
00:00:40,300 --> 00:00:44,360
We're going to point out a couple of issues and then eventually come back and add in some like really

13
00:00:44,360 --> 00:00:50,180
interesting functionality that we can use to kind of use a very similar data handling approach on other

14
00:00:50,180 --> 00:00:52,130
projects quite easily.

15
00:00:52,130 --> 00:00:57,490
So in other words first we're gonna wire up our stock navigator and just the index screen.

16
00:00:57,490 --> 00:01:02,750
So going to flip back over my code editor which is running this or open to this new application where's

17
00:01:02,750 --> 00:01:03,760
my code editor.

18
00:01:03,770 --> 00:01:08,540
There it is get some insight on my new project directory.

19
00:01:08,540 --> 00:01:14,540
The blog directory inside of here I'm going to first open up my app dot J.S. file select everything

20
00:01:14,540 --> 00:01:24,390
inside there and delete it all then create a S.R. C directory in there I'll make a screen's folder and

21
00:01:24,390 --> 00:01:31,410
then inside the screens folder I'll make a new file called index screen dot J.S. so again the goal of

22
00:01:31,410 --> 00:01:36,480
this component is to eventually show a list of blog posts our users as usual for right now we're just

23
00:01:36,480 --> 00:01:43,970
gonna throw a little bit of boilerplate inside of here so I'll do an import react from react.

24
00:01:44,210 --> 00:01:56,030
I'll get my view and text and style sheet around React Native I'll create my index screen Mr quote up

25
00:01:56,030 --> 00:02:01,190
there let me fix that up and then inside my component I bet you can guess what we're gonna do next.

26
00:02:01,230 --> 00:02:02,640
Let's place a view.

27
00:02:02,970 --> 00:02:10,560
We'll put in a text Ovitz bits and text like index screen create that styles object

28
00:02:14,330 --> 00:02:20,480
and do our export default index screen like so all right.

29
00:02:20,480 --> 00:02:27,080
So just the usual stuff you're now we'll flip back over to our apt j ust file we're gonna import our

30
00:02:27,080 --> 00:02:32,390
index screen we're gonna create a new stack navigator using react navigation and get some content to

31
00:02:32,390 --> 00:02:40,460
show up so going to flip back over to abduct J.S. at the top I'm going to import create stack navigator

32
00:02:42,320 --> 00:02:46,190
and create app container from react.

33
00:02:46,430 --> 00:02:47,450
Navigation

34
00:02:51,300 --> 00:02:58,720
then import my index screen that we just created that's going to come from source screens index screen

35
00:03:00,520 --> 00:03:05,880
will then create our navigator so create stack navigator.

36
00:03:05,880 --> 00:03:07,500
Remember this thing takes two arguments.

37
00:03:07,500 --> 00:03:11,460
The first one is can be our route configuration object so we're gonna list out all the possible screens

38
00:03:11,460 --> 00:03:13,070
that a user can navigate to.

39
00:03:13,080 --> 00:03:14,460
Right now there's just one screen.

40
00:03:14,460 --> 00:03:15,820
The next screen.

41
00:03:15,900 --> 00:03:17,110
Going to call it index.

42
00:03:17,310 --> 00:03:24,030
And I'll provide index screen and then we'll provide that second argument as well.

43
00:03:24,070 --> 00:03:29,020
So the second argument is gonna be some configuration options specifically for our stack Navigator.

44
00:03:29,020 --> 00:03:32,620
So gonna give the thing an initial root name.

45
00:03:32,620 --> 00:03:37,180
Right now we only have one index or one root called index but we're going to eventually add in more

46
00:03:37,180 --> 00:03:43,900
routes so we might as well add this option in right away and also do default navigation options.

47
00:03:43,900 --> 00:03:46,310
Remember this is going to set the title inside of our header.

48
00:03:46,360 --> 00:03:50,140
So going to provide a title and it's gonna have it say blogs for right now.

49
00:03:50,140 --> 00:03:54,280
We haven't really touched navigation options so far inside this course but in this application we're

50
00:03:54,280 --> 00:03:59,470
going to eventually start to investigate how we can customize navigation options depending upon what

51
00:03:59,470 --> 00:04:01,090
screen we're looking at.

52
00:04:01,090 --> 00:04:06,190
We're going to eventually do that in order to customize the title that we display inside the header

53
00:04:06,190 --> 00:04:11,260
for every different screen in the mockup it just shows blog list but we're going to customize it a little

54
00:04:11,260 --> 00:04:11,830
bit.

55
00:04:12,630 --> 00:04:12,900
Okay.

56
00:04:12,930 --> 00:04:15,410
So we've now create our navigator.

57
00:04:15,500 --> 00:04:25,890
So now we can do our export default create app container and I'll pass in that navigator.

58
00:04:25,890 --> 00:04:33,850
Like so let's save this and it looks like I've got a little typo somewhere I have an air around react

59
00:04:33,940 --> 00:04:37,460
not to Ovation which is definitely not what I meant to import.

60
00:04:37,480 --> 00:04:39,310
Yep looks like there's type right there.

61
00:04:39,310 --> 00:04:42,790
So I'll do navigation instead I'll save it.

62
00:04:43,070 --> 00:04:48,730
Now anytime that you start to make a little typo in imports sometimes react native really just doesn't

63
00:04:48,730 --> 00:04:50,560
want to reload your application at all.

64
00:04:50,590 --> 00:04:51,310
So let's see.

65
00:04:51,310 --> 00:04:51,500
Yeah.

66
00:04:51,580 --> 00:04:51,810
Okay.

67
00:04:51,820 --> 00:04:56,580
Looks like it actually worked this time and it looks like my android device is struggling but will get

68
00:04:56,580 --> 00:04:59,430
that working I'm going to assume it's just going to work on there eventually.

69
00:04:59,550 --> 00:05:03,110
So I got my index screen visible and there's my title of blocks.

70
00:05:03,270 --> 00:05:05,520
So at least somewhere to get started.

71
00:05:05,610 --> 00:05:06,850
All right let's take a pause right here.

72
00:05:06,870 --> 00:05:13,560
When we come back the next video we're gonna start to discuss why we need whereas it right here why

73
00:05:13,560 --> 00:05:17,010
we need that blog post provider in exactly what it's going to do.

74
00:05:17,280 --> 00:05:19,170
So quick pause and I'll see you in just a minute.