Build this simple video player with react native and expo to tell a multi-part story -Part 3

Getting a video player working with react and expo

Unfortunately, the react-native-app tutorial does NOT tell us how to play a video.

Remembering my mentor’s mantra, “Google is my friend,” I searched for “React Native Play Video. I found a bunch of links, including several about using a component called “react-native-video.”

THE GOOD NEWS: One of the links even led me to an example, and when I copied the code and ran it on the ios simulator as suggested, it worked!

THE BAD NEWS: I wanted to use it with expo so I could see it on my phone. But when I tried just copying and pasting the code from the example into my App.js file along with my buttons, the app broke. (This is when I got the red screen of death saying it couldn’t contact the server and maybe my phone and computer weren’t on the same wifi network. Actually, as I noted above, I eventually found out that instead the server had run out of memory and crashed.)

So apparently react-native-video didn’t play well with expo.

Back to the Google Drawing Board

Well, how about googling “Play video react native with expo?” Up came a very helpful post from Eyal Cohen: https://medium.com/front-end-hacking/how-to-play-video-with-react-native-and-expo-30523bfcb311

After introducing create-react-native-app, Eyal points out that after creating your app and changing into its directory, if you like instead of running the app on your phone, you can run it on the ios simulator or an android simulator like this:

$ cd my-video   //or whatever the name of your app is
$ npm start
# For Mac users, you can run this instead, and the simulator will open.
$ npm run ios
# For genymotion users (Linux/Windows), you can this:
# npm run android

Eyal then walks us through importing a video component and the Dimensions object from the Expo SDK, getting a video player up and running, and adding controls to mute or play the sound and stop or play the video. If you want the play-by-play so you’ll understand what is happening, head over to Eyal’s post.

If you’re cautious the way I am, you’ll first create the video player separately, then add the buttons. Here’s what the completed code for Eyal’s video-player-with-mute-and-play-controls looked like when I got it done:

import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import { Video } from 'expo';
import { MaterialIcons, Octicons } from '@expo/vector-icons';
export default class App extends React.Component {
   render() {
      const { width } = Dimensions.get('window');
      return (
         <View style={styles.container}>
            <View>
               <Text style={{ textAlign: 'center' }}>
                   React Native Video</Text>
               <Video
                 source={{ uri:    
        'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
                 shouldPlay={this.state.shouldPlay}
                 resizeMode="cover"
                 style={{ width, height: 300 }}
                 isMuted={this.state.mute}
               />
               <View style={styles.controlBar}>
                   <MaterialIcons
                      name={this.state.mute ? "volume-mute" :
                          "volume-up"}
                      size={45}
                      color="white"
                      onPress={this.handleVolume}
                   />
                   <MaterialIcons
                      name={this.state.shouldPlay ? "pause" : 
                           "play-arrow"}
                      size={45}
                      color="white"
                      onPress={this.handlePlayAndPause}
                   />
               </View>
            </View>
        </View>
    );
  }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   },
   controlBar: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: 45,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: "rgba(0, 0, 0, 0.5)",
   }
});

(Eyal’s full code is at https://github.com/eyalcohen4/react-native-video-sample.)

Note: This will NOT WORK if you just copy and paste it into your App.js file, unless you have already installed the MaterialIcons package. Otherwise, before you try to run the above code, in your terminal, run
$ npm install — save @expo/vector-icons

This also won’t work if you try to use a YouTube “share” link as a video source. You need to have a link to an actual video file.

Then you should be good to go.

So many thanks to Eyal Cohen: He got us a video player for react native and expo that actually works!

But we wanted to do more than just show a video. We wanted to show a whole sequence of videos. We wanted to tell a story.

It’s time to put our buttons and this video player together.
Read more in Part 4!