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

Fundamentals of React Native Video

In this lesson we'll show you how to use React Native Video to cover the entire background with a continuously looping video! We'll be using the `repeat` property as well as the `StyleSheet.absoluteFill` property so we don't have to replicate any styles.

We'll then show you how to overlay content over your looping video.

A common design element is to have a repeating movie in the background that loops. To do that, we'll need to add the repeat prop to our code. Now, when we refresh, this video will keep looping.

stylesheet.appsloopfill is a helper method that sets the position absolute, as well as left, top, bottom, right of zero. Now, if we want to add content on top of this, we need to place items below the video element. In React native, the lower the item in the tree will mean that it is placed on top of the items above it. To place items on top of this video, we need to stop by putting a view here.

Now, we'll add a basic text header. We'll say text, and give it a style equals styles.header, and type login. Then we'll come down here, and we'll apply some styles for the header. We'll say it's a font size of 30, a background color of transparent. This is important, otherwise our background color would be white. We'll set a color of white.

Now, if we refresh, we can see that have a centered login. Now, we'll add a few inputs. We'll add a text input, and give it a placeholder is equal to email. We will give it a style is equal to styles.input. Then we'll also create another one called text input placeholder is equal to password. We'll give it the secure text entry, and then we'll also give it the style equals styles.input.

Now, we'll just go add some basic styling for that input style. We'll say input object width of 300, a height of 50, background color of white. We'll add some margin vertical of 15, which means we'll have 15 pixels of vertical margin, so top and bottom.

Now, when we save that and refresh, we can see that we have a login that has an email and password input. I set some padding left here of 15 to bring that email and password labels in, placeholders in. There we go. Now, we have content sitting on top of a repeating background that is covering the entire screen.

Create a Looping Background Video with React Native Video

Share this video with your friends

Course

Fundamentals of React Native Video