Fundamentals of React Native Video

React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application. Like many React Native elements, the video element is very basic and doesn’t ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

In this course we’ll take a look at a basic setup. Then explore the different ways we can load and show videos. We’ll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with

we’ll show how to write custom video controls and animate them when the video has not been interacted with.

Finally we’ll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

Course Content

Setup React Native Video for iOS and Android

Use Local Files or Remote Video Files with React Native Video

Show An Error Message When A Video Fails to Load in React Native

Show an Animated Buffering Icon When Remote Videos are Loading in React Native

Create a Looping Background Video with React Native Video

Create a Video that Auto Plays when Scrolled into View in React Native

Create Custom Controls for React Native Video

Create Controls that Hide/Show When Video Is Interacted With in React Native