Dialog

Lightweight floating dialog

Import: import { Dialog } from 'react-native-mantine';

Usage

import { useState } from 'react';
import { Dialog, Button, Text } from 'react-native-mantine';

const MyComponent = () => {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <Button onPress={() => setOpened(true)}>
        Show Dialog
      </Button>

      {/* Positioned dialog */}
      <Dialog
        opened={opened}
        position={{ bottom: 20, right: 20 }}
      >
        <Text>Dialog content</Text>
        <Button onPress={() => setOpened(false)}>
          Close
        </Button>
      </Dialog>

      {/* Centered dialog */}
      <Dialog
        opened={opened}
        centered
      >
        <Text>Centered dialog content</Text>
      </Dialog>
    </>
  );
};

Props

Prop	Type	Default	Description
`opened` (required)	`boolean`		Dialog opened state
`children`	`React.ReactNode`		Dialog content
`size`	`MantineNumberSize \| number`	`'md'`	Dialog size
`padding`	`SpacingValue`	`'md'`	Dialog padding
`radius`	`MantineNumberSize`	`'md'`	Dialog border radius
`position`	`{ top?: number; left?: number; right?: number; bottom?: number; }`		Dialog position
`centered`	`boolean`		If true, dialog will be centered on screen
`withShadow`	`boolean`	`true`	If true, dialog will show shadow
`withBorder`	`boolean`	`false`	If true, dialog will show border
`style`	`any`		Additional styles
`transitionDuration`	`number`	`200`	Animation duration in ms
`accessibilityLabel`	`string`		Accessibility label for the dialog
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm