How to Show a Modal in React Native – React-Native Modal

What is Modal –

Here we are going to discuss “How to Show a Modal in React Native”, Modal is a react native component, which we use to show the popup, below is an example of a modal showing in react native.

Output Example –

react native modal

Why You Need To Use Modal –

  • Modal use to show the popup
  • Showing list of data in a popup in very common
  • By using the react-native modal, you don’t need to install any third party library
  • Modal is a react native view component
  • This modal is supported by android and iOS both platform

So here we implement the modal example, let’s start…

Step 1 – Create a react-native app

First we create a react-native app for implementing modal

react-native init ModalExample

Step 2 – Importing the modal

Next you need to import the modal in that screen where you want to implement the modal popup

import { Modal } from 'react-native';

Step 3 – Design the modal view

Now we design the modal view within the render method

render() {
   let mandatoryDocType = [{id:1, name:'Passport'}, {id:2, name:'pan card'}]
    return (
                      width: "30%",
                      top: moderateScale(8),
                      justifyContent: "center",
                      borderRadius: moderateScale(10),
                      onPress={() => this.toggleModal(true)}
                   <Text style={styles.uploadTxt}>     {'upload'}</Text>

                  onRequestClose={() => {
                  <View style={styles.modal}>
                    <View style={styles.mainBoxView}>
                      <Text style={{ fontWeight: 'bold' }}>
                      {, index) => {
                        return (
                            onPress={() => {
                            <Text style={styles.text}>

Step 4 – Define the toggleModal

Now we are going to provide the definition of toggleModal, by using toggleModal you able to open and close the modal view

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

Step 5 – Declare the state

In state we declare a variable for hiding showing modal, we use the modalVisible variable for showing modal

this.state = {
 modalVisible: false

Step 5 – Implementing CSS class

For giving modal a good look we apply some CSS, you can modify the CSS when you want

 modal: {
    alignItems: 'center',
    flex: 1,
    padding: 100,
    backgroundColor: 'rgba(100, 100, 100, 0.3)',
  text: {
    color: '#3f2949',
    marginTop: 10,
  mainBoxView: {
    alignItems: "center",
    backgroundColor: colors.white,
    shadowColor: colors.gray,
    shadowOffset: {
      width: 0,
    padding: 20,

So we completed the react-native modal integration which is “How to Show a Modal in React Native“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.

Related Post