TutorialsCourses
Setup React Native Video for iOS and Android
0:55
Use Local Files or Remote Video Files with React Native Video
2:04
Show An Error Message When A Video Fails to Load in React Native
3:24
Show an Animated Buffering Icon When Remote Videos are Loading in React Native
5:34
Create a Looping Background Video with React Native Video
2:52
Create a Video that Auto Plays when Scrolled into View in React Native
7:37
Create Custom Controls for React Native Video
9:28
Create Controls that Hide/Show When Video Is Interacted With in React Native
4:56

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.

Tutorial Code

Liked this content?

Get notified more about React Native!

No Spam! We Promise!

Home