Setup React Native Video for iOS and Android

Jun 4, 2017

In this lesson we'll install react-native-video with NPM. We'll use the react-native link command to setup all necessary native code.

0:55
Setup React Native Video for iOS and Android

Setup React Native Video for iOS and Android

In this lesson we'll install react-native-video with NPM. We'll use the react-native link command to setup all necessary native code.

2:04
Use Local Files or Remote Video Files with React Native Video

Use Local Files or Remote Video Files with React Native Video

In this lesson we'll show the different methods that react-native-video allows to play video including remote video files and local files imported as asset files by React Native.

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

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

In this lesson we'll show to use the onError callback from react-native-video. We'll show how to put a separate view to cover the video and render an error icon from react-native-vector-icons. Finally we'll add custom error messages based upon the error code returned.

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

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

In this lesson we'll show how to use icons from react-native-vector-icons. With absolute positioning we'll center the icon over the video. Then we'll use the Animated.loop call to rotate the icon continuously in a 360 degree loop. Finally we'll the stopAnimation call to pause the animation when we are no longer buffering.

2:52
Create a Looping Background Video with React Native Video

Create a Looping Background Video with React Native Video

In this lesson we'll show how to use React Native Video to cover the entire background. We'll use the repeat property, and also the helper StyleSheet.absoluteFill property so we do not need to replicate styles. We'll then show how to place a login form on top of the looping video.

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

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

In this lesson we'll setup a react-native-video player that is paused when it is not visible but when scrolled into view starts playing the video. We'll also show how to add a small ending threshold so once the video is only partially out of view it will pause.

9:28
Create Custom Controls for React Native Video

Create Custom Controls for React Native Video

In this lesson we'll use react-native-vector-icons to add play/paused buttons, a seek bar, and the duration of the video. We'll use the onLoad, onProgress, and onEnd callbacks to track the video progress. We'll use the react-native-progress to create an animated progress bar for us. Finally with TouchableWithoutFeedback we will add a tap to seek interaction to jump to specific times in the video.

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

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

In this lesson we'll create controls that animate into view when the video is interacted with. The controls will animate in when the video starts to play, or when the video is tapped. When a 1500ms timeout is reached the controls will automatically animate hidden.

Liked this content?

Get notified more about React Native!

No Spam! We Promise!