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

import * as React from 'react';
import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);
  const containerStyle = {backgroundColor: 'white', padding: 20};

  return (
    <Provider>
      <Portal>
        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
          <Text>Example Modal. Click outside this area to dismiss.</Text>
        </Modal>
      </Portal>
      <Button style={{marginTop: 30}} onPress={showModal}>
        Show
      </Button>
    </Provider>
  );
};

export default MyComponent;

Props

dismissable Type: boolean

Default value: true

Determines whether clicking outside the modal dismiss it.

onDismiss Type: () => void

Callback that is called when the user dismisses the modal.

overlayAccessibilityLabel Type: string

Default value: 'Close modal'

Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.

visible Type: boolean

Default value: false

Determines Whether the modal is visible.

children (required) Type: React.ReactNode

Content of the Modal.

contentContainerStyle Type: StyleProp<ViewStyle>

Style for the content of the modal

style Type: StyleProp<ViewStyle>

Style for the wrapper of the modal. Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.

theme Type: ReactNativePaper.Theme

testID Type: string

Edit this page