View & Text

[00:00:00]
>> Now let's do kind of a recap or things that you probably already know to actually build our mood picker. So if you prefer, you can pause at the beginning of each section and try to build this yourself without looking at the solution. I'm going to just call it home.

[00:00:14]
So what we need first is a list of emojis for you to choose from. So to recap the the two things we're going to be using here mostly are view and text, so view is the container for to be used and styling similar to dev on the web development and text is used to display text.

[00:00:33]
So, let's use this mood option array to display a list of moods in a horizontal list on the homepage. So in our project next to this means directory let's create a another directory and let's call it component. This component should live. And in the component strategy, let's get a new file and lets call it mood picker.

[00:01:00]
And in here, I'm going to copy my mood options for free to change them to fit your needs. But here are my defaults. Let's import react from react. And let's do export const mood picker and react FC And let's return should go return a view for now. Let's import view from React Native and in our screens in our home screen let's import mood picker.

[00:01:50]
From components mood picker, and just render it Now in the mood picker and let's make open up this div and that's to move options. Dont map option and let's render this inside a text so the option.emoji. All right, so firstly we need to add this a key. So let's add a key to be option.

[00:02:33]
Emoji. Now we want this to be a horizontal list, so we'll need style sheet for this. So looking for style sheets and at the bottom locate styles will be style, stylesheets.create, and we'll do mood options. And that's to flex direction row to make them go horizontal and justify content space between for them to spaced evenly so for the option container that's to style equals styles.route options All right, lastly we kind of want this to be at the center.

[00:03:25]
So let's go to our home screen and create another style sheet. So the const, Const styles equals, StyleSheet.create. And container. And let's do a flex one. And yep, and then we'll need a justify content center To make the emoji in the middle. Actually, I think I added the padding in here.

[00:04:16]
Adding const onto a steep ten as the 20. All right so now we have a list of emojis and let's quickly have a look at Android and you can see the android emojis are showing up as well, but they are different from IOS emoji. So one thing to note about emojis that they will depend on the device especially on Android, it will depend on the emoji set that the person has installed.