This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Styling the Todo Application Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: So let's just walk through how I might style this thing. So what we'll do first is, we'll head over to Android and iOS and we'll change this back to Todo. And we'll do the same thing in iOS.
>> Scott Moss: Todo, okay, cool. So we got that, let me just reload this.
[00:00:31]
>> Scott Moss: What? I still have that error up in Todo, do I? Yeah.
>> Scott Moss: There we go, okay, sweet. So we have our Todo here, which yours may or may not look similar starting off. So let's just walk through some of this stuff. So I'm thinking it probably makes sense to put the input and the button on the same line.
[00:00:58] So let's just do that. And what we can do is, we can wrap the button and input inside of another view. And we'll put those in there. And what we can do is, we can style this view as a form. So that's what I'll call it. We'll say styles.form.
[00:01:18] And then what that's gonna look like is, first, we actually need to create some styles. So I'll say const styles =. Actually, let's just keep the same thing we had with the two different files here, actually. No, no, no, we'll do it right here, we'll do it here.
[00:01:35] So const styles = StyleSheet.create. And I need to make sure I got StyleSheet up here.
>> Scott Moss: There we go. And then for the form, because everything is flexed by default, but I want it to be on the same row. So I will have to say flexDirection. Did anybody else use this, flexDirection?
[00:01:57] And change it to row, cuz by default, flexDirection is a column, so everything stacks up. But if I go to row, it'll go to horizontal. So flexDirection: 'row'. I'll save that. And now they're on the same row. So this is here, this is here. But they're actually not quite exactly like I want them to.
[00:02:19] So what I'll do now is, I want the text input to be about, I don't know, 70% percent of the row and the button to be the rest. So what I can do now is, I'll give this one a style of,
>> Scott Moss: styles.input. And I'll give, no, that's the button.
[00:02:42] I'll give the input the value of styles.input. And then the button will be styles.button. So we do that, and then I'll come out here and I'll say input.
>> Scott Moss: And we could say a flex: 0.7. And then button: flex: 0.3. And there we go. So now this is flexed about 70% instead of the rest of the 30%.
[00:03:16] This is too far on the edge here, so let's just give this some padding. So we'll make a container here. So we'll say styles.container. And for the container, we'll just add some padding.
>> Scott Moss: We'll say a flex: 1 first, and then some padding of like 20.
>> Scott Moss: There we go, a lot better.
[00:03:46] So now we got some padding. This is starting to look a lot better. This button doesn't really look like a button. Looks like some word that's just floating, so let's fix that. So what we can do for that is, let's give it a borderWidth: 1. And then a borderColor of, let's just go with a lightgrey for now.
[00:04:10] Or let's do a blue.
>> Scott Moss: So we got that. So that's blue, still not there yet. Let's do a borderRadius: 3. And then we'll also justifyContent: 'center'. And alignItems: 'center'. So that'll center the word in there for us. There we go, so we got that. Button's looking more like a button.
[00:04:40] Let's give it a height: 30. No, that's too low, more like 50. There we go, sweet. So it's getting a lot better. Now let's actually style the text in the button. So what we can do is, you can go that TouchableOpacity or whatever touchable element you have there.
[00:05:02] And we'll give it a style of styles.text, or a buttonText.
>> Scott Moss: There we go, and then we'll come down here. And we'll say buttonText.
>> Scott Moss: And we will make this a fontSize: 24.
>> Scott Moss: And we'll say fontWeight: 'bold'.
>> Scott Moss: Cool, I guess that's a button. So okay, there we go.
[00:05:43] The input, let's look at the input now. Input's kinda small, so we'll change that, too. So we'll give this the same fontSize: 24 as the button does. There we go.
>> Scott Moss: And,
>> Scott Moss: That will just work for now. Great, and now, if we actually type some stuff in and we hit Enter, we'll see that it just pushes over here.
[00:06:12] What is this, did I say that somewhere?
>> Scott Moss: Where is that at?
>> Scott Moss: sd, it's just a module reloader. It's got old state.
>> Scott Moss: Just sometimes, you just gotta reload it. [LAUGH] There we go. Okay, so now, when we add some stuff, it's right here. It's kinda gross, so what we'll do now is, let's add some padding on.
[00:06:46] Or actually, let's add some margin on this view right here, which is the view that's gonna have the list. So we'll call this one style={styles.todos}. That'll be our todos. We'll come down here.
>> Scott Moss: todos, and we'll just give it a marginTop: 30, or more. How about 60, something like that?
[00:07:20] Yeah, that'll work, so there we go. And then, while we're down here, we'll just make another one for the todo, what that's gonna look like. And that's just gonna have a borderBottomWidth: 1, and then a borderBottomColor, and we'll just put 'lightgrey'. So we'll do that.
>> Scott Moss: And then now, on this text right here, we can put style={todo}.
[00:07:57] Actually, this isn't gonna work on a text. It's gonna break, actually, because we can't put borders on text. But let's just check it out. Yep, probably gotta wrap this in a view, which is probably more appropriate. Wait, I think I did do it, that's cool. No, wait, I didn't do a border.
[00:08:14] Yeah, so what I'll have to do is, I'll have to wrap this in a view itself. So we'll say View and then put that in there.
>> Scott Moss: And this will be a style.
>> Scott Moss: sytles.todo, and this'll be todoText.
>> Scott Moss: There we go, so we got that. And we can head back down here.
[00:08:38] And for todo, let's do a marginBottom: 10.
>> Scott Moss: And then for the todoText, well let's do a fontSize: 24. There we go. So now we actually have a not so ugly-looking, still would never use this or launch it in the App Store. But it's not so bad now, compared to what it used to be.
[00:09:12]
>> Scott Moss: Cool, any questions on styling?
>> Scott Moss: Who thinks they had a really legit-looking todo app that's ready for funding?
>> Speaker 2: [LAUGH]
>> Scott Moss: [LAUGH] Uh-huh, yeah, and this is just freaking out, obviously. Cuz I didn't put the key back on the the root that's being iterated over. So the key belongs on the view now and not the actual text.
[00:09:39] So that's why that was freaking out. But you could just dismiss that. If you don't wanna see those, another shortcut is, you can just come in here, in Dev Settings, and just turn Dev Mode off. It'll get rid of it. But I'm gonna keep it on. Cool, any other questions on styles?
[00:09:56] Obviously, that's not all the styles. But you can get away with about 80% of styling with just view and text inside of React Native. The other stuff is specific to the components, but mostly view and text.
>> Speaker 3: What about making stuff look like native, controls and stuff like that?
[00:10:13]
>> Scott Moss: Yeah, so if you want stuff to look like native, there's two ways. One, hopefully, the React team will compile just the base, like, for instance, what's a good version? Yeah, so if we use Switch. So we use Switch here. Come here, get out of there. And you put a Switch, let's say, here.
[00:10:44]
>> Scott Moss: I knew it was gonna do that.
>> Scott Moss: So we put a Switch in here. See, it's the native Android Switch. This is not the native iOS one. This is a Material Design Switch native for Android, all right? So most of the components that React Native provides for you, the UI components, are gonna be the native implementation with some small difference.
[00:11:10] Like, for instance, the input here, the input in iOS doesn't look like this at all. This is definitely the Android input, it's a Material Design input, whereas the iOS input looks completely different. But then you have things like TouchableOpacity that is nothing, you gotta style it yourself. Now, if you wanna make it look like that, a lot of people have made a lot of libraries that just give you all the styles to make it look just like iOS 9 or Android Lollipop.
[00:11:35] I think, when it comes down to that, you just need to design a really nice global theme and figure out if you want things look different on different platforms. And maybe you don't, maybe you do. You can, like I said, leave it up to React Native to do it.
[00:11:48] But ultimately, you're just gonna have to style it yourself or find some other implementation that does it for you. And there really isn't a better solution than that. But React Native is pretty good about using the native versions of the UI components themselves. Which is why Android took a while, cuz they wanted to get all the stuff in there.
[00:12:06] So yeah, that's pretty much it.