Modal won't show the image in react native

Question

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.

Modal is opening fine but it is not showing the image.. However I have checked the value of image in render method of Modal ie ImageViewer, value I am getting is a class object.

App:

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 (
        <View style={{alignItems:'center', justifyContent: 'center'}}>
            <ScrollView>
            {this.Images.map((item)=>{
                return (
                    <TouchableOpacity key={item} onPress={(item)=>this.showImage(item)}>
                        <View style={{borderColor: 'red', borderWidth: 1, marginBottom: 10}}>
                            <Image style={{width: 200, height: 200}} source={item} />
                        </View>
                    </TouchableOpacity>
                    )
            })}
            </ScrollView>
            <ImageViewer closeModal={()=>this.close()} modalVisible={this.state.modalVisible} image={this.image}/>
        </View>
    );
  }
}

Modal:

class ImageViewer extends Component {
    render() {
        console.log(this.props.image) //Checking Value here
        return (
            <Modal
                style={{top: '50%', left: '50%', transform: 'translate(-50%, -50%) !important'}}
                animationType='fade'
                transparent={true}
                onRequestClose={()=>this.props.closeModal()}
                visible={this.props.modalVisible}
            >
                <View style={{flex:1 ,alignItems: 'center', justifyContent: 'center', backgroundColor:'#00000069'}}>
                    <View  style={{padding:20 , backgroundColor:'#fff', borderRadius: 10}}>
                        <Image style={{width: 400, height: 600}} source={this.props.image} />
                    </View>
                </View>
            </Modal>
        )
    }
}

export default App;

both are in same file..

Screenshots :

Normal : https://imgur.com/deai02Y.jpg

Clicked on Image: https://imgur.com/POuZlPU.jpg

Answer 1

On Touchableopacity onPress you are actually passing the onPress $event to showImage function instead of item. so correct way of doing it is

<View style={{alignItems:'center', justifyContent: 'center'}}>
            <ScrollView>
            {this.Images.map((item)=>{
                return (
                    <TouchableOpacity key={item} onPress={()=>this.showImage(item)}>
                        <View style={{borderColor: 'red', borderWidth: 1, marginBottom: 10}}>
                            <Image style={{width: 200, height: 200}} source={item} />
                        </View>
                    </TouchableOpacity>
                    )
            })}
            </ScrollView>
            <ImageViewer closeModal={()=>this.close()} modalVisible={this.state.modalVisible} image={this.image}/>
        </View>

Answer 2

after app called write

constructor(props) {
    super(props);
    this.state = {
      image : ''
    };

  }

and in showImage path

 showImage(path){ 
       this.setstate({image : path});
        this.setState({modalVisible: true});
    }

and in Imageviewer

<ImageViewer closeModal={()=>this.close()} modalVisible={this.state.modalVisible} image={this.state.image}/>