How to Play Video with React Native and Expo?

Hi Guys,

In this tutorial we will go over the demonstration of how to play video with react native and expo. In this article, we will implement a how to create react native video player using expo. if you have question about react native expo video player example then I will give simple example with solution. you will learn how to pause and play video in react native using expo. You just need to some step to done how to add play video in react native expo application.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

First of all you have to install expo-av package.

expo install expo-av

In this step, You will open the App.js file and put the code.

import * as React from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';
import { Video } from 'expo-av';

const App = () => {
    const video = React.useRef(null);
    const [status, setStatus] = React.useState({});

    return (
        <View style={styles.container}>
            <View style={styles.videoContainer}>
                <Video
                    ref={video}
                    style={styles.video}
                    source={{
                        uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
                    }}
                    useNativeControls
                    resizeMode="cover"
                    isLooping
                    onPlaybackStatusUpdate={status => setStatus(() => status)}
                />
            </View>
            <StatusBar />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#FFF',
        padding: 10,
    },
    video: {
        alignSelf: 'center',
        width: '100%',
        height: 400,
    },
    buttons: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    videoContainer: {
        shadowColor: '#000',
        shadowOffset: { 
            width: 0, 
            height: 1 
        },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 2,
        padding: 15,
    },
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...