Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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


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://4.bp.blogspot.com/-krdeTqQLML8/Wyf2oV7eedI/AAAAAAAABpI/OZ759swV7L8wWtt2pwBXIgp6aPz33r01gCLcBGAs/s400/fist%2Bapp.jpg' }}
/>
Text style={styles.text}> Javascript Tutorial With ExampleText>

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

TouchableHighlight style={styles.touchableButton} onPress={() => { this.toggleModal(true) }}>
Text style={styles.text}>Open ModalText>
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://4.bp.blogspot.com/-krdeTqQLML8/Wyf2oV7eedI/AAAAAAAABpI/OZ759swV7L8wWtt2pwBXIgp6aPz33r01gCLcBGAs/s400/fist%2Bapp.jpg' }}
/>
Text style={styles.text}> Javascript Tutorial With ExampleText>

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

TouchableHighlight style={styles.touchableButton} onPress={() => { this.toggleModal(true) }}>
Text style={styles.text}>Open ModalText>
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 :


React Native Modal Example To Display Image

React Native Modal Example To Display Image

This is all about React Native Modal Example To Display ImageThank 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.



This post first appeared on Selenium Web Driver Tutorials, please read the originial post: here

Share the post

React Native Modal Example To Display Image

×

Subscribe to Selenium Web Driver Tutorials

Get updates delivered right to your inbox!

Thank you for your subscription

×