FlatList

[00:00:00]
>> Kadi Kraman: So, we've used a ScrollView here and we've mapped over an array of items to render things in ScrollView. And this is actually something that you shouldn't do in React Native. The ScrollViews are really handy for pages that you think might be longer than a device's screen. But if you have an array of items that you map over to render, then you shouldn't use a ScrollView.

[00:00:28]
In fact, you should use another component called FlatList. So FlatList is a completely new component if you're coming from the web, so there is no equivalent in the web at all. And basically, a FlatList is a more optimized way of rendering large sets of items on the Native platform.

[00:00:46]
The reason it's optimized is that, it actually tracks how much visible area you have on your page, and it doesn't render items that are way outside of this visible area. It will also unmount items that you've scrolled past. So let's import FlatList from React Native.
>> Kadi Kraman: So to convert this into a FlatList, we'll do a FlatList at the top level, so this will completely replace our ScrollView.

[00:01:20]
And we'll pass in our array of items. So we'll use the data prop. So data is going to be our ShoppingList.
>> Kadi Kraman: And then the other property this has is a renderItem function. So basically, for each of these shopping list items, you are giving the FlatList instructions on how to render them.

[00:01:46]
So this will be a function. And each of this shopping list items will be passed into the render item as an object. So there will be an object and it's called Item. So you need to render item, so this will be props.Item or if you're destruction compared item.

[00:02:10]
>> Kadi Kraman: And then we're going to return our shopping list item,
>> Kadi Kraman: And the name is going to be Item.name. We don't need the key because, so FlatList actually handles the keys for you as well, if your data has either an ID or a key. So if the data that you're passing in has an ID or a key, then those will be used automatically.

[00:02:43]
If the data you're passing in doesn't have those, you would have to use this keyExtractor function, to generate a unique ID for data. By our case, we don't need to do that because we have an ID. So sticky header indices work with flatness, so we can copy that over.

[00:03:04]
And we can also copy over the style and the content container style. And I think that [COUGH] is so we can get rid of the ScrollView. No we can't, we forgot about the text input. So the text input, so now we have a list of items with the shopping list, but where do we put our text input?

[00:03:27]
So text input goes to the header of our list. And thankfully, with FlatList we have a component for that. So there is a ListHeaderComponent, and I think it's a function,
>> Kadi Kraman: Where we can pass in our text input. And now we can get rid of our ScrollView.
>> Kadi Kraman: Lovely, so functionally, this should look pretty much the same as did before, but practically, it will be a much more optimized version.

[00:04:11]
Actually, I had a good demo of this, but we don't have a very long list, how can I create a very long list? So this is just an example, cuz I wanted to show you what it looks like if you pass in a bunch of things. So testData, so let me do a new array
>> Kadi Kraman: Of like a thousand items.

[00:04:39]
>> Kadi Kraman: Fill, null, and then let's map over it.
>> Kadi Kraman: And let's just do id, Item.name.
>> Kadi Kraman: Okay, so I think this should just be a very long array of numbers. So if I pass this in, instead,
>> Kadi Kraman: What am I doing wrong? Id, name,
>> Kadi Kraman: Test data.
>> Kadi Kraman: I'm confused at why this is null.

[00:05:37]
>> Kadi Kraman: Item.name.
>> Kadi Kraman: So actually, I want to do, I don't want this, I want the index.
>> Kadi Kraman: So what happens when you do things that you weren't planning on doing, let me just make sure, what is going on here?
>> Kadi Kraman: Item, index.
>> Kadi Kraman: Okay, this is what I was testing.

[00:06:32]
Sorry, it was an array of numbers. It was array of nulls, of course, they were all null. [LAUGH] So okay, so this is a massive list of a bunch of numbers. So what I wanted to show you is, if I just console log,
>> Kadi Kraman: This is running on both my iOS simulator and Android emulator, [LAUGH] so that's why there's a lot of rendering here.

[00:07:08]
Let me just close the Android one.
>> Kadi Kraman: Okay, so notice that there was 1,000 things in my list, but then, by default, 129 of those get rendered. If each of these items were longer, few of these would get rendered. And then, as I move in the list, more of these will get funded.

[00:07:38]
So that's what I mean bout FlatList, automatically optimizing it. And the reason it can do that is because of this renderItem function. So it's calling a renderItem on this item when it's ready to be rendered. So that was the example. Just changing this back to our shoppingList.
>> Kadi Kraman: And I'm gonna make this into an implicit return, I think that's what I did in the code example.

[00:08:08]
Lovely. So, the FlatList has a bunch of useful properties, and one thing it actually has is a ListEmptyProp. So you can define something, so rather than doing, if shoppingList.length is 0 then render something, otherwise render the FlatList. You can have something that's built into the FlatList that renders this ListEmptyComponent if the shoppingList is empty.

[00:08:39]
So let's do ListEmptyComponent, and make this into a View with some text.
>> Kadi Kraman: And let's say, your shopping list is empty. Import these from React Native.
>> Kadi Kraman: And let's just give the view a style. So style,
>> Kadi Kraman: Styles, ListEmptyContainer, and in our style sheet we'll create an object.

[00:09:28]
And let's give it a justifyContent: center and alignItems: center.
>> Kadi Kraman: And a bit of a vertical margin, so marginVertical: let's do 18.
>> Kadi Kraman: Lovely, okay, so now we can actually get rid of our initial shopping list. So let's start with an empty array instead. And because my array is empty, I'm getting your shopping list is empty list empty placeholder.

[00:10:10]
I know what I've done wrong. So, mistakenly in this ListHeaderComponent, I've put the text input into a function. So every time I change it, it actually re-renders it, which means that the keyboard disappears. Pretty sure that is it. So let me just remove this function.
>> Kadi Kraman: There we go, that was the problem.

[00:10:35]
So now if I do my keyboard, and now yeah, there we go.
>> Kadi Kraman: There we have our coffee in our shopping list.
>> Kadi Kraman: So yeah, just to reiterate, the reason it was re-rendering is because I put a function here in the list. List had a component, which means that this text got remounted every time the value changed, and then that would close the keyboard.

[00:11:07]
So, hope that makes sense.