How to create a background video in React Native

SaidHayani@
Apr 15, 2019 · 4 min read
Demo: Peleton Home Screen

In this post, we are going to create a backgroundVideo in React Native. If you have just started with React Native check out my article What you need to know to start building mobile apps with React Native.

Background video can add a nice effect to the UI of an app. They may be helpful also if you want to display, for example, ads or send a message to the user, like we’ll do here.

You will need some basic requirements. To get started, you must have the react-native environment setup. That means you have:

  • react-native-cli installed
  • Android SDK; if you have a mac you won’t need that, just Xcode

Getting started

First things first, let’s bootstrap a new React Native app. In my case I’m using react-native-cli. So in your terminal run:

react-native init myapp

This should install all the dependencies and packages to run your React Native app.

Next step is to run and install the app on the simulator.

For iOS:

react-native run-ios

This should open up the iOS simulator.

On Android:

react-native run-android 

You may have some trouble with Android. I recommend that you use Genymotion and the Android emulator or check out this friendly guide to set up the environment.

First what we are going to do is clone the Peleton app’s home screen. We are using react-native-video for video streaming, and styled-component for styling. So you have to install them:

  • Yarn:
yarn add react-native-video styled-components
  • NPM
npm -i react-native-video styled-components --save

Then you need to link react-native-video because it contains native code — and for styled-components we don’t need that. So simply run:

react-native link

You don’t have to worry about the other things, just focus on the Video Component. First, import Video from react-native-video and start using it!

import import Video from "react-native-video";
<Video
source={require("./../assets/video1.mp4")}style={styles.backgroundVideo}muted={true}repeat={true}resizeMode={"cover"}rate={1.0}ignoreSilentSwitch={"obey"}/>

Let’s break it down:

  • source: the path to the source video. You can use the URL instead:
source={{uri:"https://youronlineVideo.mp4"}}
  • style: the costume style we want to give to the video, and the key to making the background video
  • resizeMode: in our case it is cover; you can try also contain or stretch but this won’t give us what we want

And other props are optional.

Let’s move to the important part: placing the video in the background position. Let’s define the styles.

// We use StyleSheet from react-native so don't forget to import it//import {StyleSheet} from "react-native";
const { height } = Dimensions.get("window");
const styles = StyleSheet.create({backgroundVideo: {height: height,position: "absolute",top: 0,left: 0,alignItems: "stretch",bottom: 0,right: 0}});

What did we do here?

We gave the video a position :absolute and we give it the window height of the device. We used the Dimensions from React Native to ensure that the video is taking up the whole hight — top:0, left:0,bottom:0,right:0 — so that the video takes up all the space!

The entire code:

Also, you can make this component reusable by doing the following:

<View>
<Video
source={require("./../assets/video1.mp4")}style={styles.backgroundVideo}muted={true}repeat={true}resizeMode={"cover"}rate={1.0}ignoreSilentSwitch={"obey"}/>{this.props.children}
</View>

And you can use it with other components:

That’s pretty much it. Thank you for reading!

Photo by David Boca on Unsplash

Learn more about React Native:

Other posts:

You can find me on Twitter 🐦

Subscribe to my Mailing list to stay tuned for upcoming articles!

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store