Adding Video to Your React Native App with react-native-video

What Is React Native?

React Native is an open-source framework that enables developers to create mobile applications using JavaScript. It supports both iOS and Android, making it possible to have a single codebase for both. React Native combines native app development with React, a JavaScript library for building user interfaces. This approach enables a faster development cycle and a high-quality user experience across both platforms.

The framework leverages native components for rendering and offers access to platform-specific functionalities, ensuring that apps built with React Native perform as well as native apps. React Native also supports the concept of “hot reloading,” where changes in the code are immediately visible in the app without a full rebuild, significantly speeding up development.

This is part of a series of articles about video optimization

In this article:

• What Is the React-Native-Video Library?
• Quick Tutorial: Adding Videos to React Native with the react-native-video Library
  • Install the Package
  • How to Use react-native-video
  • Use Other Component Props in react-native-video
  • Create Custom Video Controls
  • Invoke Methods in the Video

What Is the React-Native-Video Library?

The react-native-video library is an open-source project that extends React Native’s capabilities for handling video playback. It provides a unified, easy-to-use API for integrating video playback in iOS and Android applications. This library supports a range of video formats and offers features such as playback control, track selection, volume control, and fullscreen playback.

The react-native-video library also offers advanced features such as adaptive bitrate streaming (HLS and MPEG-DASH), which optimizes video quality for various network conditions and device capabilities. The library’s support for closed captions and subtitles helps ensure accessibility, while its event hooks enable developers to create custom controls and interactions.

Adding Videos to React Native with the react-native-video Library

Before adding videos to your React Native app, you need to know whether you’re aiming to develop for Android or iOS. In this tutorial, we’ll assume we’re building an application for iOS.

Install the Package

First, you need to integrate the react-native-video library into your project. Navigate to the root directory of your project and execute the following command:

npm install --save react-native-video

This command fetches and installs the react-native-video package, adding it as a dependency to your project. If you are on a Mac, there’s an additional step to ensure the native dependencies are properly linked. Run:

npx pod-install

How to Use react-native-video

We’ll use react-native-video to create a login screen that features a background video. Start by importing the Video component from the react-native-video library into your React Native component:

import Video from 'react-native-video';
import video from '../my-video.mp4';

const MyComponent = () => {
    return (
        <Video  
            source={video}
            paused={false}
            style={styles.backgroundVideo}
            repeat={true}
        />
    );
};

A few things to note about this code:

• By setting the source prop, you link the video file to be played.
• The paused prop is set to false for the video to play automatically
• The style prop enables look and feel customization
• Repeat is set to true to loop the video in the background

Use Other Component Props in react-native-video

While the example above showcases a basic setup, the react-native-video library has many other props to tailor the video experience to your needs. Some noteworthy props include:

• allowsExternalPlayback – enables control over the video through external devices like AirPlay or HDMI (iOS only).
• playInBackground allows the audio to continue playing when the app is not in the foreground. This can be useful when you need to maintain audio playback in the background.
• poster – sets a thumbnail image to display before the video plays.
• controls – displays video controls, allowing users to interact with the playback. Note that on iOS, controls are available in fullscreen mode regardless of this setting.

Create Custom Video Controls

React Native allows you to customize video playback controls. Using React state, properties like paused and muted can be dynamically controlled. Let’s see how to create a custom playback control interface:

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Video from 'react-native-video';

const MyVideoComponent = () => {
    const [paused, setPaused] = useState(true); // Control playback state
    const [muted, setMuted] = useState(false); // Control sound state

    return (
        <View style={styles.container}>
            <Video
                source={require('../path/to/your/video.mp4')} // Can be a URL or a local file.
                paused={paused} // Control playback
                muted={muted} // Control sound
                style={styles.video}
                // Other props
            />
            <View style={styles.controls}>
                <Button
                    title={paused ? 'Play' : 'Pause'}
                    onPress={() => setPaused(!paused)}
                />
                <Button
                    title={muted ? 'Unmute' : 'Mute'}
                    onPress={() => setMuted(!muted)}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    video: {
        width: '100%',
        height: 300,
    },
    controls: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20,
    },
});

export default MyVideoComponent;

Note: You must add MyComponent in the App.js of your video application project.

This example demonstrates a straightforward way to create a play/pause and mute/unmute toggle. Here’s a breakdown of how it works:

• State management – useState is used to manage the paused and muted states. The paused state controls whether the video is playing or paused, while the muted state controls the sound.
• Video component – the Video component is used to display the video. Its paused and muted props are controlled by the component’s state.
• Control buttons – Two buttons are used to toggle the paused and muted states. These buttons control the playback and sound of the video.

Invoke Methods in the Video

For an even more controlled video experience, the react-native-video library allows the invocation of several methods in the video element. This enables actions like entering fullscreen mode on demand. Here’s how:

const MyComponent = () => {
    const videoPlayer = React.useRef();

    const goFullScreen = () => {  
        if (videoPlayer.current) {  
            videoPlayer.current.presentFullscreenPlayer();  
        }  
    };

    return (
        <Video  
            ref={ref => (videoPlayer.current = ref)}
            source={video}                 
            paused={false}                  
            style={styles.backgroundVideo}  
            repeat={true}                   
        />
    );
};

You can directly manipulate the video element by creating a reference to it, offering a seamless integration of video functionalities within your React Native application.

Using Cloudinary to Supercharge Your Videos in React Native

In the fast-paced world of mobile app development, video content has become a cornerstone of user engagement. However, delivering high-quality videos without affecting app performance can be a challenge.

Cloudinary is a comprehensive media management platform that provides developers with the tools to upload, store, manipulate, optimize, and efficiently deliver images and videos. This makes it an ideal choice for mobile developers who need to manage multimedia resources effectively.

First, you need to create a Cloudinary account if you haven’t already. Register for free on their website to obtain your unique credentials, including your cloud name, API key, and API secret. These will be crucial for configuring the SDK in your app.

Step 1: Install Cloudinary’s React Native SDK

Add Cloudinary’s React Native SDK to your project to get started with the video optimization:

npm install cloudinary-react-native

Step 2: Configure Cloudinary in Your React Native App

Configure the SDK with your account details. You can do this in your app’s main configuration file or right before you start using media resources:

import { Cloudinary } from 'cloudinary-react-native';

const cl = new Cloudinary({ cloud_name: 'your_cloud_name' });

Step 3: Using Cloudinary to Optimize Video Delivery

Once Cloudinary is integrated, you can start optimizing your video content. Use Cloudinary to transform videos on-the-fly, reducing their size without compromising on quality or adjust the format to suit different devices and network conditions:

import { Video } from 'cloudinary-react-native';

const OptimizedVideo = () => (
  <Video 
    cloudName="your_cloud_name"
    publicId="your_video_public_id"
    resourceType="video"
    width="auto"
    crop="scale"
    controls
    autoPlay
  />
);

This component will render a video that is automatically optimized for the device and network conditions of each user, ensuring faster loading times and a smoother viewing experience.

Using Cloudinary with React Native not only streamlines the video handling process but also enhances the end-user experience by ensuring that videos are visually engaging and load efficiently. By leveraging Cloudinary’s powerful video management and optimization tools, developers can focus more on creating outstanding user experiences rather than worrying about the underlying complexities of video performance.

Unlock the full potential of your digital content with Cloudinary’s advanced editing and optimization tools. Sign up for free today!