Check out a free preview of the full React Native (feat. Redux) course:
The "UI Components" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

User Interface components encapsulate their functionality and state. Scott demonstrates how to create the CurrentWorkout component which will occupy the first tab within the <TabView>. He also walks through the other UI components that will need to be created in the Sweat Book application.

Get Unlimited Access Now

Transcript from the "UI Components" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott: So, by now, this is just a text. This is just a little text, this action needs to be another component. It's gonna be the current workout component. So, what I'm gonna to do is we're gonna work to build an app, and then, we're gonna look at the design.

[00:00:14] We're gonna look at some of the UI components that we need to create. And then, it's gonna be your mission to create those UI components, knowing what you know so far. So, things like search boxes, and nav bars, maybe your own buttons if you want to create those things.

[00:00:28] So, first, let's get rid of this text and instead, we'll use, we'll come over to our source. And everything that I'm doing right now, I'm gonna push up, so, you'll will be able pull down, and that's where you're gonna start from. So, we'll go to our source here, we'll create a new folder right here on source, and we'll call it UI.

[00:00:45] And then, we'll also just create a index.js, so, we can put everything there eventually. And then, let's create our first UI component. I mean, yes, technically, this is a container, others make it UI for now. I think it could be either or. So, I'll say this is gonna be our current

[00:01:07]
>> Scott: workout.js. And we'll import reacts, and right now, we'll just make it stateless. I will just import View and Text. So, View and Text from react-native, there we go. And then what I wanna do is just export. cont current work out which is going to be props. If we can use them right now and was say it's going to be a view with the text.

[00:02:02]
>> Scott: This is Current work out. There you go. Well it's just plan. Equals. Sweet. Is now we have that. I'm just gonna export a radio index so I can import it easily. So exports Current workout from current workout and now when I import I can just import from this UI folder versus the current workout file.

[00:02:30] I'll head back over to containers to main and I'll import current workout from UI. There we go. And now I just put current work out here with the tab label.
>> Scott: Plus whatever. Cool. So now we're in the current workout.
>> Scott: See that? Okay, cool. Any course on that.

[00:03:10] Why I did that? I did I was I don't want to just, this gonna be a big component. I didn't wanted do inline inside this template. Because what if we have other tabs in here? And so that means all the JSX [INAUDIBLE] is gonna be in here along with all their state.

[00:03:25] That's not the whole point. So let's break that out into something else, which is what I did. So if you go look at that page on current work out. Here it is right here. It just says, add some exercises with a plus So actually a lot more going on here than just it looks pretty simple but actually there's a lot of stuff going on.

[00:03:43] Once we have a tab, so we already have that, we're good to go. Where the tabs or the top of the bottom. That's a row of it is a property to change that. I decided to put on the bottom and if you want to do that. I'm sure you looked already used but tab are positioned and used but bottom up an overlay bottom to make it transparent.

[00:03:59] So overlapBottom places it on the bottom and transparent. But anyway, lots of going to our first. There's this little navigation bar, header bar that we don't have here. This is not here. So we're going to make that and the reason we need to make that is because we're also gonna to have it here as well.

[00:04:17] There it is again, this time it has a search bar inside of it. So we need to make sure it really gonna use it in two places perfect example of a UI components. You will be making that. The second thing here is it says as an exercise and there's a plus sign.

[00:04:30] So what that means is with there were exercises. This probably won't show up or maybe exercise will be above it in this will just show beneath it. So I need this need to know about the current work out somehow And then render them and if not have a way for you to add them.

[00:04:44] Right? So that's what we need to do and if we go look what we did a long time ago when we first set up we already got a reduce everything set up for the work out pretty awesome. We already have this stuff set up to get the work out and stuff and there's already an API db.jason that has a current work out We gonna o use to store the current work out of fetch it.

[00:05:07] So what we need to do now is find a way to put that all up before we do that we need to go ahead and create those components. That's going to be on the page when we do have that A-P-I So with those components are going to be again if you look at the U-I just one more time/ We need a component that's going to say you know when you add some exercises and when you click on it, It's gonna to do something.

[00:05:30] What that something is that's a relevant yet, we'll hook up that later it's just gonna launch this Moto here. If you wanna look ahead the docs and figure out how to launch that mode, you can totally do it but we'll do it later. We also need to make this little bar at the top that just says current work out, and we need to bring that in and make it always on top And again it needs to be pretty reusable because we wanna be able to use it here but you see now this one has like a left or right gradient on it with a nav bar inside of it.

[00:05:56] So how would you make a composer that's reusable? We'll go over that in just a second. And then we also need to have like, I'm gonna leave this part up to you your imagination the actual lists Of the workouts after you add them. So what they're gonna look like.

[00:06:09] So basically if you go look here. There's a list of workout some similar to this. However you want that to look like we need to if we tap on a workout it needs to be added to the list here and that's it.