Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Installing Third-Party Libraries from npm with React Native

    Bonnie EisenmanBonnie Eisenman

    Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll also see what happens when you try to use a third-party library, such as jQuery, that attempts to access the browser window and is therefore not compatible with React Native.

    react-nativeReact Native
    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I hear a lot of questions from people about how to install third-party JavaScript modules with React Native. The good news is it's very straightforward. It's basically identical to how you would do it in any other project. We can go ahead and do npm install -- save whenever we want to add a new module. Of course, if you're using Yarn, you can use Yarn as well.

    00:18 As an example today, we're going to install Lodash and use it in our project. I'm going to run npm install --save Lodash. As you can see, this will kick off the usual install process. Now Lodash is installed. If I look at my package.json, you can see that Lodash has been added to my list of dependencies.

    00:41 I'm going to go ahead and commit that change, "add lodash to dependencies." Let's go ahead and use this third-party module that we just installed. We'll pop over into our code. I'm going to import from 'lodash'. Let's actually use this. We're going to say "Your lucky number is." Then we're going to open some curly braces and call Lodash with.random. We'll ask for one of 100 lucky numbers.

    01:15 Now I've saved this file and hit refresh. As you can see, Lodash is now being loaded. We're successfully calling our third-party module. Not all third-party JavaScript modules will work with React Native. Specifically, anything that relies on an actual browser window is going to fail because we don't have polyfills for everything.

    01:34 For example, let's install jQuery, so npm install --save jQuery. Now we've installed jQuery. Let's go back into our code. We're going to import $ from 'jquery'. I'm going to save that. I've turned on live reload in my simulator, so that's going to refresh. You'll notice that it will take a minute for the React Native Packager to reload every time you import a new module.

    02:06 Now let's go into our render method. Let's say that we want to get all of the divs in the windows using jQuery's selector API. I'm going to say var divs = $. I'm going to ask for all divs. I'm going to save this. As you can see, we get this wonderful red error screen -- jQuery requires a window with a document.

    02:28 Because this is React Native, we're running on iOS. There's no actual browser window. Any third-party module that requires a window is going to fail. Other than that, any pure JavaScript module which doesn't rely on the browser is fair game to use in React Native, so feel free to try importing basically almost all of the third-party dependencies that you would want.

    02:50 If you're working with mobile, you're not going to be wanting to interact with the browser window APIs anyway. Just about all of them should work out of the box, just like Lodash did. Now if we go back, we can see that everything is working again.

    Discuss

    Discuss