Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create a Looping Background Video with React Native Video

    Jason BrownJason Brown

    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.

    react-nativeReact Native
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss