Modal
The Modal component lets us transition to an entirely different screen. This is most useful for simple apps, since for complex apps you’ll likely be using a navigation library which will come with its own way of doing modals. Common props include: 1. animationType- This controls how the modal animates in and out. One of 'none','slide', or 'fade' 2. onRequestClose- A function called when the user taps the Android back button.
3. onShow- A function called after the modal is fully visible.
4. transparent- A bool determining whether the background of the modal is transparent.
5. visible- A bool determining whether the modal is visible or not.
Example:
__________________________________________
import React, { Component } from 'react';
import { Modal, Button, View,Text, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
isVisible: false,
}
render() {
return (
<View style = {styles.container}>
<Modal animationType = {"slide"} transparent = {false}
visible = {this.state.isVisible}
onRequestClose = {() =>{ console.log("Modal closed.") } }>
<View style = {styles.modal}>
<Text style = {styles.text}>Modal is open!</Text>
<Button title="Click To Close Modal" onPress = {() => {
this.setState({ isVisible:!this.state.isVisible})}}/>
</View>
</Modal>
<Button
title="Click To Open Modal"
onPress = {() => {this.setState({ isVisible: true})}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
marginTop:30
},
modal: {
flex: 1,
alignItems: 'center',
backgroundColor: 'cyan',
padding: 100
},
text: {
color: '#3f2949',
marginTop: 30
}
});
_____________________________________________________________________________________
Output:
