Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. To render the Dialog above other components, you'll need to wrap it with the Portal component.


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

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

  const showDialog = () => setVisible(true);

  const hideDialog = () => setVisible(false);

  return (
        <Button onPress={showDialog}>Show Dialog</Button>
          <Dialog visible={visible} onDismiss={hideDialog}>
              <Text variant="bodyMedium">This is simple dialog</Text>
              <Button onPress={hideDialog}>Done</Button>

export default MyComponent;


Type: boolean
Default value: true

Determines whether clicking outside the dialog dismiss it.

Type: () => void

Callback that is called when the user dismisses the dialog.

Type: boolean
Default value: false

Determines Whether the dialog is visible.

Type: React.ReactNode

Content of the Dialog.

Type: ThemeProp
Edit this page