How to set video as a background in React Native application

The next step is to place the VideoBackground component we prepared in the appropriate location within our application. For example, we will use a previously prepared layout in the App.tsx file.

import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet, Text, View} from 'react-native';
import {VideoBackground} from './src/components/VideoBackground/VideoBackground';
import {Button} from './src/components/Button/Button';

const background = require('./src/assets/cars.mp4');

const App = () => {
 return (
   <>
     <VideoBackground source={background} />
     <View style={styles.overlay} />
     <SafeAreaView style={styles.contentWrapper}>
       <StatusBar
         backgroundColor="transparent"
         translucent={true}
         hidden={false}
       />
       <View style={styles.contentContainer}>
         <Text style={styles.title}>Welcome</Text>
         <Text style={styles.subtitle}>Start your journey now</Text>
         <View style={styles.buttonsContainer}>
           <View style={styles.buttonWrapper}>
             <Button
               onPress={() => console.log('Sign in')}
               style={styles.button}>
               Sign in
             </Button>
           </View>
           <View style={styles.buttonWrapper}>
             <Button
               onPress={() => console.log('Sign up')}
               style={styles.button}>
               Sign up
             </Button>
           </View>
         </View>
       </View>
     </SafeAreaView>
   </>
 );
};

export default App;

GitHub code

I placed this component right at the top of the JSX tree, indicating its foundational role in the visual hierarchy of the app’s interface.

Considering that the video we are using might have colors that make text or other screen elements difficult to read, we’ve included a layer below that serves as an overlay to darken the entire video. This has helped to achieve greater text readability, something we should always remember when building applications.

Further on, we use SafeAreaView, which is a crucial component for ensuring that your app’s UI displays correctly on devices with notches, home indicator areas, or other non-standard screen features. It automatically adjusts its child views to not overlap with these system areas, which is particularly important for iOS devices with the notch design. Inside the SafeAreaView, there is a structured layout that starts with a customized StatusBar, followed by a View containing text elements and buttons. This hierarchy shows a clear and logical arrangement of elements, with the status bar at the very top, followed by the content.

I have also added buttons to the screen layout to better utilize our sample welcome screen.

import React from 'react';
import {View, Text, Pressable, StyleSheet} from 'react-native';


export const Button = ({children, style, onPress}) => {
 return (
   <View style={[styles.buttonOuterContainer, style]}>
     <Pressable
       style={({pressed}) =>
         pressed
           ? [styles.buttonContainer, styles.pressed]
           : styles.buttonContainer
       }
       onPress={onPress}
       android_ripple={{color: '#ffffff'}}>
       {({pressed}) => (
         <Text
           style={
             pressed ? [styles.buttonText, {color: '#000'}] : styles.buttonText
           }>
           {children}
         </Text>
       )}
     </Pressable>
   </View>
 );
};

GitHub code

It’s a simple custom button but at the same time a good example of a reusable and stylistically versatile element in React Native.

Summary

In conclusion, utilizing react-native-video for creating video backgrounds in React Native applications is a straightforward yet powerful approach to enhance user interfaces. This method not only adds a dynamic and visually appealing element to the app but also ensures that the overall user experience is engaging. Throughout this article, we have outlined key steps and tips that enable you to easily implement this feature.

Stay tuned as we are soon releasing the stable version of react-native-video. If you need assistance in upgrading the version in your application, don’t hesitate to reach out to us! We’re here to help ensure your transition to the new version is smooth and efficient. Keep an eye out for the release and let us help you take your React Native app’s user experience to the next level!

Introduction

In today’s world, where the mobile app market is extremely competitive, the visual appearance of an application plays a key role in attracting user attention and ensuring a pleasant experience. The aesthetics of the user interface have become as important as the functionality of the app itself. App designers are constantly seeking new, creative ways to differentiate their products. Some use complex animations, others employ innovative graphic layouts, while others focus on interactive elements to engage and captivate users.

In this article, I would like to present a simple yet effective way to enhance an app by using the react-native-video library to implement video as a background in your React Native application. This approach, though it may seem somewhat unconventional, is an effective way to add a dynamic and visually appealing element to the user interface. Using video as a background is not only aesthetically pleasing, but it can also convey brand values, enrich the context of the app, or simply create a more engaging and memorable user experience. In the following sections, I will discuss how to achieve this effect, the best practices to follow, and the potential challenges that may arise when implementing this solution in mobile applications.

Initial recommendations

Initially, I would like to mention that the react-native-video library version 6.x recommends using React Native version 0.68.2 or newer for greater stability. Given this recommendation, there was no better option than to base our project on the latest version of React Native, which is at the date of writing, 0.73.2.

Installing react-native-video process

To start working with react-native-video, we need to install it in our project. This process is quite straightforward. Open your terminal and navigate to your project directory. Then install the latest beta version - of course, this is until a stable version is released :) - by typing

npm install —save react-native-video@beta

or

yarn add react-native-video

depending on the package manager you use.

Once that’s done, there are a few steps we need to follow to get this library working on both iOS and Android.

iOS

Enable Static Linking for dependencies in your ios project Podfile

To enable static linking for dependencies in your iOS project’s Podfile, you need to modify the Podfile to specify that you want to use static libraries. CocoaPods, the dependency manager for Swift and Objective-C Cocoa projects, typically uses dynamic frameworks by default. However, you can change this behavior.

Here’s how you can modify your Podfile for static linking:

• Open the Podfile: Locate your Podfile in the iOS project directory.
• Specify Static Linking: You need to add a snippet at the top of your Podfile to force the usage of static libraries. You can do this by using the use_frameworks! directive with the :linkage => :static option.

use_frameworks! :linkage => :static

Additionally, you should comment out

use_flipper!()

or

:flipper_configuration => flipper_config

depending on the version of React Native you are using.

And of course, as after every change in the Pods file, you should run the command

pod install

Android

For Android users, starting from version 6.0.0 of react-native-video, it’s essential to ensure that your application is using Kotlin version 1.7.0 or higher. To do this, you need to modify your project’s build script. Open the build.gradle file in your project and add or update the Kotlin version specification. Your build script should include the line ext.kotlinVersion = ‘1.7.0’ to meet this requirement. This step ensures compatibility and optimal functioning of the react-native-video library in your Android application.

New documentation available

We have prepared a new documentation for the react-native-video library specifically for you. We highly recommend referring to this documentation while working with the library. It’s designed to be user-friendly and comprehensive, providing you with all the necessary information, best practices, and step-by-step guides to effectively utilize the library in your projects. Using this updated documentation will not only save you time but also enhance your understanding and efficiency in implementing react-native-video features.

Adding video background to your application

Let’s start by creating a VideoBackground component that will utilize Video from the react-native-video library. Extracting this functionality into a separate module allows us to use different videos for our backgrounds. Simply pass the source of our video, and this component will display it in the location we choose.

import React from 'react';
import {StyleSheet} from 'react-native';
import Video from 'react-native-video';

export const VideoBackground = ({source}) => {
 return (
   <Video
     resizeMode="cover"
     muted={true}
     repeat
     source={source}
     style={styles.backgroundVideo}
   />
 );
};

const styles = StyleSheet.create({
 backgroundVideo: {
   position: 'absolute',
   top: 0,
   left: 0,
   bottom: 0,
   right: 0,
 },
});

In this demo application, I’ve intentionally used hard-coded styling, separate from the ‘themes’ file. This is to ensure the code is more straightforward and accessible for demonstration, and not a recommended practice for production code.

As you may notice, in the Video component we used several important properties. Let me briefly go through each of them to explain their significance for our functionality.

resizeMode - Determines how the video is resized when its frame does not match the original dimensions of the video. The value of interest here is ‘cover’, which means scaling the video proportionally. This implies that the video may be cropped to fill the space. Interestingly, omitting this prop will make the video cover the entire screen only on iOS. On Android, since this component is converted differently into native elements, the video will remain unchanged and display as originally sized.

muted - If your video has sound, adding this property will ensure that the video is muted.

repeat - Determines whether the video should loop after reaching the end. This is a very important option for us when wanting to use the video as a screen background.

source - Sets the media source. You can pass a resource loaded through require or an object with a URI.

Another important aspect here is the style applied to our Video. This style aims to place the video across the entire screen as a background. The position: ‘absolute’ positions the video absolutely relative to its nearest positioned parent. In this case, it ensures that the video is positioned directly in the background. The properties top: 0, left: 0, bottom: 0, right: 0 stretch the video to cover the entire screen, extending it from the top, bottom, left, and right edges of the screen. This guarantees that the video will cover the entire available space, regardless of the device’s size or orientation.