Display button after end of video in react native

Question

I would like to display a butto (continue), only when I will finish to see an entire video in React Native Im watching a video that I uploaded to storage of firebase

Does I have a possibility to know when I arrived to the end of the video?

export default class VideoModalChild extends React.Component{
    constructor(props){
        super(props)
        this.state={
            showTaskVisible:false
        }
    }


render(){
    const task=this.props.task;
        return(
            <CustomBackground>
                <Modal animationType="slide" visible={this.state.showTaskVisible} onRequestClose={()=>this.toggleisModal()}>
                     <TodoModalChild task={task} closeModal={()=>this.toggleisModal()}/>
                </Modal>

                <KeyboardAvoidingView>
                     <SafeAreaView>                    
                        <View>
  
                           {task.video? (
                           <Video
                              source={{uri:task.video}} 
                              shouldPlay
                              muted={true}
                              repeat={true}
                              resizeMode={"cover"}
                              rate={1.0}
                              ignoreSilentSwitch={"obey"}
                              />
                              ):(
                          <Image source={white}}/>
                          )}
                        </View>

                        <TouchableOpacity onPress={()=>this.toggleisModal()}>    
                            <Text>Continuuuue</Text>
                        </TouchableOpacity>

                     </SafeAreaView>
                </KeyboardAvoidingView>
            </CustomBackground>
        )
    }
}

Answer 1

You can track that status of the video by passing a callback to the onPlaybackStatusUpdate prop.

More info on the playing status here: https://docs.expo.io/versions/latest/sdk/av/#playback-status

Ex:

export default class VideoModalChild extends React.Component {
...
onStatusUpdate = (status) => {
  if(status.didJustFinish) {
    // set state or do whatever you need to
   }
}
render() {
  <Video 
    onPlaybackStatusUpdate={this.onStatusUpdate} 
    {...props} 
  />
}
}