Welcome to %s forums

<No. 1 Community for developers, by developers/>

Login Register

Explain Modal of React Native?

React Native related topics are here
Post Reply
admin
Site Admin
Posts: 45

Explain Modal of React Native?

Post by admin » Sun Oct 20, 2019 12:46 am

animationType it's an enum of ('none', 'slide', 'fade') and it controls modal animation.
visible its a bool that controls modal visiblity.
onShow it allows passing a function that will be called once the modal has been shown.
transparent bool to set transparency.
onRequestClose (android) it always defining a method that will be called when user tabs back button
onOrientationChange (IOS) it always defining a method that will be called when orientation changes
supportedOrientations (IOS) enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')

Modal component is a simple way to present content above an enclosing view.

Modal Basic Example

Code: Select all

import React, { Component } from 'react';
import {
Modal,
Text,
View,
Button,
StyleSheet,
} from 'react-native';
const styles = StyleSheet.create({
mainContainer: {
marginTop: 22,
},
modalContainer: {
marginTop: 22,
},
});
class Example extends Component {
constructor() {
super();
this.state = {
visibility: false,
};
}
setModalVisibility(visible) {
this.setState({
visibility: visible,
});
}
render() {
return (
<View style={styles.mainContainer}>
<Modal
animationType={'slide'}
transparent={false}
visible={this.state.visibility}
>
<View style={styles.modalContainer}>
<View>
<Text>I'm a simple Modal</Text>
<Button
color="#000"
onPress={() => this.setModalVisibility(!this.state.visibility)}
title="Hide Modal"
/>
</View>
</View>
</Modal>
<Button
color="#000"
onPress={() => this.setModalVisibility(true)}
title="Show Modal"
/>
</View>
);
}
}
export default Example;
Transparent Modal Example

Code: Select all

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button, Modal } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
state = {
modalVisible: false,
};
_handleButtonPress = () => {
this.setModalVisible(true);
};
setModalVisible = (visible) => {
this.setState({modalVisible: visible});
}
render() {
var modalBackgroundStyle = {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
};
var innerContainerTransparentStyle = {backgroundColor: '#fff', padding: 20};
return (
<View style={styles.container}>
<Modal
animationType='fade'
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => this.setModalVisible(false)}
>
<View style={[styles.container, modalBackgroundStyle]}>
<View style={innerContainerTransparentStyle}>
<Text>This is a modal</Text>
<Button title='close'
onPress={this.setModalVisible.bind(this, false)}/>
</View>
</View>
</Modal>
<Button
title="Press me"
onPress={this._handleButtonPress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
}
});

Post Reply