Name: Installing and Linking Modules with Native Code in React Native
Uploaded: 2016-11-06T10:20:58-06:00
Description: Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video component using npm install, and then link it with the react-native link command so that our Video component works properly on both iOS and Android.

Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video component using npm install, and then link it with the react-native link command so that our Video component works properly on both iOS and Android.

https://app.egghead.io/api/v1/lessons/react-installing-and-linking-modules-with-native-code-in-react-native/subtitles

Installing and Linking Modules with Native Code in React Native

[00:00] From time to time, you'll want to install a third party library for React Native that uses native capabilities. Those are platform-specific APIs, usually having to do with media or more complicated APIs.

[00:13] Like say you want to use bluetooth, or something like that. The module that you're going to install will actually have code other than JavaScript. It might have Objective C, or Swift, or Java code so that you can run it on iOS or Android and take advantage of that platform's capabilities.

[00:27] For example, today we're going to install the React Native video player with "npm install -- save react native video."

[00:38] Now that that's installed, let's go ahead and try and add this to our application and see what happens. I have a pretty simple example here. I'm going to start by importing the video component from react-native-video.

[00:51] I'm going to replace our render method here, and then I'm going to try and render a video component. This takes a couple of props. The first one is going to be a source, for which media we want to use. I've downloaded a simple video of some clouds which you can find in the GitHub repo.

[01:15] I'm going to require a ./assets/clouds.mp4 and then I'm also going to set some other props. I'm going to set "resizeMode" to be "cover," I'm going to set "repeat" to be "true," so I want this video to play on a loop. I'm going to set "pause" to be "false," so that this video begins playing automatically.

[01:43] Then I'm also going to set some styles. "style =" and then we'll say "styles.backgroundvideo." Now we'll go down into our StyleSheet here.

[01:56] Start a new one. We're going to say "backgroundVideo." I want to take up the whole screen, so I'm going to say "position 'absolute.'" Then I'm going to set the coordinates "top" to all be zeros, "top, 0left, 0right, 0bottom, 0We have all this stuff. This should be all that we need to render. I'm going to save this file, and now let's try to view it in the simulator. One last thing. Let's not forget our closing "\." I'm going to save this.

[02:28] Let's view it in the simulator. I'm going to reload this. We'll see that I'm getting, "Undefined is not an object." It's looking for React Native native modules, and then this "RCTVideo.Constants" file which it doesn't have. This indicates that we're missing a library, that we need to link to an actual native library.

[02:50] These error messages can vary a lot. Really, you should be looking at the documentation for the module you are installing to figure out whether or not linking libraries is necessary.

[02:59] Just for completeness sake, let's also take a look at this on Android. Here is my Android emulator. I'm going to reload it. It's going to refetch the JavaScript bundle.

[03:11] You can see that, on Android, I also get the same issue, "Undefined is not an object." Something is not right here.

[03:18] Fortunately, linking in these required libraries is simple if the modules were packaged correctly.

[03:23] I'm going to hop over to my terminal, and I'm going to type "react-native link" and then the name of the module, so "react-native video" in this case.

[03:32] I'm going to run that. It's going to tell me that there is an Android dependency and an iOS dependency, and it has linked both of them successfully.

[03:43] Let's try this again. Because we've changed which native modules have been linked, we're going to want to actually restart both of our emulators. It's not enough just to rely on the JavaScript refresh.

[03:53] First, I'm going to do that for iOS by going into XCode, hitting stop, and then pushing "Play" again. Now let's open up the emulator there.

[04:10] Awesome. You can see that now, instead of that terrible red error screen, we're actually getting the video and it's playing. Now let's fix Android as well.

[04:16] I'm going to hide XCode and the iOS emulator. I'm going to go into here. I'm going to hit "react-native run android" again. Once the build is successful, let's check out our emulator again, and you can see that video is also working on Android now.

[04:40] This is great. Whenever you need to install a module that includes both native code for iOS and Android, or either of them, just remember that you not only have to do "npm install -- save," you also need to do "react-native link" and then the module name.

Installing and Linking Modules with Native Code in React Native

Share this video with your friends