Show your modal in React Native Application (IOS and Android)

Modal pop-up in React Native Expo Application

Hello Coders..!!

In mobile app development, all you want is attractive UI. A UI that seeks the attention of the user and is loved by everyone. We are going to talk about such features of React Native in this blog. Ever wonder how a message box appears on the top of your screen when you click a button. Well, that’s the Modal feature of React Native. Let’s see how to make a Modal View using React Native. Grab your seat and take a cup of coffee let’s begin the hack.

Photo by Azamat E on Unsplash

Set-up and Installation

1. Make a directory and navigate to it.
2. Open the command prompt or terminal in this directory and run the command: expo init Modal
3. Choose the blank template and proceed with the download.

Code of Modal in React Native Expo

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

App.js

import React, { useState } from 'react';
import { Alert, Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello Coders..!!</Text>
<TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
<TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text style={styles.textStyle}>Show My Modal</Text>
      </TouchableHighlight>
    </View>
  );
}

Firstly, we imported all the required packages. We used react hooks concepts in this project. The important part of the project is UI. So, under the Modal View section, we set the animation type to “slide”. The rest of the part is styling.

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

Well, This much styling is needed. And we are done with the code part here. It’s a simple javascript project. Now, let’s run this project in your terminal or command prompt, scan the QR code with your IOS or Android devices and see the project in action. After the successful build of javascript dependencies, you will see something like this.

It’s cool, right? Now change the animationType from “slide” to “fade”. You will see something change in the behavior of the animation. We are done with the code part here. If you face any kind of difficulty then let me know in the comment section.

Thank you.