This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "React Native Linear Gradient Library" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott: And then, what we're gonna do is we're gonna say RNPM install just like we do in NPM, and that's the name of the package. In this case, it's react-native-linear-gradient. So, let's copy that, and we're just gonna install it, and I hit Enter. So, this is gonnainstall it in our Node modules folder because technically, it is a Node module that has dependencies on the Native UI.
[00:00:27] So, it's gonna install, it just like any other Node module. But then, you notice, this output right here at the bottom which is different than any NPM package. It says, RNPM link, and if you read the description, it says, Linking react-native-linear-gradient android dependency. Cool, we linked it to android successfully.
[00:00:44] Linking to iOS, cool, we linked it successfully. And that was great, the entire module is now linked. So, if you go read the instructions, what is linked actually mean? Everything that I just said about here. Adding it to the Cocoapods, and downloading it, and adding it to the gradle build, to the dependencies, and actually setting up this class here.
[00:01:05] So, I did all that for us and we could see to do that. Now, if you already installed reacts-native-linear-gradient via NPM because it is a Node module. But you need to link it, you can just run RNPM link and it will go through your note modules folder and find any that anyone has native dependencies and link them for you.
[00:01:26] So it's like yeah everything's already got to go. We're good. So what I've been doing is a good practices. I would go into my package.Jason, Every recess scripts I had in the scripts or post install every post install I would say react native package manager.link. So what this is gonna do is whenever you run in PM install after everything installs then it's gonna run whatever is in post install which is this command that way it always names every time I install something.
[00:02:03] Cool any questions on that? All the installation part of these native U.I. components and this is for any native library we wanna use. And how do we determine if it's native will over the doc says so but another way to find out is if you just look at the good of you look at the source code like Java, Objective C.
[00:02:22] Scott's or Ruby seven are obviously this is and was gonna work in JavaScript. There and if it is easier so if this isn't just all yellow, then this is not all work pretty much. Whereas if you go look at the tab one that we had the Reacts Native linear scrolling Tab view so you look at that and you hope it's 100% JavaScript.
[00:02:47] All right, there's no blue there's no brown there. So that's all we know and again hopefully it's in the docs that view pretty messed up for someone to make a native thing and not tell you that is native. So yeah, Mayo uses native, Is pretty good as you like and I mean in all types of crazy stuff here.
[00:03:05] So let's head back and let's see how we can actually use it now because it actually is just really just a job as your package using it is literally just like I was your package so this case. Let's let's actually run this out right quick. Right now there are and are.
[00:03:24] Also nothing thing you can do is like if you go to your package.Jason pro tip you can take, get out of here, you can take advantage of these scripts here, so the scripts are just MPM scripts that you can do that you can run I'll show you how to run them.
[00:03:37] So if you just run in MPM start then it will run this command which is just gonna start to put the reactor native server for you that little thing that pops this thing right here, that's what NPM Star does. But you can you can write whatever command you want inside of NPM If you're not familiar with Node.
[00:03:53] So for instance, I can say I want a command called Android. And it's going to run React, Native, run, Android. And you may know if I'll actually do whatever you want and then now as I did terminal shut this down show you are going to run and go where I could say N-P-R runs followed by the name of that script which in this case was called Android and it was just right under it.
[00:04:29]
>> Scott: So you can do IMPM so you can make whatever what you want MPM Android, and then for every script that you have you can make a post and pre version for that. So now I can make preandroid. And this will run whenever I call the Android command.
[00:04:48] I can make a post and write was a run after the Android command runs and all types of stuff. You do all types of things. So that's running. Let's head back over to our todo,
>> Scott: Cannot read index of What are you talking. I got this stuff here.
[00:05:15] Cool. So let's add a linear gradient to this area. So the way this will work is let's actually add one to this to do here. So I head over to to do.js And we'll import. If we look at the docs
>> Scott: Go to old docs, we'll import, where is that?
[00:05:45]
>> Scott: I guess it's that it was a good example is to be sure that he doesn't want to put his docs there it is correct natively are good. And it's just a default export cool always got to doublecheck. So we'll say from That and this is a default export we can call it whatever you want.
[00:06:11] I'll just call it linear gradient. There we go. So we have a linear gradient. And then I was going to go ahead and make this the root of our Of our view here and I'm pretty sure linear gradient is just a wrapper for a view so that means we don't really need this view or we could just say linear gradient instead of this root view.
[00:06:36] And that's probably going to break as I don't put in the colors on it. Exactly. So now what I need to do is add some color to this. So I think the syntax is colors, and it's just an array of, let's just put two colors here. Let's just do black and white.
[00:07:03] We'll just say So, there's zero and ff, save that
>> Scott: And it broke.
>> Scott: There it was, there we go So that made a nice layer greater albeit never that nice because black white men are good as a look that good is actually use something like iOS gradients.
[00:07:36] They're like his website it's got all these gradients, there you go. Look at that. Is that fancy? Let's pick Let's pick this one. We'll have some orange.
>> Scott: I forgot I had that. Look at that. What. So that too that.
>> Scott: There we go. Gradient so now we've a nice little gradient.
[00:08:09] So that's a native element running the JavaScript in our reaction point. That's pretty amazing if you think about it. Also note that when you download a native UI let's say you already run emulator you run your app you react need a package manager install linear gradient You link it and then you imported and you try to use it and it breaks.
[00:08:31] That's because you just linked a new native package you have to stop the react native server and build it again. It's not gonna find those native dependent because it already built so you got to stop everything ability again you can keep on but you got to stop. React native server and have it bundle your app again in order to pick up those new native dependencies.
[00:08:49] Whereas if you just don't like a regular node module, It'll probably just work. That's only because convenance pretty much.