1
00:00:00,780 --> 00:00:03,130
We've now got a pretty good idea of how to work with J sex.

2
00:00:03,150 --> 00:00:08,580
So now we're gonna move on to our next topic which is dealing with lists showing lists of elements inside

3
00:00:08,580 --> 00:00:11,070
of a mobile application is super fundamental.

4
00:00:11,070 --> 00:00:15,130
So we're gonna spend a decent amount of time on it to make sure we really understand what's going on.

5
00:00:15,330 --> 00:00:18,950
To get started on your first create a new component inside of my screens directory.

6
00:00:19,200 --> 00:00:25,650
So inside of you I'll make a new file called list screen dot J.S. than inside of here we're going to

7
00:00:25,650 --> 00:00:28,910
write out a little bit of boilerplate to create a react component.

8
00:00:29,080 --> 00:00:33,270
So I'm going to write out import react and react.

9
00:00:33,270 --> 00:00:43,230
I'll import view text and style sheet from React Native or then create my list screen component

10
00:00:48,030 --> 00:00:48,460
in front.

11
00:00:48,470 --> 00:00:57,020
Now I'll return a text element that just says list screen I'll then create my style sheet so I'll say

12
00:00:57,020 --> 00:01:00,130
count styles is styles sheet.

13
00:01:00,170 --> 00:01:03,000
Create and put in an empty object right now.

14
00:01:03,020 --> 00:01:09,610
Then export default list screen OK so this boilerplate right here you might even want to copy paste

15
00:01:09,610 --> 00:01:14,740
off and keep around because we're going to write out many many times throughout this course.

16
00:01:14,790 --> 00:01:15,960
So now we just save this file.

17
00:01:15,970 --> 00:01:20,260
Once again we're not going to see any change on the screen of our device to actually get this thing

18
00:01:20,260 --> 00:01:20,820
to show up.

19
00:01:20,830 --> 00:01:25,840
Remember we have to import it into our app dot J.S. file and wire it up to that navigator.

20
00:01:25,880 --> 00:01:30,910
It's going to change back to the app dot J.S. file inside my root project directory at the top.

21
00:01:30,910 --> 00:01:41,530
I will import the list screen from source screens list screen and then we will wired up to our navigator

22
00:01:41,530 --> 00:01:42,450
right here.

23
00:01:42,450 --> 00:01:51,100
So I will say list is list screen and then finally I want to show that screen by default when our application

24
00:01:51,100 --> 00:01:55,600
first starts up it's going to change components right here to list instead.

25
00:01:55,660 --> 00:01:59,830
Now eventually we're going to add in some ability for our users of this little application we're putting

26
00:01:59,830 --> 00:02:02,920
together to change but tween all these different screens.

27
00:02:02,980 --> 00:02:07,750
But for right now we're just going to stick with this kind of strategy of use using the initial root

28
00:02:07,750 --> 00:02:10,000
name to show different components.

29
00:02:10,000 --> 00:02:11,270
So eventually we'll fix this up.

30
00:02:11,350 --> 00:02:13,840
But right now this is working out just fine.

31
00:02:13,990 --> 00:02:14,230
Okay.

32
00:02:14,260 --> 00:02:19,390
So I'm going to now check out my device and yep there we go I've got my list screen now that we've got

33
00:02:19,390 --> 00:02:20,610
something to add some code to.

34
00:02:20,770 --> 00:02:24,070
Let's take a quick pause and then talk about how we build lists in the next video.