How to alert something when the video ends on expo-video-player on react native?

Question

The expo-video-player repo with custom control has been very helpful to me (this is the link of the repo I based from). I was wondering how can I make a function where I can do something when the video ends (like alert "The video ends").

Code: This is what I have tried so far:

const updatePlaybackCallback = (status: AVPlaybackStatus) => {
 props.playbackCallback(status)
   if (status.didJustFinish){
     alert('END!');
   }
}

return (
 <View style={styles.container}>
   <VideoPlayer
     videoProps={{
       shouldPlay: false,
       resizeMode: Video.RESIZE_MODE_COVER,
       source: {
         uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
       },
       ref: refVideo2,
     }}
     onPlaybackStatusUpdate={updatePlaybackCallback}
     fullscreen={{
       inFullscreen: isFullscreen,
       enterFullscreen: async () => {
         setStatusBarHidden(true, 'fade')
         setFullscreen(true)
         await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT)
       },
       exitFullscreen: async () => {
         setStatusBarHidden(false, 'fade')
         setFullscreen(false)
         await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT)
       },
     }}
     style={{
       videoBackgroundColor: 'black',
       height: isFullscreen ? Dimensions.get('window').width : 160,
       width: isFullscreen ? Dimensions.get('window').height : 320,
     }}
   />
 </View>

I have tried these too but it doesn't do anything:

_onPlaybackStatusUpdate = playbackStatus => {
 if (playbackStatus.durationMillis === playbackStatus.positionMillis)
 alert('END!')
 console.log('end')
};

return (
 <View style={styles.container}>
   <VideoPlayer
     videoProps={{
       shouldPlay: false,
       resizeMode: Video.RESIZE_MODE_COVER,
       source: {
         uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
       },
       ref: refVideo2,
     }}
     onPlaybackStatusUpdate={(playbackStatus) => this._onPlaybackStatusUpdate(playbackStatus)}

and

_onPlaybackStatusUpdate = playbackStatus => {
 if (playbackStatus.didJustFinish)
   alert('END!');
};

return (
 <View style={styles.container}>
   <VideoPlayer
     videoProps={{
       shouldPlay: false,
       resizeMode: Video.RESIZE_MODE_COVER,
       source: {
         uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
       },
       ref: refVideo2,
     }}
     onPlaybackStatusUpdate={(playbackStatus) => this._onPlaybackStatusUpdate(playbackStatus)}

Answer 1

Instead of updatePlaybackCallback, onPlaybackStatusUpdate etc...

Did you try to write the playbackCallback (not to invoke it, implementing it)?

Function which is fired every time onPlaybackStatusUpdate occurs

https://github.com/ihmpavel/expo-video-player/blob/master/lib/props.tsx#L15

https://github.com/ihmpavel/expo-video-player#props