1
00:00:00,840 --> 00:00:04,290
We've now got a component put together that we can use to experiment with listen.

2
00:00:04,290 --> 00:00:07,930
So let's get a better idea of how we build a list with react.

3
00:00:07,950 --> 00:00:08,180
OK.

4
00:00:08,210 --> 00:00:09,560
So here's the general idea.

5
00:00:09,660 --> 00:00:13,800
We're always going to start off with some array of records that we're going to want to represent on

6
00:00:13,800 --> 00:00:15,460
the screen in some fashion.

7
00:00:15,480 --> 00:00:20,970
So this might be an array of objects where each object has maybe a Name property so maybe every object

8
00:00:20,970 --> 00:00:23,950
inside of here represents a friend or something like that.

9
00:00:24,030 --> 00:00:29,490
We could also have an array of numbers or an array of strings or an array of absolutely anything.

10
00:00:29,490 --> 00:00:34,590
But in general when we are building up a list with React Native our starting point is an array an array

11
00:00:34,590 --> 00:00:39,650
that we want to build out into a series of different React Components and show to the user in order

12
00:00:39,650 --> 00:00:43,310
to take an array like this and turn it into a series of React Components.

13
00:00:43,310 --> 00:00:48,170
We're going to use another one of those primitive elements from React Native the primitive element we're

14
00:00:48,170 --> 00:00:50,900
going to use is called The Black List.

15
00:00:51,140 --> 00:00:56,120
So we're going to use the flat list primitive element to take an array of records and turn it into some

16
00:00:56,120 --> 00:01:01,450
list to display on the screen of our device when we make use of the flattest element.

17
00:01:01,480 --> 00:01:04,580
We're always going to pass in two different props.

18
00:01:04,590 --> 00:01:11,280
Remember props are configuration options so we specify when we write out a J OSX element the first required

19
00:01:11,280 --> 00:01:13,620
prop is called data.

20
00:01:13,620 --> 00:01:15,690
So we have to pass in an array of records.

21
00:01:15,700 --> 00:01:22,680
So we want to turn into a collection of React elements to show on the screen now flat list doesn't technically

22
00:01:22,710 --> 00:01:26,400
just figure out for us how to display each of these different elements.

23
00:01:26,520 --> 00:01:32,040
Instead it's up to you and me to provide a function called the render item prop that's going to be called

24
00:01:32,040 --> 00:01:37,020
with every individual element out of that array and it's going to be up to you and me to return from

25
00:01:37,020 --> 00:01:43,190
that function a little bit of J.S. X that describes how we want to show each element on the screen.

26
00:01:43,380 --> 00:01:47,100
We'll see how to write that out in just a moment because when I use words to describe that it's a little

27
00:01:47,100 --> 00:01:47,850
bit confusing.

28
00:01:49,620 --> 00:01:54,120
Now last thing I want to mention really quickly is if you're coming from a world of React J.S. from

29
00:01:54,120 --> 00:01:59,160
the web you might be used to mapping over an array of data to build out a list.

30
00:01:59,160 --> 00:02:03,820
So in the react native world rather than doing that we use the flat list element instead.

31
00:02:03,820 --> 00:02:08,400
And the reason for that is that the flat list has a bunch of optimizations built into it to render a

32
00:02:08,400 --> 00:02:13,830
huge list of elements on a mobile device and a very performance fashion and we'll describe how that

33
00:02:13,890 --> 00:02:17,000
optimization works in just a little bit okay.

34
00:02:17,050 --> 00:02:20,920
So now that we've introduced the flat list element we'll take a quick pause and then come back to our

35
00:02:20,920 --> 00:02:23,980
list screen the next video and get a better idea of how to use it.