title: How to display videos in grid layout and play on press React Native
body: <p>I am displaying a set of images in a grid layout. But when i add video url to the same nothing is displayed in the grid layout. All i see is a blank space. How can I add videos to a grid layout and on press play it in a modal?</p>
  
  <p>My Code for GridLayout: </p>
  
  <pre><code>import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View, TouchableWithoutFeedback, Modal, Dimensions, ScrollView} from 'react-native';
  
  import ImageElement from './ImageElement';
  
  export default class GridLayoutSample extends Component{
    constructor(){
      super()
    this.state={
      modalVisible: false,
      modalImage: require('./download (1).jpeg'),
      images:[
        require('./download.png'),
        require('./android/app/img/51049911-nice-france-august-15-2015-subway-fast-food-restaurant-interior-subway-is-an-american-fast-food-rest.jpg'),
        require('./android/app/img/dominos.jpg'),
        require('./android/app/img/0.jpeg'),
        //{ uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg" },
                  //{ url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                  //{ URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
      ]
    }
  }
  
  setModalVisible(visible, imagekey){
    this.setState({modalImage: this.state.images[imagekey]});
    this.setState({modalVisible: visible});
  }
  
  getImage(){
    return this.state.modalImage;
  }
    render(){
      let images = this.state.images.map((val,key) =&gt; {
        return&lt;TouchableWithoutFeedback key={key}
        onPress={()=&gt; {this.setModalVisible(true, key)}}&gt;
        &lt;View style={styles.imagewrap}&gt;
        &lt;ImageElement imgsource={val}&gt;&lt;/ImageElement&gt;
        &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      });
      return(
        &lt;View style={styles.container}&gt;
  
  
        &lt;Modal style={styles.modal} animationType={'fade'}
        transparent={true} visible={this.state.modalVisible} onRequestClose={()=&gt;{}}&gt;
  
        &lt;View style={styles.modal}&gt;
        &lt;Text style={styles.text} onPress={()=&gt;{
          this.setModalVisible(false)}}&gt;Close&lt;/Text&gt;
          &lt;ImageElement imgsource={this.state.modalImage}&gt;&lt;/ImageElement&gt;   
        &lt;/View&gt;
  
        &lt;/Modal&gt;
        {images}
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
  container:{
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: '#eee',
  },
  imagewrap:{
    margin: 2,
    padding: 2,
    height: (Dimensions.get('window').height/3)-12,
    width: (Dimensions.get('window').width/2)-4,
    backgroundColor: '#fff',
  },
  modal:{
    flex:1,
    padding: 40,
    backgroundColor: 'rgba(0,0,0, 0.9)',
  },
  text:{
    color: '#fff',
  },
  })
  </code></pre>
  
  <blockquote>
    <p><strong>ImageElement.js : This is the code for ImageElement.js</strong></p>
  </blockquote>
  
  <pre><code>import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View, Image} from 'react-native';
  
  export default class GridLayoutSample extends Component{
    render(){
      return(
        &lt;Image source={this.props.imgsource} style={styles.image}&gt;
        &lt;/Image&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    image:{
      flex:1,
      width: null,
      alignSelf: 'stretch',
    }
  })
  </code></pre>