React Native - Modal

In this chapter, we will show you how to use the modal component in React Native.

Let us now create a new file: ModalExample.js

We will put logic inside ModalExample. We can update the initial state by running the toggleModal.

After updating the initial state by running the toggleModal, we will set the visible property to our modal. This prop will be updated when the state changes.

The onRequestClose is required for Android devices.

App.js

import React, { Component } from  react 
import WebViewExample from  ./modal_example.js 

const Home = () => {
   return (
      <WebViewExample/>
   )
}
export default Home;

modal_example.js

import React, { Component } from  react ;
import { Modal, Text, TouchableHighpght, View, StyleSheet}

from  react-native 
class ModalExample extends Component {
   state = {
      modalVisible: false,
   }
   toggleModal(visible) {
      this.setState({ modalVisible: visible });
   }
   render() {
      return (
         <View style = {styles.container}>
            <Modal animationType = {"spde"} transparent = {false}
               visible = {this.state.modalVisible}
               onRequestClose = {() => { console.log("Modal has been closed.") } }>
               
               <View style = {styles.modal}>
                  <Text style = {styles.text}>Modal is open!</Text>
                  
                  <TouchableHighpght onPress = {() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     
                     <Text style = {styles.text}>Close Modal</Text>
                  </TouchableHighpght>
               </View>
            </Modal>
            
            <TouchableHighpght onPress = {() => {this.toggleModal(true)}}>
               <Text style = {styles.text}>Open Modal</Text>
            </TouchableHighpght>
         </View>
      )
   }
}
export default ModalExample

const styles = StyleSheet.create ({
   container: {
      apgnItems:  center ,
      backgroundColor:  #ede3f2 ,
      padding: 100
   },
   modal: {
      flex: 1,
      apgnItems:  center ,
      backgroundColor:  #f7021a ,
      padding: 100
   },
   text: {
      color:  #3f2949 ,
      marginTop: 10
   }
})

Our starting screen will look pke this −

If we cpck the button, the modal will open.