AppDividend
Latest Code Tutorials

React Native Modal Example | Tutorial

1,494

Get real time updates directly on you device, subscribe now.

React Native Modal Example is today’s leading topic. In this demo, we will see how we can display the Modal and show the data inside that Modal. For this tutorial, we use React Native component called Modal to display the image and text. It is a straightforward demo, but very useful React Native Modal Tutorial. So let us dive into it.

React Native Modal Example

Okay, first let us install React Native Project.

#1: Install React Native on Mac.

If you have not installed React Native CLI globally then install it using the following command.

npm install -g react-native-cli

Okay, now for creating a new application, type the following command.

react-native init rncreate
cd rncreate

Now, after installing, we need to open this application in the two different Simulators.

For testing on iOS simulator, type the following command.

react-native run-ios

Open the Project in your favorite editor.

code .

#2: Add a Button.

We will display the two things inside the Modal.

  1. Text
  2. Image

So inside the root, create one folder called assets and inside that create one folder called images and add an image from your local machine and copy the image in this folder.

Okay, now Add the Button and Image inside Container View. Type the following code inside App.js.

// App.js

import React, { Component } from 'react';
import Krunal from './assets/images/Krunal.jpg';
import { View, Button, StyleSheet } from 'react-native';

export default class App extends Component {

  render() {
    	return (
        <View style = { styles.container }>
          <Button 
            onPress = { () => console.log('Button Pressed') }
            title = "Open Modal"
            color = "orange">
          </Button>
        </View>
      )
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 300,
  }
});

So, here we have added one Button, and also, we have imported the Image file. Right now, we have not used yet, but we will use in a minute. 

Our goal is when the User clicks the button, Modal will pop up otherwise it will not pop up, and we can’t see it. So, now we import one more component and pass the Image and Text as a prop to that component.

Also, by default Modal is always open, so we need to handle it our way. That is why we need the state which we can control, and ultimately we control the Modal.

#3: Create DisplayModal.js file.

Now, create one folder inside root called components and inside that create one file called DisplayModal.js and add the following code.

// DisplayModal.js

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

const DisplayModal = (props) => (
  <Modal visible={ props.display } animationType = "slide" 
         onRequestClose={ () => console.log('closed') }>>
    <View>
      <Image 
        source = { props.image } 
        style = { styles.image } />
      <Text style = { styles.text }>
        { props.data }
      </Text>
    </View>
  </Modal>
)

const styles = StyleSheet.create({
  image: {
    marginTop: 20,
    marginLeft: 90,
    height: 200,
    width: 200
  },
  text: {
    fontSize: 20,
    marginLeft: 150
  }
})

export default DisplayModal;

DisplayModal is a static component, and it has nothing to do with State. So I have used as a functional component. It just accepts the props and displays in the styled form.

You can note that we have used Modal’s visible property. So when it is true, we can see the Modal otherwise we don’t see the Modal. Thus it is controlled by the Parent component, and in our case it is App.js.

So when the User clicks, we change the State of the display property inside App.js to true, and now we can see the Modal.

Now, write the following code inside an App.js file.

// App.js

import React, { Component } from 'react';
import Krunal from './assets/images/Krunal.jpg';
import { View, Button, StyleSheet } from 'react-native';
import DisplayModal from './components/DisplayModal';

export default class App extends Component {

  state = {
    display: false
  }

  triggerModal() {
    this.setState(prevState => {
      return {
        display: true
      }
    });
  }

	render() {
    	return (
        <View style = { styles.container }>
          <Button 
            onPress = { () => this.triggerModal() }
            title = "Open Modal"
            color = "orange">
          </Button>
          <DisplayModal 
            image = { Krunal }
            data = "Krunal"
            display = { this.state.display }
          />
        </View>
      )
  	}
}

const styles = StyleSheet.create({
  container: {
    marginTop: 300,
  }
});

So, here, we have defined the one state called display, and by default it is false. When the user clicks on the button, it will change to true, and we can see the Modal will popup.

React Native Modal Example | Tutorial

 

Related Posts
1 of 8

#4: Modal Properties.

You can find out more about Modal Properties on this Link.

Here, we have used one Modal property called animationType.

animationType

It has the following values.

  1. slide:  slides in from the bottom.
  2. fade:  fades into view.
  3. none:  appears without an animation.

We have used the slide, but you can try to fade and see how it can change the layout animation effect.

Visible

The visible property accepts two arguments.

  1. true
  2. false

If it is true, then it will be visible inside the screen otherwise not. We have passed the property of visible inside Modal when the button is clicked.

Finally, React Native Modal Example | Tutorial is over.

1 Comment
  1. Usman says

    krunal !
    how to add onPress event on this modal.when i am click on button which is locate on modal screen.
    and my function late on my root file can function will run??
    thankyou

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.