Passing Multiple Styles to Component

[00:00:00]
>> Kadi Kraman: So the next step we're going to add a mark ask completed UI. So if we scroll down to see what we're going to be building. So remember this is a shopping list. So we add things to our shopping list, and then we can delete them. But then the other action we want to do is mark them as complete.

[00:00:18]
So we have picked up tea from the shop Apps, but we don't want to delete t from a shopping list because we might want to re-add it later. So this UI is gonna be this gray out UI and we're gonna have the text crossed out and the delete button also, kind of grayed out, but you can still use it.

[00:00:38]
>> Kadi Kraman: So.
>> Kadi Kraman: Let's start by adding some more colors to our theme file. So let's do a color gray. So this is actually the system gray. I haven't looked up the hex color for that, but you can just do gray. And let's do a light gray as well, so color light gray I find that this e color [LAUGH] is really convenient to use as a light gray.

[00:01:08]
I tend to use it a lot.
>> Kadi Kraman: Now in our shopping list item, we can add another prop for whether or not, this item is completed or not, so let's add an is completed. And let's make this one optional, so we'll default to false and make it an optional Boolean, there we go and here we can import.

[00:01:40]
Or we can de-structure it from our properties, all right? And then we basically want different styles based on whether the item is completed or not. So the handy thing about this style prop is that you can pass in an object, so a style object. But you can also pass in an array of style objects so I can do this.

[00:02:07]
>> Kadi Kraman: And the other handy thing is that you can parse in undefined. So if you parse in undefined here, it's totally fine, which means you can easily add conditional styles here.
>> Kadi Kraman: So let's add, so we have an ItemContainer, so let's do a CompletedContainer, and let's do in our ContainerStyle.

[00:02:39]
We'll do if this isCompleted is true, so if isCompleted, then we will also add styles.CompletedContainer. I think I misspelled container here. It needs an a, container.
>> Kadi Kraman: Otherwise, let's just do an undefined.
>> Kadi Kraman: And in the completed container, let's give it a background color and use our LightGrey.

[00:03:16]
>> Kadi Kraman: And a border bottom color.
>> Kadi Kraman: Order bottom color. And let's, so it's Solu Saru, and let's make it,
>> Kadi Kraman: Let's make it a light gray as well. And actually, I've spotted that I forgot to actually use my cerulean color from my theme file. So let's do that.

[00:03:51]
>> Kadi Kraman: All right, and none of our UI is updated, why? Because we actually, none of our existing components are using this isCompleted prop. So let's mark a couple of these completed. So with the reaction native, so you could pass in the prop like this.
>> Kadi Kraman: So true, but for Booleans in particular, coz it's a very common thing for Booleans if something is true, you can also do this.

[00:04:17]
So you just pass in, it's completed. And you can emit the equals true. So you can only do this with Boolean properties if the Boolean is true.
>> Kadi Kraman: And I think we also wanted to add some custom styles for the button. So we have our button here. So let's do the same thing.

[00:04:39]
So, let's convert this into array and let's do a completed button.
>> Kadi Kraman: And do isCompleted use the styles/.completedButton, otherwise undefined.
>> Kadi Kraman: And in the styles, let's give it a grey background.
>> Kadi Kraman: And finally, for our text, we again do the same thing. So old handed this now. So let's convert this into array.

[00:05:30]
And let's say if isCompleted, it will be theme dot, sorry no theme, styles.completedText, otherwise undefined. And then for the completedText, let's add a text decoration. So we can do a textDecoration line, line-through.
>> Kadi Kraman: And we also need to give it a color so textDecorationColor. Let's do theme and color gray.

[00:06:18]
>> Kadi Kraman: I've made a mistake here and I've put this on a delete button. [LAUGH] and we delete that. So I wanted this to be on the item text button, there we go. So this needs to be an array and I've got a little if statement here, there we go.

[00:06:40]
So these get crossed out. I think I use a different color for this as well. So let's do a color theme, colorGray. There you go. So now we have two different UI types. So we have a completed UI for our shopping list item and a to do UI.