Geek Culture
Published in

Geek Culture

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

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.

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

How to despeckle to remove point noise from an image in Node.JS

Build CRUD on RESTful API with MongoDB — Javascript, Part5 — PATCH, PUT and UPDATE.

Implementing User Authentication with Auth0 in React

Getting Started With React JS

Sinatra vs Express

Fuzzing your Automated Browser Tests — Testing Unexpected User Input

Angular 12 with New features and Evolution

DENO: Create your first server

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rohit Kumar Thakur

Rohit Kumar Thakur

ninza7.me

More from Medium

Deploy a React Native App to the Google Play Store

Fastlane with React Native — Part-1

SINGLE APP FOR WEB, IOS, AND ANDROID USING REACT-NATIVE ( Components ) — PART 2

Firebase Push Notification In React Native