This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Exercise: Applying Gradients" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: What I want to do for a quick exercise is apply a gradient to the welcome page and also the current workout page. We will use the same gradient cuz it's a color picker and to the colors but I minimum do that and then for extra credit, there is a react native vector icons plugin, if you just Google, you'll find it.
[00:00:27] Use the icons for this plus button right here, and that the icon plugin is also a native UI, it's not just JavaScript. Yes.
>> Speaker 2: Question from the chat room off topic. What is the difference between importing react versus component? In the import statement above you got components in the braces and run.
[00:00:47]
>> Scott: Right. So the difference is, so this React module right here, with a string right here, it exports a default whose value we're calling Reacts. But it also exports a named export called component. So that's the difference. So we're importing the default export and naming it reacts. And then were also importing a named export, what the name of component.
[00:01:16] So it's just like right here we have this named export called _Todo. We could also export a default. Like Indie objects or whatever.
>> Scott: And then yeah, they can import that whatever they want. So that's all that is. Giving the default name it that and give me this name export.
[00:01:37] Cool, so yeah but the gradients on there. If you look. I'll just show you because there's like actually two icons of was what they're specifically what I want you to look at. React native vector icons, this is the one.
>> Speaker 3: Jesse's one step ahead and already did this.
[00:01:52]
>> Scott: Yeah.
>> Speaker 3: He built the menu with the criteria icon.
>> Scott: Nice, that's what I'm talking about.
>> Speaker 3: He posted it 11 minutes ago. [CROSSTALK]
>> Scott: That's what I'm talking about. So yeah, use this, follow the same step to link it, and then you can use whatever. This was really cool because it actually like includes like every icon package that you've ever used.
[00:02:17] Material icons- [CROSSTALK]
>> [INAUDIBLE]
>> Scott: Probably [LAUGH].
>> Speaker 3: Well, that's a great thing about native.
>> Scott: Well that's a good thing about native. Whatever it's all a device right talking to the Internet.
>> Speaker 3: Yeah it include it all.
>> Scott: Yeah. They're gonna download it from the App Store anyway wants a few more icons.
[00:02:37] Yeah. Yeah. That's no a big deal. I think they're all namespace so when you import it you're not importing all of them. You're only importing the one that you need. So I think you're fine there because going above the no margin above or below so. Use some icons and add a plus there and then for extra, extra credit, if you really wanted to, you're probably not gonna have enough time to do this.
[00:02:58] Or you probably time till the next one. You're probably have to wait til the next one. I was gonna say for the tab bar here, put some icons on the tab bar. But this is actually a little trickier because this component won't let you stick in a component for the label you can only stick in text.
[00:03:16] So you have to render your own tab bars. So you gonna make a new component to be the tab bar and have that render the icon. So that was kind of tough but very possible.