React Native - Modal




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, TouchableHighlight, 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 = {"slide"} 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>
                  
                  <TouchableHighlight onPress = {() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     
                     <Text style = {styles.text}>Close Modal</Text>
                  </TouchableHighlight>
               </View>
            </Modal>
            
            <TouchableHighlight onPress = {() => {this.toggleModal(true)}}>
               <Text style = {styles.text}>Open Modal</Text>
            </TouchableHighlight>
         </View>
      )
   }
}
export default ModalExample

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

Our starting screen will look like this −

 

React Native - Modal

If we click the button, the modal will open.

React Native - Modal



Frequently Asked Questions

+
Ans: React Native - WebView view more..
+
Ans: React Native - View view more..
+
Ans: React Native - Running Android view more..
+
Ans: React Native - Modal view more..
+
Ans: React Native - ActivityIndicator view more..
+
Ans: React Native - Picker view more..
+
Ans: React Native - Status Bar view more..
+
Ans: React Native - Switch view more..
+
Ans: React Native - Text view more..
+
Ans: React Native - Alert view more..
+
Ans: React Native - Geolocation view more..
+
Ans: React Native - AsyncStorage view more..




Rating - NAN/5
486 views

Advertisements