react-native-video component

A useful library for videos in React Native

Photo by João Silas on Unsplash

I was looking for a native video component in React Native and was not able to find one, so I decided to draft this piece about a library I found by react-native-community called react-native-video. Here is how you need to implement this library using custom components and code in react-native.

Step 1

Create a new project named video using

react-native init video

Once the installation is done, you will have a default code base of React Native like this.

Default code structure

Now we need to add some internal folders and files so we can start creating our video component.

Step 2

Create a folder called src, and in it create another folder called screens. Now, in this folder, create a file called Video.js.

Before that, we need to setup navigation to navigate the React Native engine to our file.

npm install react-navigation

React Navigation for Beginners (Advanced version-3)

Create a file outside the src folder called Routes.js.

Make changes in theApp.js file.

import React, {Component} from "react";
import Routes from "./Routes";
const App = () => <Routes />
export default App;

Now we are set up to create our video component.

Step 3

Install the following commands:

npm install react-native-video

(There is an awesome repository on GitHub by react-native-community. Check it out for more details.)

Once you are done installing, run the following command in terminal:

react-native link react-native-video

This command will link the library to your project.

Now go to the Video.js file and enter the following code:

Now run the following command:

react-native run-ios

Here’s how it’s going to display:

Video with no controls

This is the basic structure of the code for the simple video component. For controls, you can add the following code to the Video.js file and get your video component with controls and functionality.

Video with full controls and functions

Join me in appreciating the work of react-native-community for the react-native-video repository, and go check out the library for more details.