Use Local Files or Remote Video Files with React Native Video

React Native video supports MP4s from remote and also from the local file system using the React Native asset system. To use that, we can add an MP4 anywhere within our directory. We have one here called lights.mp4.

We can use require or we can also use import. We'll import light video from ./lights.mp4. Then to use it with our React Native video component we type video and pass it in as the source.

To use remote videos, we'll need to use a object here rather than a import and type URI and then pass in the string of the MP4 that you want to use. It's important to note that we import the video before we start our build, because there's a special build process script that runs when you start up the packager.

If we go back to our Xcode and now we start our build, the packager will start up, iOS Simulator will also start up and our video will be included in the asset system.

Now that we have our simulator started up, we can show off the video actually working. First, we'll switch this back to use the light video that we imported. We will add a resize mode of cover, then also add the style and use the styleSheet.absoluteFill to cover the entire thing.

Now that we have refreshed, we can see that our video is automatically playing and it is covering the entire screen. We can then also switch this back to our URI, save it, refresh, and also see that our video is playing from a remote source.