Create a Looping Background Video with React Native 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.