Creating a video player app using React Native framework

If you are on a journey to learning the full utility of React Native framework, you must know the use of the expo-av React Native package in creating a video player app. Here, you will also get the code snippets and the steps of running the project on a virtual device.

So, let’s get into this journey.

Table of Contents

• What are the prerequisite criteria?
  • Installing expo-av package as dependencies
  • Creating the codebase for the project
  • Testing the app on the virtual device

What are the prerequisite criteria?

• The first criterion that you have to meet is to set up your development system and get all the required software installed in your system. This is a common practice that every developer of React Native app development company engages with before starting off their development journey with the React Native framework.

If you are using the React Native framework for the first time, you should not skip this installation step. However, if this setup is already done in your system, skip this step and start directly with the codebase and third-party React Native package installation.

You have to look for a reliable learning source.

• The second criterion that you need to consider is to get familiar with the React native components. For this, you have to learn the React Native app-making process. A basic ‘Hello World’ app will meet the criteria. You can find a YouTube tutorial and take help from React Native experts to start working with the React native framework.

Now, we will discuss the utility of expo-av in this project and its installation process.

Installing expo-av package as dependencies

One of the most important reasons behind the increasing use of React Native as a cross-platform app development framework is that it supports third-party libraries. This means you don’t have to create components by yourself but can take the work of the community members and install it in your project. It has not only made the life of developers much easier but has made the React Native community stronger.

In this note, you must use expo-av, a React Native third-party package. To get this package linked to your app, you have to open a terminal from your project folder and execute npx expo install expo-av.

Since we need to create the video player app, you will only need the Video component from expo-av.

Also, if you are working on the Expo CLI and not on bare React Native CLI, you need to install the expo package.

If you are done with installing the third-party dependencies, let’s move forward with the next section.

Creating the codebase for the project

First, add all the components that may be needed for your project. Reference is given in image 1.

* in the first line implies that the code imports the entire React library. You will need it further to get the React Native components.

It imports Button, StyleSheet, and View components from the react-native library.

It also uses Expo’s AVPlayerView component to display a video from an AVPlayer object.

Consider the code snippet in image 2.

This code syntax is a function that considers an object named App. It designs a React component video. You need to use this to present the video on the app screen. There are two variables in this syntax namely status and setStatus. setStatus is set up as an empty object {}, which implies it has no key or value.

Further, you have to use the useRef() method to add a null reference to it. The reference is undefined. Then the code assigns this new reference to the video variable. This will allow you to use it later on in your codebase while showing your video component.

To access the created reference from anywhere else in your program, you have to use React’s hook useState() method with initial data inside the curly braces ({}). You can set the video status to playing mode or pause mode.

Now use the code snippet in image 3.

 Here, the code embeds a container view that has a video. The video is added with the source property to be an MP4 file. Also, it is looping. When the status of the playback changes, the onPlaybackStatusUpdate function will update the video status.

The use of native controls is a prop that directs the video player to use native controls. resizeMode=”contain” means that when the video is played, it will only be resized if it’s smaller than the view container.

Now, it is the part of designing the container, video, and the buttons used to control the video.

For the designing part, you have to start with StyleSheet. As you can notice in image 4, we have started with the object container. Flex is set as 1, and all the content of the container is centered. The background color is #ecf0f1.

The next object that you have to design is a video. It has three keys and their respective values. You can consider the keys as properties. So, here the properties are align-self, width, and height. Width and height are 320 pixels and 200 pixels respectively.

The last object is the buttons which will enable users to control the video. Refer to image 6.

It has keys like flexDirection, justifyContent and alignItems.

You are done framing the codebase of the custom video player app. After creating an app, it is necessary to test and run the app on any device. The device can be a virtual device or a real device.

Here, we will test the app on an emulator. Let’s do that.

Testing the app on the virtual device

Go to your Visual code editor and build a new terminal from your project.

Run npm install. It will install all the required dependencies. Then you have to execute npx react-native run-android.

Wait for some minutes and your emulator will start. For the final output of my codebase, refer to image 7.

As you can see, the app screen renders a video player app. It has all the buttons required to pause and play the video. The user can see the total time span of the video.

Creating an app is not that difficult and so is a video player application. Most importantly, with React Native, it has become much easier.