react-native-dialog

Simple and lightweight dialog component for React Native, structure similar to shadcn/ui, with dimezis background blur. Compatible with Android & iOS.

Features:

• Compatible with Expo SDK >= 49 and bare projects
• shadcn/ui approach, with fully customizable components
• Possibility to change global styles from the DialogProvider
• Portalized pupup/dialog
• Modifiable duration (default: 200)
• Modifiable tint dark/light (default: dark)
• Modifiable slide-in animation (default: none)
• Possibility to add blur layer with BlurComponent prop

Showcase

No Slide	Slide-in
Input	Global Custom Styles

Custom themes / styles

Style	Code
Shadcn/ui	import { DialogProvider, shadcnStyle } from "@ontech7/react-native-dialog"; export default function RootLayout() { return ( <DialogProvider customStyles={shadcnStyle}> {/* ... rest of the code here ... */} </DialogProvider> ) }

Usage

$ yarn add @ontech7/react-native-dialog
# or
$ npm install @ontech7/react-native-dialog
# or
$ pnpm add @ontech7/react-native-dialog

You need to import the DialogProvider and put it in your App.js or root _layout.tsx component.

// _layout.tsx
import { DialogProvider } from "@ontech7/react-native-dialog";

export default function RootLayout() {
  return (
    <DialogProvider>
      {/* ... rest of the code here ... */}
    </DialogProvider>
  )
}

// Component.tsx
import { useState, useCallback } from "react";

import {
  Dialog,
  DialogAction,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  type DialogProps,
} from "@ontech7/react-native-dialog";

export default function Component(props: DialogProps) {
  const [open, setOpen] = useState(false);

  const handleOpen = useCallback(() => setOpen(true), []);
  const handleClose = useCallback(() => setOpen(false), []);

  return (
    <Dialog open={open} {...props}>
      <DialogHeader>
        <DialogTitle>Attention!</DialogTitle>
        <DialogDescription>
          This is a dialog.{"\n"}Please click one of the buttons below to close
          it.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogAction onPress={handleClose}>Close</DialogAction>
        <DialogAction onPress={handleClose}>Confirm</DialogAction>
      </DialogFooter>
    </Dialog>
  );
}

Blur Component

It's possible to add blur component to Dialog, such as expo-blur, @react-native-community/blur or @sbaiahmed1/react-native-blur.

By defalt it has a 25% intensity and a downsample factor of 8. They should be enough and not so much expensive on hardware acceleration.

import { BlurView } from "@sbaiahmed1/react-native-blur";

export default function Component(props) {
  return (
    <Dialog BlurComponent={BlurView} {...props}>
      {/* ... code here ... */}
    </Dialog>
  );
}

Props

DialogProvider

Name	Description
customStyles	Possibility to customize globally all provided components

Dialog

Name	Description
open	Show/hide dialog (default: true)
onPressOut	Add callback when pressing out of the dialog
tint	Backdrop background color. Possible values: light, dark (default: dark)
animation	Enable or disable animations (default: true)
duration	Duration of the animations (default: 200)
delay	Delay when opening the dialog (default: 0)
slideFrom	Animation slide-in. Possible values: none, bottom, top, left, right, center. (default: none)
BlurComponent	Possibility to add BlurView such as expo-blur, @react-native-community/blur or @sbaiahmed1/react-native-blur

---

Example

Here are simple examples:

• Expo Snack - Simple example
• Expo Snack - Input example
• Check example folder

---

Credits

Written by Andrea Losavio.