This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "React Native Package Manager" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: Did anybody like do some incredible things over lunch with the app? As far as like styling. Anybody try to do like any of the gradients that are there?
>> Speaker 2: I have to use a plugin but.
>> Scott: React linear gradient?
>> Speaker 2: Yeah.
>> Scott: Nice. Okay, were gonna go over that.
[00:00:18]
>> Speaker 2: I load online. Anybody do the gradients online?
>> Scott: Anybody do the gradients online?
>> Speaker 2: Who is with us online, let's see some thumbs up.
>> Scott: Give me some thumbs.
>> Speaker 2: We haven't been hearing much from you guys.
>> Scott: I wanna see this computer shake from all the thumbs.
[00:00:31]
>> Speaker 2: Yeah.
>> Scott: I want this computer to shake off this podium right here.
>> Speaker 2: Break the chatroom. There's like nobody in there.
>> Scott: Nobody, okay. They all got the call.
>> Speaker 3: 40 users, 39 users.
>> Speaker 2: Yeah, it says 39, but. I guess we just came back from break.
[00:00:47]
>> Scott: Yeah, everybody is just weaking from that nap, that food nap.
>> Speaker 2: Okay.
>> Speaker 3: Here it comes. Charles and Jesse, Mike.
>> Speaker 2: Wake up.
>> Scott: [LAUGH] All right. Sweet. So we left off, we went over the solution for the for the tab view. Now we're gonna get into let's do third party lib and then we'll get an UI up on to that.
[00:01:13] So we're a third party native lib versus third party JavaScript lib. So we already use a third party JavaScript lib, or UI compile which is tab view. This is 100% JavaScript based. But then, there are other ones that require dependencies on Native UIs, in Android and iOS. But, we can also use those too.
[00:01:36] The down side is there's a process you must do to actually get these set up in your application. Because, they are native UIs and you have to tell your iOS and Android products about them. The good side is there's a tool that does it for you automatically. So you don't have to do it in most cases.
[00:01:51] We're going to walk through installing a native UI component, using a native UI component, using this tool that's gonna help linking it much easier. And steps from there, and how to determine if something is native versus just pure JavaScript, so you're not confused. Cool, let's do that. So, I'm back in the todo app, and if you go look at the designs for our app, we have these gradients here, pretty legit.
[00:02:19] This isn't something we've done with the stylesheet, you can't really do. You have any question? I thought you were raising your hand, sorry. So, we can't really do this with a stylesheet but, Android and iOS natively have support for gradients, which is pretty legit. So we can tap into that with the native over the JavaScript plugin as wrapping the native implementation, likely somebody already created one.
[00:02:39] So if you go look there is one right here called react native linear gradient. If you'd google react native linear gradient you would have missed it. That's literally what it's called. But, if you were to read the docs here it says something about setting up the cocoa pods and great old build filesm if you've never done native develop you're probably like what, what is that?
[00:03:01] That's not NPM, but the cocoa pods It's you can think of is like the NPM for iOS, and then the great abilities like the grope or the web package for androids the built system. So they're saying is because this is actually using some Native UI Components from Android iOS, you must tell your product about it.
[00:03:21] So you have to go in these files and update these every single time you wanna use them. But that's not fun so somebody created to a call RNPM, or which is short for React Native Package Manager, which does all this for us. Was pretty legit, so let's walk through actually adding that.
[00:03:37] The first thing you need to do is in your terminal, if you need to NPM installed globally, RNPM Reactor Native Package Manager, make sure it's globally. So you install that and there's a few ways you can use it, we can use RNPM directly to install and link the dependencies in one swoop.
[00:03:58] Or if we already have dependencies and we just need to link them. We can do that as well. I'm actually gonna do it one soup and install the reactor native later gradient and link at the same time.
>> Speaker 4: This is included in rec [INAUDIBLE]
>> Scott: I think it is always just before use it, I always use implement install-g to make sure it's up to date, just in case it's outdated just make sure you got the latest thing like for me like it.
[00:04:21] It cached it and downloaded it pretty fast, so, yeah. It's always a good practice to make sure, at least for me for my global stuff, always make sure it's up to date.