Navigation Solution: Adding New Data

[00:00:00]
>> All right, now let's move on to part three. And let's add the two new color schemes. Now, I like to create a constant for the color palettes. So we have each palette its own item in this color palettes array. So I'm just gonna copy this over into our home component.

[00:00:27]
And I'm going to copy the two new colors over as well. So they were in here. Open up here. Cool, so the RAINBOW and the FRONTEND_MASTERS. All right, and now because we are rendering a list of array, I know that there's only three items currently but it's going to be more.

[00:01:03]
And we're going to go ahead and use a flat list. So we'll import flat list. And let's put it. Kinda nice to be here. So let's do a flat list. The data is going to be the array of color palettes. The key extractor. The item and I choose to use the paletteName cuz this is unique for us.

[00:01:52]
And finally for the render item, we'll just render the name of the color palettes. I'm going to copy the whole touchable opacity that we had below. And now currently, they all say Solarized because I haven't used the properties from item. So I'm just gonna go ahead and replace them.

[00:02:24]
So and because paleteName and colors are the same as these attributes on the object, I can just pass in the entire item. Cool. So now, if we press on the separate ones, We get the separate color patch, which is pretty cool. And now for the last part, we just like to update this ListView so it displays a preview of all the colors that we'll have in the palette.

[00:03:07]
Now, to do that, I think I just like to create a new component rather than doing everything in the home component. So let's just go ahead and do that. Let's go into our components directory. What do I call it? Let's call it palette preview. So let's create a new component in components and call it palette preview.

[00:03:34]
Now, in palette preview, as I always do, just create a Hello World thing to display something. So import React. And we import a view and a text. And we create a constant component called palette preview. And we have it return a view and some text. And finally we export it as a default export.

[00:04:29]
Now, the first thing we should do is just make the PalettePreview return what we currently are returning. So currently we are returning a TouchableOpacity with some text. So let's actually just go ahead and copy all of this that we had in the render item in the Home.js. And let's just copy it to the PalettePreview.

[00:04:54]
Now, this has two dynamic things that we're doing. One is we display the palette name and the actual color. And the other thing is we have an unpressed action. So, what we'll like to do is pass these in using props. So let's add, actually let's do this from Home.

[00:05:11]
This might be easier. So in home, import palette preview. So let's do imports Palette previewed from, notice that the home directory is if it's inside screens like it is. Now you have to go one directory up to go to components. And so instead of the touchable opacity, let's return this.

[00:05:45]
And as for props, what we want to do is we want to pass in this navigation. We'd like the navigation prop isn't by default available from pilot preview because it's just a standalone component. So we don't want the pilot preview itself to do the navigation at this point because there's no point so we're just going to create an unpress this navigation.

[00:06:07]
So let's do unpress. It usually I do handle press, I think. And it's a function. I did navigation like it did here. And then the other thing we want to pass in is the actual item. So let's just call it palette. So this will pass the whole item including your item name and the colors.

[00:06:42]
Now we can get rid of this TouchableOpacity. And this is complaining because we don't have TouchableOpacity here in the PalettePreview. So I'm going to import this. And, right, so now we've parsed into props called handle press and pallet. Let's use them, so let's do handlePress. I'm gonna call this ColorPalette, And ColorPalette.

[00:07:28]
Then we can replace this with handlePress. And finally. PalleteName you can get from colorPalette paletteName. Okay, so it's complaining because I hadn't filled this. I turned autosave off and I've always have autosave on and so it was complaining because I hadn't saved home. Cool. So, now our render item has been updated to use palette preview instead of passing in two props one is handle press and one is the actual color palette.

[00:08:03]
And then in the PalettePreview component. We use these two props to, we call handle press when the user presses on the touchable opacity, and we display the palette name dynamically in the text. So let's check that this still works. Nice and [INAUDIBLE] basically, we would like to add some style to that.

[00:08:34]
So like the headings here are significantly bolder and there's some padding. So let's make these buttons a little bit easier to press. If you remember to add styles, we import style sheets. Let me create a constant for styles, the Stylesheet.create. All right, let's first add a. Let's add a text.

[00:09:15]
Let's do font weight, bold, and let's do a font size of 18. And let's pass this in here. It's done. Nice so this works but it's not quite the same because we have padding here. We don't have padding here. So we should probably add padding to the thing that contains our palette previews.

[00:09:53]
So let's go home. And let's add a stylesheet here as well. So I'm going to remove these cuz they're not used and import style sheet. And create a style sheet at the bottom of the file. I'm gonna call this list and I'm just gonna give it padding, good padding 10.

[00:10:38]
Right there, and the other thing you might want to do is again, the background for this is quite dark, so if you don't like that, I usually make the background color white. Nice. Right, let's get those little palettePreview boxes. Now, because we're rendering multiple things, we can use FlatList again.

[00:11:10]
Generally here you could get away with just using a mouth, because you know you're rendering five things. But generally it's good to just get out of the habit of using a map and react native and just use a FlatList. So I'm going to add this FlatList just under here.

[00:11:31]
All right, so what is our data for the flattest going to be? Well, we're going to take the colors from the color palette, we want the first five. So we're going to do color palette. Slice, not splice, and the first argument is where you'll want to start the sub array, which is from 0, and then the second one is how many items you want.

[00:11:57]
So line 5. And next step we'll have the keyExtractor. Pass a new item. And here we're gonna have the actual colorPalette, so we'll use the Color Palette, so we actually have the colors. So we'll use the color name. Okay, so that's all right, this is colorPalette.colors.slice, there we go.

[00:12:29]
Yeah, so we'll have the actual color. So we'll use the color name as the key. Nice. And then finally in the render item, let's just render out the name of the color first and then go from that. Cool. All right, so here, we are not going to keep it like this but for now in the right item I am just taking the item and then I am rendering the color name.

[00:13:20]
So I can see that this is working. Now in order to make this, one thing you'll notice that obviously here, we have colors displayed horizontally. But here we have the vertically. So thinking we used to horizontal, true. Yeah. So, there's two ways to do it. You can do it with flex.

[00:13:44]
I think in the example I've actually, done it with using flex direction row, but you can, because it's just a flat list. You can actually just use horizontal true and it automatically displays horizontally. Cool. All right, next up, we want to actually create the box. So, in order to do this I'm going to, instead of a rendering a text I'm going to render a view, And I'm going to give it a style.

[00:14:23]
Now, I already know that I'm going to have two styles, one being dynamic and one not being dynamic. So I'm going to start off with an array. And then the first I want to use is the background color for the box. So let's do backgroundColor. And the background color will be item.hexCode.

[00:14:50]
Go to import the view. Nice, and currently nothing appears because our view doesn't have any height or width. So let's add some styles to give it a height and a width. So let's do box, let's do height 30 and width 30. And let's add these here. Cool this is showing up.

[00:15:24]
She's very nice, but they're all squished together. So I'm just gonna add some margin on the right. I'm also going to add some of the top, yeah. I'm going to add some like spacing between these as well. So let's add a little bit between the text and the colors with margin.

[00:16:07]
Cool, and it split out. And then. Finally we want to add some margin between these two as well. So let's just, add some on the flat list itself, just do a style, styles.list and then create a style on list and let's do marginBottom maybe 20 Yeah, that looks good.

[00:16:39]
All right, so one thing you might have noticed is that one of the front end masters colors unfortunately white. Which is the same color as our background so it doesn't show up. So what we'd like to kinda do now is we would like to, like create maybe a shadow or something in order for this to show up.

[00:16:56]
And thankfully, you can do that. Just here, so there's fortunately you have to add all the shadow properties separately. So I'm just going to copy, copy these. So we just want to add these to the box. I can see this adds a bit of color, which is a bit of shadow, which is kind of nice.

[00:17:24]
>> Do you know elevation in there?
>> Yeah. So yeah, one step ahead of me. So I was going to show so, this does things on iOS, but actually does nothing on Android. So because Android doesn't as all material design and in material design, you don't have shadows.

[00:17:44]
But on Android, you can use elevation instead, so if you do, elevation two and save, then this actually show up. It's a little bit hard to see on my screen, maybe I can do elevation 10. It will show up here you can kind of see a little shadow going on here.

[00:18:03]
So I actually I think the reason that this isn't looking the same as it did for me on my image is because in my image I actually completely forgot that you could make the flex this horizontal and I just use the flexDirection. So I think if I instead get rid of horizontal and do flexDirection Row.

[00:18:32]
Actually all the shadows show up because then we have all the spacing between them. You can make this work in both ways. Yeah, so here, probably don't want 10. And you might want to actually go and take this, all this shadowColor that we did, and also copy it to the color box that we used in here to make sure that if we go to the Frontend Masters here this white will show up.

[00:19:19]
So let's go to color box and go to the actual box styles. And then just paste the same colors in. And now you can see that the white is kind of highlighted and it shows up very nicely on the screen.