React Native Video Player Tutorial

Hello and welcome everything, in this article we are going to make a React Native Video Player Tutorial.
Simple and Easy by exploring the native Video API.
In this article we won’t be using any customized controllers, However; I am leaving that Part for a later detailed guide.
This one is rather a quick 5 mins example.
This is how the example look like on IOS

And this is how it looks on Android

Environment Setup

To get started as usual create a new project using Expo or React Native Cli.
With both approaches, you will usually get a starting code like this.

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

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The Video component we are going to use is provided by Expo.io.
And it already has the native default video controllers ready for IOS and android, so we wont be needing any extra setup for controllers.
To install it use the expo cli

expo install expo-av

And now we are ready to get started

Getting started

We of course need to import the video component we have just installed

import { Video } from 'expo-av';

To get a video playing on the video component, we need to add 3 props.
The source, with the url or path file to the video we want to play.
Plus shouldPlay prop.
And style, providing the video player height and width dimensions.
If you don’t set it up, you will have the video playing in the background with just the sounds playing.
Finally, the shouldPlay prop with a true value, and this props plays the video once it’s ready, if it’s false or not set.
The video will show a thumbnail or A poster if you set it up and wont play till you use the play button from the controllers.

Notice, if you want to load a local video file from your assets use require, Like this require(‘path/to/file.extention’)

To do so, add this code to your toot view

      <Video
        source={{ uri: 'https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1280_10MG.mp4' }}
        shouldPlay
        style={{ width: "100%", height: "50%" }}
      />

Our screen will look like this

As you can see, The video is shown and playing.

Adding Video Player Native Controllers

To add the native controllers to show on both android and ios, all we simply need to do is add the prop useNativeControls to our Video component.

      <Video
        source={{ uri: 'https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1280_10MG.mp4' }}
        shouldPlay
        useNativeControls
        style={{ width: "100%", height: "50%" }}
      />

Now the Video Player looks like this

And on android

There you have it a simple React Native Video Player Tutorial. And you can achieve this in less than 5 minutes.
That was it for this tutorial, see you in another.
Take care and happy coding.