title: Modal won't show the image in react native
body: <p>I have written a program in which I am showing a list of images in ScrollView when user clicks an image a modal is popped up and image would be shown in large size. But this is not working.</p>
  <p>Modal is opening fine but it is not showing the image..
  However I have checked the value of image in render method of Modal i.e. ImageViewer, value I am getting is a class object.</p>
  <h2>App:</h2>
  <pre><code>import React, {Component} from 'react';
  import {View,Modal, ScrollView, Image, TouchableOpacity, StyleSheet} from 'react-native';
  import pic1 from './images/sl13.png';
  import pic2 from './images/sl14.png';
  import pic3 from './images/sl15.png';
  import pic4 from './images/sl16.png';
  import pic5 from './images/sl17.png';
  
  class App extends Component {
      Images = [pic1, pic2, pic3, pic4, pic5];
      state = {
          modalVisible: false,
      }
      image = null
  
      close(){
          this.setState({modalVisible: false});
      }
      constructor(props){
          super(props);
          this.close = this.close.bind(this);
      }
  
      showImage(path){
          this.image = path;
          this.setState({modalVisible: true});
      }
  
      render() {
      return (
          &lt;View style={{alignItems:'center', justifyContent: 'center'}}&gt;
              &lt;ScrollView&gt;
              {this.Images.map((item)=&gt;{
                  return (
                      &lt;TouchableOpacity key={item} onPress={(item)=&gt;this.showImage(item)}&gt;
                          &lt;View style={{borderColor: 'red', borderWidth: 1, marginBottom: 10}}&gt;
                              &lt;Image style={{width: 200, height: 200}} source={item} /&gt;
                          &lt;/View&gt;
                      &lt;/TouchableOpacity&gt;
                      )
              })}
              &lt;/ScrollView&gt;
              &lt;ImageViewer closeModal={()=&gt;this.close()} modalVisible={this.state.modalVisible} image={this.image}/&gt;
          &lt;/View&gt;
      );
    }
  }
  </code></pre>
  <h2>Modal:</h2>
  <pre><code>class ImageViewer extends Component {
      render() {
          console.log(this.props.image) //Checking Value here
          return (
              &lt;Modal
                  style={{top: '50%', left: '50%', transform: 'translate(-50%, -50%) !important'}}
                  animationType='fade'
                  transparent={true}
                  onRequestClose={()=&gt;this.props.closeModal()}
                  visible={this.props.modalVisible}
              &gt;
                  &lt;View style={{flex:1 ,alignItems: 'center', justifyContent: 'center', backgroundColor:'#00000069'}}&gt;
                      &lt;View  style={{padding:20 , backgroundColor:'#fff', borderRadius: 10}}&gt;
                          &lt;Image style={{width: 400, height: 600}} source={this.props.image} /&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/Modal&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  <p>both are in same file..</p>
  <h2>Screenshots :</h2>
  <p>Normal : <a href="https://imgur.com/deai02Y.jpg" rel="nofollow noreferrer">https://imgur.com/deai02Y.jpg</a></p>
  <p>Clicked on Image: <a href="https://imgur.com/POuZlPU.jpg" rel="nofollow noreferrer">https://imgur.com/POuZlPU.jpg</a></p>