Why is my function being called infinitely? (react-native/expo)

Question

I have a video playlist, and when each video ends I would like to play the next video. So far I figured out how to play the next video but then the method this.playnext() is called infinitely, any ideas what I'm doing wrong?

Here is my code, this.playnext() is being called infinitely when the video ends. Any idea on how to fix this?

import React, { Component } from 'react';
import { Video } from 'expo';
let styles = require('../stylesheet.js');


export default class Player extends Component {
  constructor(props){
    super(props);
    this.state = {
      playlist: [
        {src:require('../assets/videos/asthma-1.mp4'),name:'asthma-1'}, 
        {src:require('../assets/videos/asthma-2.mp4'),name:'asthma-2'},
        {src:require('../assets/videos/asthma-3.mp4'),name:'asthma-3'},
        {src:require('../assets/videos/copd-1.mp4'),name:'copd-1'}, 
        {src:require('../assets/videos/copd-2.mp4'),name:'copd-2'},
        {src:require('../assets/videos/copd-3.mp4'),name:'copd-3'},
        {src:require('../assets/videos/diabetes-1.mp4'),name:'diabetes-1'}, 
        {src:require('../assets/videos/diabetes-2.mp4'),name:'diabetes-2'},
        {src:require('../assets/videos/diabetes-3.mp4'),name:'diabetes-3'},
        {src:require('../assets/videos/emphysema-1.mp4'),name:'emphysema-1'}, 
        {src:require('../assets/videos/emphysema-2.mp4'),name:'emphysema-2'},
        {src:require('../assets/videos/emphysema-3.mp4'),name:'emphysema-3'},
        {src:require('../assets/videos/hyperlipidemia-1.mp4'),name:'hyperlipidemia-1'}, 
        {src:require('../assets/videos/hyperlipidemia-2.mp4'),name:'hyperlipidemia-2'},
        {src:require('../assets/videos/hyperlipidemia-3.mp4'),name:'hyperlipidemia-3'},
        {src:require('../assets/videos/hypertension-1.mp4'),name:'hypertension-1'}, 
        {src:require('../assets/videos/hypertension-2.mp4'),name:'hypertension-2'},
        {src:require('../assets/videos/hypertension-3.mp4'),name:'hypertension-3'},
        {src:require('../assets/videos/narcolepsy-1.mp4'),name:'narcolepsy-1'}, 
        {src:require('../assets/videos/narcolepsy-2.mp4'),name:'narcolepsy-2'},
        {src:require('../assets/videos/narcolepsy-3.mp4'),name:'narcolepsy-3'},
        {src:require('../assets/videos/pneumonia-1.mp4'),name:'pneumonia-1'}, 
        {src:require('../assets/videos/pneumonia-2.mp4'),name:'pneumonia-2'},
        {src:require('../assets/videos/pneumonia-3.mp4'),name:'pneumonia-3'}
      ]
    }
  }
  componentDidMount(){
    alert('turnip')
  }

  componentWillReceiveProps(nP){
      let newvideo = nP.video;
      let playlist = this.state.playlist;
      let nextsrc;
      let indexofnewvid;
      for(let i = 0; i <= playlist.length - 1; i++){
        if(playlist[i].name.includes(newvideo)){
          nextsrc = playlist[i];
          indexofnewvid = i;
          break;
        }
      }
      for(let i = 0; i <= indexofnewvid - 1; i++){
        let temp = playlist[0];
        playlist.shift();
        playlist.push(temp);
      }
      this.setState({playlist,})
  }
  componentWillUpdate(prevState, nextState){
    console.log(nextState);
  }
  callern(playbackStatus){
    if(playbackStatus['didJustFinish']){
      console.log('ended');
      this.playnext();
    }else{
      console.log('playing paused or loading');
    }
  }
  playnext(){
    console.log("playing next");
    let playlist = this.state.playlist;
    let temp = playlist[0];
    playlist.shift();
    playlist.push(temp);
    this.setState({playlist,})
  }
  render(){
    return(
     <Video

      onPlaybackStatusUpdate={(playbackStatus)=> this.callern(playbackStatus)}
      source={this.state.playlist[0].src}
      posterSource={require('../assets/images/Signal_Logo.png')}
      rate={1.0}
      volume={1.0}
      muted={false}
      useNativeControls
      resizeMode="cover"
      style={styles.player} />
      )
  }
}

Answer 1

The documentation says

onPlaybackStatusUpdate will be called whenever a call to the API for this playbackObject completes ..... and will also be called at regular intervals while the media is in the loaded state.

You probably want to take advantage of didJustFinish.

a boolean describing if the media just played to completion at the time that this status was received. When the media plays to completion, the function passed in setOnPlaybackStatusUpdate() is called exactly once with didJustFinish set to true. didJustFinish is never true in any other case.