import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';

const VideoPlayer = ({videosFiles}) => {
  //console.log(videosFiles)
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  
  return (
    <Video
      ref={video}
      style={styles.video}
      source={{
        uri: videosFiles[0].link,
      }}
      useNativeControls
      resizeMode="contain"
      isLooping
      onPlaybackStatusUpdate={status => setStatus(() => status)}
    />
  );
}

export default VideoPlayer;

const styles = StyleSheet.create({
  video: {
    alignSelf: 'center',
    width: 320,
    height: 200,
  },
});