docs/public/2.0/modal.html
The Modal component is a simple way to present content above an enclosing view. To render the Modal above other components, you'll need to wrap it with the Portal component.
import * as React from 'react';
import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';
export default class MyComponent extends React.Component {
state = {
visible: false,
};
_showModal = () => this.setState({ visible: true });
_hideModal = () => this.setState({ visible: false });
render() {
const { visible } = this.state;
return (
<Provider>
<Portal>
<Modal visible={visible} onDismiss={this._hideModal}>
<Text>Example Modal</Text>
</Modal>
<Button
style={{ marginTop: 30 }}
onPress={this._showModal}
>
Show
</Button>
</Portal>
</Provider>
);
}
}
dismissable
Type: boolean
Default value: true
Determines whether clicking outside the modal dismiss it.
onDismiss
Type: () => mixed
Callback that is called when the user dismisses the modal.
visible
Type: boolean
Default value: false
Determines Whether the modal is visible.
children (required)
Type: React.Node
Content of the Modal.
contentContainerStyle
Type: any
Style for the content of the modal
theme
Type: Theme