React Native Modal Example To Display Image

This tutorial explains how to display image in modal dialog box in react native application. he Modal component is a simple way to present content above an enclosing view. Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. In this example we are going to update the initial state with help of toggleModal function. This function helps to hide and show the image inside the model component in react native view component.

React Native Modal Example To Display Image

Lets see the below steps that helps to  display image in modal dialog box in react native application with simple example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native, react-native-torch  packages import all required components.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Modal, TouchableHighlight, Image } from 'react-native';

Step 4: create App component and place the below code inside the App component.

export default class App extends Component {

  state = {
    modalVisible: false,
  }

  toggleModal(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={styles.container} >
        <Modal animationType={"slide"} transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => { console.log("Modal has been closed.") }}>

          <View style={styles.modal}>
            <Image
              style={{ width: '100%', height: 200, resizeMode: 'stretch' }}
              source={{ uri: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOTOvRsuivdtguN1ZRNTqrQB8QlHgTSNV5IQdE6GyG0GMRX9qBRWW_l4Y5vsOGyYpbTLKmM1BCVN-trhchnw2dCOweJs0hEHZcEz-CFEztCRkVGMYk3kLQoA1EVcxy8FupLfcp3MTeoJ0/s400/fist+app.jpg' }}
            />
            <Text style={styles.text}> Javascript Tutorial With Example</Text>

            <TouchableHighlight style={styles.touchableButton}
              onPress={() => { this.toggleModal(!this.state.modalVisible) }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>

        <TouchableHighlight style={styles.touchableButton} onPress={() => { this.toggleModal(true) }}>
          <Text style={styles.text}>Open Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#2196f3',
      justifyContent: 'center',
      padding : 10,
    },
    text: {
      color: '#fff',
      fontSize: 20,
      textAlign: 'center',
    },
    touchableButton: {
      width: '70%',
      padding: 10,
      backgroundColor: '#f06292',
      marginBottom: 10,
      marginTop: 30,
    },
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to use the modal component to display image in React Native application.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Modal, TouchableHighlight, Image } from 'react-native';


export default class App extends Component {

  state = {
    modalVisible: false,
  }

  toggleModal(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={styles.container} >
        <Modal animationType={"slide"} transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => { console.log("Modal has been closed.") }}>

          <View style={styles.modal}>
            <Image
              style={{ width: '100%', height: 200, resizeMode: 'stretch' }}
              source={{ uri: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOTOvRsuivdtguN1ZRNTqrQB8QlHgTSNV5IQdE6GyG0GMRX9qBRWW_l4Y5vsOGyYpbTLKmM1BCVN-trhchnw2dCOweJs0hEHZcEz-CFEztCRkVGMYk3kLQoA1EVcxy8FupLfcp3MTeoJ0/s400/fist+app.jpg' }}
            />
            <Text style={styles.text}> Javascript Tutorial With Example</Text>

            <TouchableHighlight style={styles.touchableButton}
              onPress={() => { this.toggleModal(!this.state.modalVisible) }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>

        <TouchableHighlight style={styles.touchableButton} onPress={() => { this.toggleModal(true) }}>
          <Text style={styles.text}>Open Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#2196f3',
      justifyContent: 'center',
      padding : 10,
    },
    text: {
      color: '#fff',
      fontSize: 20,
      textAlign: 'center',
    },
    touchableButton: {
      width: '70%',
      padding: 10,
      backgroundColor: '#f06292',
      marginBottom: 10,
      marginTop: 30,
    },
  });

Screenshot :

This is all about React Native Modal Example To Display Image. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.