Check out a free preview of the full React Native (feat. Redux) course:
The "Reusable 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:

Since the CurrentWorkout component and the modal window will both have a top bar, Scott decides this should be a reusable UI component so it can be used in both places. He starts by making a Topbar UI component and styling it to display within the CurrentWorkout component. Scott then talks a little about how it will be made to be reusable.

Get Unlimited Access Now

Transcript from the "Reusable UI Components" Lesson

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

[00:00:03]
>> Scott: How do you make reusable components? Let's just make one right quick. Let's make a generic reusable component that we can pass props to and change how it works, and then I'll show you how to use the children property on a component to completely change the template or whatever.

[00:00:22] So let's do that. Let's go down to UI and we'll make a new component and what we'll do is let's make a button. No, buttons are lame. Let's just make this nav bar thing, let's just do that. So we'll do a new file and I will call this one, it's called the top bar cuz it is not really a navigation bar, not navigating with it.

[00:00:46] So let's say top bar and we'll just go ahead and head over to our index and export it before we forget to.
>> Scott: There we go. So we haven't made that yet, it's gonna break probably. I would do, very surprising. So now, we're gonna import reacts from react, we might need to make this a component depending on how we make this or not.

[00:01:15] They will import, I know we don't need view and Stylesheet.
>> Scott: But you probably think we might need more than that. Looking at the designs, like if you go look, there's a text in here so I should probably import text too. But the way we're going to set it up, this component's not even going to know about the text.

[00:01:36] It doesn't really care, doesn't care about the text. So we have that. And then, where you at, here we go, from reacts-native. Cool, so first thing we'll do is we'll export the const Top bar. Any props that may or may not come in here. And it will just render a view here, just like that, and I will say style=styles.container, and we haven't make that yet, so let's just make that.

[00:02:15] Men, I gotta turn that toggle off. It's crazy. There you go, cost styles = StyleSheet.create, and then container. All right so for the nav bar, I'm just gonna guess like, let's just say height of 60. We'll play with it, so height of 60, flex one. There we go.

[00:02:49] There's the container. So now what we wanna be able to do is, a few things we wanna be able to do. Is we want who's ever using this top bar to decide what the style of it is, they should be able to overwrite the style and they should be able to put whatever content they want in it.

[00:03:08] On this screen, we have just text that's purple. But on this screen, we have a linear gradient that's going left to right with a search bar in it with a close button. So that means who's ever using this top bar should be able to do whatever they wanna do with it.

[00:03:23] Two things we gotta do, one we're gonna pass in props. So what we can do is, you can say you know what, if you want to override the default styles here, all we gotta do is say we're gonna pass in an array and then we're gonna pass in props.styles.

[00:03:39] So now when you pass in styles on this component, because we're adding it second, it's going to overwrite whatever is here. So if you pass in a props, if you pass a styles object thathas a container property, it's gonna overwrite this container style. And whatever other style you want.

[00:03:56] Yes?
>> Speaker 2: You always use prof stuff style or props stuff style?
>> Scott: Yeah you can put style, my bad. So props.style. Yeah that's better because I think that's the convention. So we'll put style here. So this will give you a chance to override. So we can put any default stuff that we want here and overwrite.

[00:04:16] And if we decide to do like more style, like Francis was like, yeah you know what, this has padding too. So we'll put some padding of like ten and so forth. So you can do other stuff so this will overwrite the style. The next thing is we don't know what the content of this is going to be.

[00:04:36] Anybody know how to receive that and react if you just don't know what it is?
>> Speaker 3: Props.something.
>> Scott: Props.something. That's the only thing we got, got to be props.something.
>> Speaker 3: Default props.
>> Scott: Not default props. It's props.children. So probs.children gonna be whatever you pass in as a child component to this component.

[00:04:59] This is like just put it here. That's where that's gonna go. So you can do that. So now what that means is, they can style this whatever they want. Now the top bar doesn't really care what exactly this is at all. It's just props.children. That's a basic top bar of course, let's actually bring that in and see how that works.

[00:05:20] So if we go to current work out and we import topbar from topbar. Then what we can do is, we can put our topbar here. You can say topbar, there we go, and then we can overwrite the style here. So let's say style, and it will say this is gonna be styles.topbar, we'll write that in a minute, and then now this is where we add the children.

[00:05:56] So, the children we want here is actually just the texts node that says current workout. That will give us a style of styles.textbar or whatever. So we also need to go ahead and bring in the style sheet there.
>> Scott: And then we're gonna go ahead and make those styles.

[00:06:30]
>> Scott: So we've got topbar and if we look at the designs, the topbar is, what color is it?
>> Scott: Anybody know where color is? It's a trick question. [LAUGH]
>> Speaker 4: It's transparent.
>> Scott: It's transparent, yeah. [LAUGH] Color is transparent. Our background color is transparent. Yeah, you can do that now.

[00:06:59] So background color is transparent, so we're gonna override that there. So actually we're gonna mix it in. So we're not gonna overwrite anything because topbar doesn't have a background color to begin with. But just to show you, it's a little default to one and we'll see how it overwrite background color white.

[00:07:16] So, this should overwrite it. So then we'll come back here, transparent. And let's say we want to add more padding, we can do that but let's see what that looks like now, and they will say the textbar is gonna be a color. I got something like a purple thing, there wasn't but white for now, but I also wanna do justify content center.

[00:07:43] And align items center on this component. So it centers the text. There we go. So there we go. So there we got the bar right there. So let's actually just make a little better. We'll say with font size of like 40, that's a little big, 30, and it's like a border right here.

[00:08:11] Almost like a pretty solid border, so we'll say borderBottomWidth of like two. And then borderBottomColor of white. There we go. Now we have a topbar and it's a reusable UI component that you can pretty much pass anything to and over right at the same time.