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

Scott walk through the solution to the Applying Gradients exercise.

Get Unlimited Access Now

Transcript from the "Applying Gradients Solution" Lesson

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

[00:00:04]
>> Scott: All right, so this is what I have right here, which is this. So I put the gradient. I got the same colors, you could a color tool and figure the colors if you look at designs. And I kinda make a lot closer to it. So what's actually happened here is I imported the linear gradient that we talked about.

[00:00:21] I brought it in, here the color codes for those two colors from this purple to this magenta pinkish color. But then I also installed this other thing that I didn't tell you about which is a button. So we don't have to use touchable pass anymore. There's this button component that you can install with this command right here.

[00:00:39] APM install apsl-react-native-button. If you was to Google React Native button, I'm sure you'll see a lot of them. This is just one of my favorite ones. There's tons of them out there. So I'll just use the button for the start work out here. And that's basically it for this one, and we'll build the main one together, just to show you.

[00:00:58] Any questions on this one? And I changed the styling around to put everything in the middle because remember, everything is flex, right? So I got these containers, my convention for the styling was, so I have this huge, I have the overall container which is the root, which is the layer gradient, right?

[00:01:15] So that gets a flex one. And then what you can do is you can just put a line item center on that container and all of its children's gonna be centered automatically. But you can also individually wrap everything in its own view, which also will take a line items and justify content to center vertically and horizontally for those specific views, which is what I'm doing right now.

[00:01:41] So this title is wrapped, this text for Sweat Book, right here, is wrapped in its own view which is justifying its content and centering its content. And the same thing for the text below it. So it's flex boxes, in flex boxes, in flex boxes. So everything is a view here.

[00:02:00] So we got one view, two view, three view, four views with all text and stuff in them. So that was my philosophy on it. But again, you can just put, you can just center it from the root and just kinda go from there too but I wanted a little more control over, over the stuff on the page.

[00:02:15] So I wrapped it in views. This makes it easy too, to break this stuff out to other components too. Cuz it's just in the view, just snap it out, put in another component, we're good to go. Okay, so let's just head over to this page where it's nothing.

[00:02:30] And we'll just convert this over to use some gradient too. So let's head over to, in my case I think it's Main, and we'll import that gradient here, and we'll just change this to linear gradient. And then your gradient. There we go. And then for the colors,
>> Scott: I have the colors right here.

[00:03:01] Let's see what the colors are.
>> Scott: Where are you, color? No, it's somewhere else. This one, there we go. These colors.
>> Scott: Just gonna add these colors here. There we go, hit save. There we go, and talk about those lines here, it's killing me, go away
>> Scott: There we go, sweet.

[00:03:37] So now we have the linear gradient right here on just this one tab. If we swipe over, actually I put it on both tabs, nevermind. So they're on both tabs right now, but you can put them on one tab. For instance, right now just a text but this was another component which we're about to do then you will put it here.