Geek Culture
Published in

Geek Culture

How to add or play video in React Native Expo Application

Play video in React Native Expo Application

Photo by Lala Azizli on Unsplash

Set-up and Installation

Code of Displaying Video using React Native Expo

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>
);
}
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',
},
});

--

--

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