// Require local img
const image1 = require('./assets/img/1.jpg')
const image2 = require('./assets/img/2.jpg')
// Require local video
const video1 = require('./assets/video/1.mp4')
const video2 = require('./assets/video/2.mp4')
// array object for img/video
const videoRes = [{"videoId": 1,"videoUrl": video1,"posterUrl": image1,"title": "test1","describe": "test1......"},...]
export default function App() {
 const [visible, setVisible] = React.useState(false);
 const [videoUrl, setVideoUrl] = React.useState(null)
// Video Poster List
 const listItems = videoRes.map(item =>
 <TouchableOpacity onPress={() => openVideoFunc(item)} key={item.videoId}>
 <Layout>
 <Image source={item.posterUrl} />
 </Layout>
 </TouchableOpacity>
 )
//open video func
 const openVideoFunc = (item) => {
 setVideoUrl(item.videoUrl) //Switch video url
 setVisible(true) //open modal
 }
 return (
 <Layout>
 {listItems}
 <Modal visible={visible}>
 <Button onPress={() => setVisible(false)} /> //close modalbox 
 <VideoPlayer source: videoUrl /> //videoplayer
 </Modal>
 </Layout>
 );
}