How to add or play video in React Native Expo Application

Play video in React Native Expo Application

Hello, React Native Developers..!!

Let’s suppose you are making an e-commerce mobile application where you want to show a video description of your product. In another case, you are building any kind of mobile application where you want to show videos on your platform. Then you must know how to implement it. Whether you are working for IOS devices or Android devices, React Native Expo will help you build this easily. So, let’s make a mobile application where you will display, play/pause a video using React Native Expo. Grab your seat and take a cup of coffee and let’s begin the hack.

Photo by Lala Azizli on Unsplash

Set-up and Installation

1. Make a directory and navigate to it.
2. Open the terminal or command prompt window and run the command: expo init Video
3. Choose the blank template and proceed with the download
4. Navigate to the directory “Video” after the completion of the download
5. Install a package using the command: npm install expo-av

After the completion of all the 5 steps as given above. you will see something like this on your terminal of command prompt window. We are done with the installation part so let’s switch to the code part

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Code of Displaying Video using React Native Expo

Open this project in your favorite text editor and do verify all the installed packages in the “package.json” file. After that open App.js

App.js

import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video } from 'expo-av';
export default function App() {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={styles.video}
        source={{
          uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={status => setStatus(() => status)}
      />
      <View style={styles.buttons}>
        <Button
          title={status.isPlaying ? 'Pause' : 'Play'}
          onPress={() =>
            status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
          }
        />
      </View>
    </View>
  );
}

First, Import all the required packages from the library. Although we need only a few. Here we are using react hooks concept that’s why we use constant [status, setStatus]. Now simply return the App function and code according to the desired UI. I kept it simple. You need a source of video but keep that in mind that only the correct extension video will play. You just can’t copy some youtube link and start playing video, because the youtube link doesn’t have any kind of video extension. Next, we used to resize video features. At last, we added the play pause button at the bottom of the video content. Now add a little bit of styling, as per your choice.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  video: {
    alignSelf: 'center',
    width: 350,
    height: 220,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Well, now we are done with the code part. For the test, run this project on the local server.
Open the terminal or command prompt window in the Video directory and run the command: npm start
Scan the QR code that appeared on the window with your IOS or Android devices and run this project in the expo Application. After the javascript dependencies build completes. You will see something like this.

I hope you will learn something new today. If you face any kind of difficulties related to this project, let me know in the comment section.

Thank you.