Back to React Native Paper

Modal

docs/public/2.0/modal.html

5.15.11.5 KB
Original Source

Modal

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.

Usage

js
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>
    );
  }
}

Props

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