Using the Video Component

We can require the <Video> component from our JavaScript code:

import Video from "react-native-video"

Then use the component just as you normally would. Here, I’ve set a few of the optional props:

<Video source={require("./warbler.mp4")} // Can be a URL or a local file.
       rate={1.0}                   // 0 is paused, 1 is normal.
       volume={1.0}                 // 0 is muted, 1 is normal.
       muted={false}                // Mutes the audio entirely.
       paused={false}               // Pauses playback entirely.
       resizeMode="cover"           // Fill the whole screen at aspect ratio.
       repeat={true}                // Repeat forever.
       style={styles.backgroundVideo} />

Ta-da! We have a working video component! It should work on both Android and iOS.

As you can see, including third-party modules with native code is a straightforward process. Many such components are listed in the npm registry and often use the prefix react-native-. Take a look around and see what the community has built!

Writing an Objective-C Native Module for iOS

Now that we’re using the react-native-video module, let’s look at how modules like these work under the hood.

The react-native-video component is what React refers to as a native module. The React Native documentation defines a native module as “an Objective-C class that implements the RCTBridgeModule protocol.” (RCT is an abbreviation for ReaCT.)

Writing Objective-C code is not part of the standard development process with React Native, so don’t worry—this is not necessary stuff! But having basic reading knowledge of what’s going on will be helpful even if you don’t plan on implementing your own native modules (yet).

If you have never worked with Objective-C before, much of the syntax you’ll encounter may seem confusing. That’s okay! We’ll take things slowly. Let’s start by building a basic “Hello, World” module.

Objective-C classes usually have a header file that ends in .h, which contains the interface for a class. The actual implementation goes in a .m file. Let’s start by writing our HelloWorld.h file, shown in Example 7-2.

#import <React/RCTBridgeModule.h>

@interface HelloWorld : NSObject <RCTBridgeModule>
@end

What does this file do? On the first line, we import the RCTBridgeModule header. (Note that the # symbol does not denote a comment, but rather an import statement.) Then on the next line, we declare that the HelloWorld class subclasses NSObject and implements the RCTBridgeModule interface, and end the interface declaration with @end.

For historical reasons, many basic types in Objective-C are prefixed with NS (NSString, NSObject, etc.).

Now let’s move on to the implementation (Example 7-3).

#import "HelloWorld.h"
#import <React/RCTLog.h>

@implementation HelloWorld

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(greeting:(NSString *)name)
{
  RCTLogInfo(@"Saluton, %@", name);
}

@end

In a .m file, you’ll want to import the corresponding .h file, as we do here on the first line. I’ve also imported RCTLog.h, so that we can log things to the console using RCTLogInfo. When importing other classes in Objective-C, you’ll almost always want to import the header file, not the .m file.

The @implementation and @end lines indicate that the contents between them are the implementation of the HelloWorld class.

The remaining lines do the work of making this a React Native module. With RCT_EXPORT_MODULE(), we invoke a special React Native macro that makes this class accessible to the React Native bridge. Similarly, our method definition for greeting:name is prefixed with a macro, RCT_EXPORT_METHOD, which exports the method and thus will expose it to our JavaScript code.

Note that Objective-C methods are named with a somewhat odd syntax. Each parameter’s name is included in the method name. It is React Native convention that the JavaScript function name is the Objective-C name up until the first colon, so greeting:name becomes greeting in JavaScript. You may use the macro RCT_REMAP_METHOD to remap this naming if you like.

Now, you might note that these files don’t exist in your Xcode project (Figure 7-1).

Figure 7-1. Xcode project, before importing our new files

We need to add them to our project in order to include them in our application’s build. You can do this by selecting File → Add Files to “Depends” (Figure 7-2).

Figure 7-2. The Add Files menu option in Xcode

Select both HelloWorld.m and HelloWorld.h to add to your project (Figure 7-3).

Figure 7-3. Importing HelloWorld.m and HelloWorld.h to our project

Now you should see both files in your Xcode project (Figure 7-4).

Figure 7-4. The updated Xcode project’s file tree

Now that our HelloWorld files are imported, we can use the HelloWorld module from our JavaScript code (Example 7-4).

import { NativeModules } from "react-native";
NativeModules.HelloWorld.greeting("Bonnie");

The output should appear in the console (Figure 7-5), both in Xcode and in the Chrome developer tools, if you choose to enable them.

Figure 7-5. Console output, as viewed through the Xcode interface

Note that the syntax for importing native modules is a bit verbose. A common approach is to wrap your native module in a JavaScript module (Example 7-5).

import { NativeModules } from "react-native";
export default NativeModules.HelloWorld;

Then, requiring it becomes much more straightforward:

import HelloWorld from "./HelloWorld";

The HelloWorld.js JavaScript file is also a good opportunity to add any JavaScript-side functionality to your module.

Phew. Objective-C can feel verbose, and we have to keep track of a couple of different files. But congratulations: you’ve written a “Hello, World” for your Objective-C module!

To review, an Objective-C module must do the following in order to be available in React Native:

• Import the RCTBridgeModule header

• Declare that your module implements the RCTBridgeModule interface

• Call the RCT_EXPORT_MODULE() macro

• Have at least one method that is exported using the RCT_EXPORT_METHOD macro

Native modules can then make use of any API provided by the iOS SDK. (Note that the API you provide to React Native must be asynchronous.) Apple provides extensive documentation for the iOS SDK, and there are many resources available from third parties as well. Note that your developer licenses will come in handy here—it’s often difficult to access the SDK documentation without one.

Now that we’ve written our own basic “Hello, World,” let’s take a deeper look at how react-native-video is implemented.

Exploring react-native-video for iOS

Just like our HelloWorld module, RCTVideo is a native module, and it implements the RCTBridgeModule protocol. You can see the full code for RCTVideo in the react-native-video GitHub repository. We’ll be looking at version 1.0.0.

react-native-video is basically a wrapper around the AVPlayer API provided by the iOS SDK. Let’s take a closer look at how it works, beginning with the JavaScript entry points Video.ios.js.

We can see that it provides a thin wrapper around the native component, RCTVideo, performing some props normalization and a bit of extra rendering logic. The native component is imported at the end:

const RCTVideo = requireNativeComponent('RCTVideo', Video, {
  nativeOnly: {
    src: true,
    seek: true,
    fullscreen: true,
  },
});

As we saw in our HelloWorld example, that means that somewhere the iOS implementation of the RCTVideo component must be exported from Objective-C. Let’s look at ios/RCTVideo.h:

// RCTVideo.h
#import <React/RCTView.h>
#import <AVFoundation/AVFoundation.h>
#import "AVKit/AVKit.h"
#import "UIView+FindUIViewController.h"
#import "RCTVideoPlayerViewController.h"
#import "RCTVideoPlayerViewControllerDelegate.h"

@class RCTEventDispatcher;

@interface RCTVideo : UIView <RCTVideoPlayerViewControllerDelegate>

@property (nonatomic, copy) RCTBubblingEventBlock onVideoLoadStart;
// ...
// ...more properties omitted here...
// ...

- (instancetype)initWithEventDispatcher:
  (RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;

- (AVPlayerViewController*)createPlayerViewController:
    (AVPlayer*)player withPlayerItem:(AVPlayerItem*)playerItem;

@end

This time, instead of subclassing NSObject, RCTVideo subclasses UIView. That makes sense because it’s rendering a view component.

If we look at the implementation file, RCTVideo.m, there’s a lot going on. At the top are instance variables, keeping track of things like volume, playback rate, and the AVPlayer itself:

- (AVPlayerViewController*)
      createPlayerViewController: (AVPlayer*)player
      withPlayerItem:(AVPlayerItem*)playerItem
  {
    RCTVideoPlayerViewController* playerLayer =
      [[RCTVideoPlayerViewController alloc] init];
    playerLayer.showsPlaybackControls = NO;
    playerLayer.rctDelegate = self;
    playerLayer.view.frame = self.bounds;
    playerLayer.player = _player;
    playerLayer.view.frame = self.bounds;
    return playerLayer;
}

There are also various methods for things like calculating the duration of the video, loading in the video and setting it as the source, and more. Feel free to step through these methods and figure out what role they play.

The other piece of the puzzle is the RCTVideoManager. To create a native UI component, as opposed to just a module, we also need a view manager. As the name implies, while the view actually handles rendering logic and similar tasks, the view manager deals with other stuff (event handling, property exports, etc.). At a minimum, the view manager class needs to:

• Subclass RCTViewManager

• Use the RCT_EXPORT_MODULE() macro

• Implement the -(UIView *)view method

The view method should return a UIView instance. In this case, we can see that it instantiates and returns an RCTVideo:

- (UIView *)view
{
  return [[RCTVideo alloc]
    initWithEventDispatcher:self.bridge.eventDispatcher];
}

The RCTVideoManager also exports a number of properties and constants:

#import "RCTVideoManager.h"
#import "RCTVideo.h"
#import <React/RCTBridge.h>
#import <AVFoundation/AVFoundation.h>

@implementation RCTVideoManager

RCT_EXPORT_MODULE();

@synthesize bridge = _bridge;

- (UIView *)view
{
  return [[RCTVideo alloc]
    initWithEventDispatcher:self.bridge.eventDispatcher];
}

- (dispatch_queue_t)methodQueue
{
    return dispatch_get_main_queue();
}

RCT_EXPORT_VIEW_PROPERTY(src, NSDictionary);
RCT_EXPORT_VIEW_PROPERTY(resizeMode, NSString);
RCT_EXPORT_VIEW_PROPERTY(repeat, BOOL);
RCT_EXPORT_VIEW_PROPERTY(paused, BOOL);
RCT_EXPORT_VIEW_PROPERTY(muted, BOOL);
RCT_EXPORT_VIEW_PROPERTY(controls, BOOL);
RCT_EXPORT_VIEW_PROPERTY(volume, float);
RCT_EXPORT_VIEW_PROPERTY(playInBackground, BOOL);
RCT_EXPORT_VIEW_PROPERTY(playWhenInactive, BOOL);
RCT_EXPORT_VIEW_PROPERTY(rate, float);
/* ... more RCT_EXPORT_VIEW_PROPERTY calls omitted here... */

- (NSDictionary *)constantsToExport
{
  return @{
    @"ScaleNone": AVLayerVideoGravityResizeAspect,
    @"ScaleToFill": AVLayerVideoGravityResize,
    @"ScaleAspectFit": AVLayerVideoGravityResizeAspect,
    @"ScaleAspectFill": AVLayerVideoGravityResizeAspectFill
  };
}

@end

Together, RCTVideo and RCTVideoManager comprise the RCTVideo native UI component, which we can use freely from within our application. As you can see, writing native modules that make use of the iOS SDK is a nontrivial endeavor, though not an insurmountable one. This is definitely one area where previous iOS development experience will serve you well. A full explanation of iOS development is beyond the scale of this book, but by looking at others’ native modules—even if you don’t have much Objective-C experience—you should be able to start experimenting with your own attempts at native module development.

Writing a Java Native Module for Android

In order to better understand how Java native modules work, we’ll write our own. Just like with Objective-C, we’ll start with a simpe “Hello, World” module.

We’ll begin by making a directory for our HelloWorld package. It should be a sibling to MainActivity.java. Android projects have a pretty deep nesting structure! Note that the directory structure may vary between different versions of Android and React Native. The key is that your new directory needs to be in the same directory as MainActivity.java.

mkdir android/app/src/main/java/com/depends/helloworld

Now we’ll add a HelloWorldModule.java file to that directory, as shown in Example 7-6.

package com.depends.helloworld;

import android.util.Log;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;

public class HelloWorldModule extends ReactContextBaseJavaModule {
  public HelloWorldModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "HelloWorld";
  }

  @ReactMethod
  public void greeting(String message) {
    Log.e("HelloWorldModule", "Saluton, " + message);
  }
}

There’s quite a bit of boilerplate here. Let’s take this piece by piece.

First, we begin with a package statement:

package com.depends.helloworld;

This is based on the file’s location in the directory.

Next, we import several React Native–specific files, as well as android.util.Log. Any module you write should import the same React Native files.

Then we declare our HelloWorldModule class. It’s public, meaning that external files can use it; and it extends the ReactContextBaseJavaModule, meaning that it inherits methods from ReactContextBaseJavaModule:

public class HelloWorldModule extends ReactContextBaseJavaModule { ... }

There are three methods implemented here: HelloWorldModule, getName, and greeting.

In Java, a method with the same name as the class is called the constructor. The HelloWorldModule method is thus a bit of boilerplate; we invoke the ReactContextBaseJavaModule constructor with a call to super(reactContext) and don’t do anything else.

getName determines which name we’ll use later on to access this module from our JavaScript code, so make sure it’s correct! In this case, we name it “HelloWorld.” Note that we add an @Override decorator here. You’ll want to implement getName for any other modules you write.

Finally, greeting is our own method, which we want to be available in our JavaScript code. We add a @ReactMethod decorator so that React Native knows this method should be exposed. To log something when greeting is called, we call Log.e like so:

Log.e("HelloWorldModule", "Hello, " + name);

The Log object in Android provides different levels of logging. The three most commonly used are INFO, WARN, and ERROR, and are invoked with Log.i, Log.w, and Log.e, respectively. Each of these methods takes in two parameters: the “tag” for your log, and the message. It’s standard practice to use the class name for the tag. View the Android documentation for more details.

We also need to create a package file to wrap this module (Example 7-7) so that we can include it in our build. It should also be a sibling to HelloWorldModule.java.

package com.depends.helloworld;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class HelloWorldPackage implements ReactPackage {
  @Override
  public List<NativeModule>
    createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new HelloWorldModule(reactContext));
    return modules;
  }

  @Override public List<ViewManager>
    createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

This file is mostly boilerplate. We don’t need to import HelloWorld because it’s part of the same package (com.depends.helloworld) as this file. There are two methods that we need to implement: createNativeModules and createViewManagers. React Native uses these methods to determine what modules it should export.

Our native module doesn’t deal with native views or UI elements so createViewManagers returns an empty list, whereas createNativeModules returns a list containing an instance of HelloWorld.

Finally, we need to add the package in MainApplication.java. Import the package file:

import com.depends.helloworld.HelloWorldPackage;

Then add HelloWorldPackage to getPackages():

protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ReactVideoPackage(),
      new HelloWorldPackage()
  );
}

Just like with Objective-C modules, our Java module will be available via the React.NativeModules object. We can now invoke our greeting() method from anywhere within our app, like so:

import { NativeModules } from "react-native";
NativeModules.HelloWorld.greeting("Bonnie");

Let’s filter the logs and look for our message. Run the following from your project’s root:

adb logcat

You will need to restart the application in order to see the log message output.

react-native run-android

Figure 7-6 shows the output you should see in your shell.

Figure 7-6. Output from logcat

Now that we’ve written our “Hello, World” example from Java, let’s look at the implementation of react-native-video for Android.

Exploring react-native-video for Java

react-native-video for Android is basically a wrapper around the MediaPlayer API. It consists mainly of three files:

• ReactVideoView.java

• ReactVideoPackage.java

• ReactVideoViewManager.java

The ReactVideoPackage.java file, shown in Example 7-8, looks very similar to our HelloWorldPackage.java file.

package com.brentvatne.react;

import android.app.Activity;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class ReactVideoPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(
      ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(
      ReactApplicationContext reactContext
    ) {
        return Arrays.<ViewManager>asList(
          new ReactVideoViewManager()
        );
    }
}

The main difference is that ReactVideoPackage returns ReactVideoViewManager from createViewManagers, while our HelloWorldPackage returned HelloWorld from createNativeModules. What’s the difference?

For Android, any natively rendering views are created and controlled by a ViewManager (or, more specifically, a class that extends ViewManager). Because React​VideoView is a UI component, we need to return a ViewManager. The React Native documentation on native Android UI components has some more information on the difference between exposing a native module (i.e., nonrendering Java code) and a UI component.

Let’s look at ReactVideoViewManager.java next. It’s a relatively long file; you can view the full source in the react-native-linear-gradient GitHub repo. Example 7-9 shows an abbreviated version.

public class ReactVideoViewManager
  extends SimpleViewManager<ReactVideoView> {

    public static final String REACT_CLASS = "RCTVideo";

    public static final String PROP_VOLUME = "volume";
    public static final String PROP_SEEK = "seek";
    /** more props skipped here ... **/

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected ReactVideoView createViewInstance(
      ThemedReactContext themedReactContext
    ) {
        return new ReactVideoView(themedReactContext);
    }

    @Override
    public void onDropViewInstance(ReactVideoView view) {
        super.onDropViewInstance(view);
        view.cleanupMediaPlayerResources();
    }

    /** more methods skipped here ... **/

    @ReactProp(name = PROP_VOLUME, defaultFloat = 1.0f)
    public void setVolume(
      final ReactVideoView videoView,
      final float volume
    ) {
        videoView.setVolumeModifier(volume);
    }

    @ReactProp(name = PROP_SEEK)
    public void setSeek(
      final ReactVideoView videoView,
      final float seek
    ) {
        videoView.seekTo(Math.round(seek * 1000.0f));
    }
}

There are a few things we should pay attention to here.

The first is the implementation of getName. Note that, just as in our HelloWorld example, we need to implement getName in order to be able to refer to this component from our JavaScript code.

The next is the setVolume method and the use of the @ReactProp decorator. Here we declare that the <Video> component will take a prop named volume (as that’s the value of PROP_VOLUME) and setVolume will be invoked when that prop changes. In setVolume, we check to see that the underlying view exists; if it does, we pass the colors along so that it can update. There are many methods in the implementation of ReactVideoViewManager that follow this pattern.

Finally, in createViewInstance, ReactVideoViewManager handles actually creating the view with the correct context.

In order to effectively write native Android components, you’ll want an understanding of how Android handles views in general, but looking at other React Native components is a good place to start.