Styling

[00:00:00]
>> So next we need to display a selected state for the mood so we have this kind of blueish background and we need to copy the color of this background. So let's do style equals styles.mooditem, and mood item we'll give this a background color. This let me just check what I did okay so we'll do height and width of 60.

[00:00:38]
And now we want to make it a circle, so we'll do a border radius of 30. So if your border radius is double the width or the heights then it makes you to circle and let's center the content using justify content center. And align items center, and let's add a border color, Of white and order width of two.

[00:01:17]
Cool, so now we only want to show this style for the selected item. So let's do like mood item for the default styles and also if the selected mood .emoji equals option.emoji then we also apply styles selected. Otherwise we do nothing. Styles.selectedmooditems. And we add a selected mood item style here.

[00:02:06]
And we copy the background color. So we want all of them to be spaced the same way, but we want only the selected one to have background color. And also the border color. And the border Cool. So now only the items that we actually select, are highlighted. And finally, we also want to display the text underneath.

[00:02:40]
So let's wrap this in a view, And use a text. And here let's do option.description. And then that's only displayed for the selected items so if If option.emoji equals selectedmood.emoji then we display the description otherwise undefined. Now we need to add a style to this, so let's do style, styles.emoji,descriptiontext.

[00:03:33]
Let's create a style called description text. And we'll use this color, so let's do color So the same color as the background. And we'll do font weight bold. Text align center. And let's reduce the font size, so let's do font size 10. So now we can select these options, and they actually become highlighted when we select them.

[00:04:19]
Next up, let's do some styling. So one of the downsides well the pros and the cons of styling in React Native is that we use inline styles. And because we use inline styles we can't do things that we would in CSS where we create global class names that kind of reusable styles.

[00:04:35]
So, what I usually do is create a theme file and then in this theme file I would put all the constants that can be shared throughout your app. So in a source directory, let's create a new file and let's call it theme.ts and in here I'm going to just copy the two colour constants that we're already using.

[00:04:58]
So usually, if you were using this on a real app, you would also add things like fonts or spacing in here as far as the colors. So my convention actually where I like to use that if I use it for spacing, I would do things like space 10 for 10 and then space 12 for 12 etc.

[00:05:19]
And this is quite handy, because you will know exactly all the spacing that are used throughout your application. And also using the point number, picker does the number in the name, ensures that you won't have things like, this was medium, and then this is large. And then if you get 11, you have to call it medium large.

[00:05:41]
But we're just going to be using it for colors for now. Now next up we want to do is basically create this layout where you have a box around your emoji. You have a prompt text to ask you to select an emoji. And there's a Choose button that doesn't actually do anything at the moment.

[00:06:05]
But we're just going to start like this.
>> Is it better to use margin or reusable spacer component?
>> It depends, I think in a lot of places like margin makes more sense. Like, for example spacing around this module would make more sense. But for example, if you add spacing, like horizontally between elements, actually spacing component is super nice because it keeps your JSX tree clean.

[00:06:33]
Because basically you'll know exactly where the spacing is. You don't have to worry about was it bottom spacing or top spacing. So yeah, I use this basic component. All right. So if we're starting we're going to create this little box that has a prompt for how are you right now and a button to choose the emoji.

[00:06:50]
So for a change try to implement this just using a design. So I'm going to use the checkpoint to copy the whole file. Perfect