Video playlist issue (when one video ends, the next video plays beginning from the length of previous vid) Expo/React Native

Question

I am trying to create a playlist component, which has a this.state.playlist consisting of multiple mp4 video files, and the source of the Video tag is this.state.playlist[0]. Ideally when one video finishes, this.state.playlist shifts the first component and pushes it to the back, effectively moving onto the next component. However, it seems like the next video is starting at the same time the first video ends.

So for instance: if I have video A ( 1 min and 10 seconds) , video B (1 min and 40 seconds), and video C (2 minutes and ten seconds) . In this example, video A will play as normal, video B will start at 1 min and 10 seconds, and video C will start at 1 minute and 40 seconds. Here is an example expo.snack/Online Repl if you would like to test out the code:

https://snack.expo.io/By7nzgmtW

You can imagine this is especially an issue when it comes to videos that are the same amount of time as it seemingly just skips over them in general (this has been happening to me and I’ve been struggling the past couple days trying to figure out why the player seems to be skipping over some videos).

Also note: in my own code for my full repo (I would share it but its quite lengthy and I think the above snack/repl is much more illustrative of the issue) I use the require syntax because the video files are local, so let me know if theres any differences between the require/uri syntax in your solutions please.

Also, If you’re going to link me to the docs and a specific portion I would highly appreciate an example snack/repl/code ideally using my code as a basis, as I’ve read through the docs for the AV/Video stuff quite a few times and haven’t figured out a solution.

Thank you.

Here is the full code from the repl/expo.snack if you don't want to go to the link:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Video } from 'expo';


export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      playlist: [
        {src: 'http://wsiatest.bitballoon.com/videotrack.mp4', name: 'dancers'},
        {src: 'https://mohammadhunan.herokuapp.com/coding.mp4', name: 'portfolio'},
        {src: 'http://www.html5videoplayer.net/videos/toystory.mp4', name: 'toys'}
        ]
    }
  }
  videoUpdated(playbackStatus){
    if(playbackStatus['didJustFinish']){
      this.playNext();
    }
  }
  playNext(){
    // playNext() method takes the first item in the this.state.playlist array and moves it to the back
   console.log('video did just finish');
    let playlist = this.state.playlist;
      let temp = playlist[0];
      playlist.shift(); 
      playlist.push(temp);
      this.setState({playlist,})
  }
  render() {
    return (
      <View>
        <Video 
        onPlaybackStatusUpdate={(playbackStatus)=> this.videoUpdated(playbackStatus)}
        resizeMode="cover" 
        source={{uri: this.state.playlist[0].src}}
        useNativeControls
        rate={1.0}
        volume={1.0}
        muted={false} style={{height:180,width:240}} />
      </View>
    );
  }
}

Edit:

Some extra info:

• I used the create-react-native-app generator
• expo version @20.0.0
• react version @16.0.0-alpha.12
• react native version ^0.47.0
• This is an android app I'm building (though this is most likely irrelevant as this code is pretty much interchangeable with ios)