Lists Solution

[00:00:00]
>> Let's look at the solution for our list exercise. So the first thing you want to do is you want to just take this colors constant and add it to our app. Now as discussed, we want to use a FlatList for this, because we're rendering multiple things. So let's just import FlatList from React Native.

[00:00:30]
And now I'm going to just add it. Do we need a SafeAreaView? Yeah, I'm gonna just add it just underneath the SafeAreaView. So the data is going to be our COLORS array. Oops. Then our keyExtractor is going to take the item, and we're just going to use item.colorName.

[00:01:06]
So we've got our data and keyExtractor, and then we'll have to add our renderItem. So renderItem is the function that takes the item and renders whatever we need. So in this case, we'll have the item, notice that we'll have to destructure the item from here because it also returns the item ID as an object.

[00:01:30]
And let's just get one of our color boxes. And then the colorName will be item.colorName, and hex code will be item.hexCode. And because we're going to get rid of our view, I'm going to take the view styles and add them to my FlatList instead. Yehey, it's running, that's awesome.

[00:02:00]
I'm happy with this. Cool, so one thing that I've just found out, thanks to someone who pointed it out. Is that you don't actually need to use keyExtractor if you add the key here. So if your data already has a property called key, and it's a string, then you don't need to add this at all, which is quite handy.

[00:02:30]
So for example, if I just gonna do two of these, just so you could see it as an example. And comment the rest of these out. I can see it renders. And you know that it's not working because you need it, because if I get rid of it, you'll get a little yellow box warning saying that you should have a key.

[00:02:55]
So that's just a tip that if your data already has a unique key, you don't need to worry about the keyExtractor. Cool. What else? Yes, we had the solarized color name. I think that was a text, so we could just use the ListHeader component here. And then here you can actually, you can use this, it can be a function that returns a component, or you can just pass in a text directly, which is what I'm going to do.

[00:03:58]
Cool, now one thing you might have noticed is that this looks really really good on the darker colors, but you can't really see the white text at all on the lighter ones. Let's see what it looks like on Android. So it's pretty much similar on Android, we can see the scroll, and that the darker colors work and the lighter colors not so much.

[00:04:24]
So what we'd really like is that for the darker colors, we want to display the white text, and for the lighter colors you want to display a black text. Now one thing you could do is you could do textColor, and then just say white or black depending on the item.

[00:04:42]
But that won't really scale for arbitrary colors because you'd have to go and do it for every single one. So, I said is for extra credit. So what I actually did is I googled how to do this. And I found this handy little piece of code, which basically takes the hex code and they compares it to just white.

[00:05:07]
And if the RGB values are in the end 10% of the white spectrum, and you can adjust for just that color scheme. So I'm going to use this little code snippet to basically, Decide whether to display the dark text or the lights text. I'm just gonna copy this.

[00:05:30]
I'm gonna go to the ColorBox, I'm gonna add a const textColor. And I can color, I can do this, so I'll go to hexCode. So this replaces the hash with empty string, and passes it, this takes the white. And this is, the last 10% is this, then we're going to do light, otherwise black.

[00:06:07]
And I'm gonna add the textColor here. Okay, we want the converse of that. Cool, so I found that this value works for me. You can do it like, if you did 2, that's actually like, split in the middle. But I found that, I was playing around with the values, and I quite liked it when it was this, so just the whites get the dark color.

[00:06:37]
So I thought that looked nice. So there's definitely better out like, Algorithms to decide this, but I thought this was quite neat. All right, well, that's the end of this section. So before we move on to navigation, do you have any questions?
>> Is there any reason why it scrolls even though we don't have a ScrollView?

[00:07:03]
>> Yeah, because FlatList and SectionList are always scrollable.
>> Okay.
>> Yeah, so you'd use a ScrollView only if you don't have a list component.