Check out a free preview of the full Intermediate React Native course

The "View & Text" Lesson is part of the full, Intermediate React Native course featured in this preview video. Here's what you'd learn in this lesson:

Kadi walks through creating a MoodPicker component to display a horizontal list of emojis on the Home screen using View and Text. Style sheets are created for both the Home screen and the Moodpicker component to apply appropriate stylings.


Transcript from the "View & Text" Lesson

>> 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.

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.

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.

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.

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.

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.

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.

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.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now