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 styles

| Shadcn/ui | | ----------------------------------- | | |

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

Default

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

Input

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

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

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

  /* avoid input lag */
  const textInputRef = useRef(null);
  const [text, setText] = useState("");

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

  const handleConfirm = useCallback(() => {
    setText(textInputRef.current);
    setOpen(false);
  }, []);

  return (
    <Dialog open={open} {...props}>
      <DialogHeader>
        <DialogTitle>Attention!</DialogTitle>
        <DialogDescription>
          This is an INPUT dialog.{"\n"}Please click one of the buttons below to
          close it.
        </DialogDescription>
      </DialogHeader>
      <DialogBody>
        <DialogInput
          placeholder="Write something..."
          onChangeText={(text) => (textInputRef.current = text)}
        />
      </DialogBody>
      <DialogFooter>
        <DialogAction onPress={handleClose}>Close</DialogAction>
        <DialogAction onPress={handleConfirm}>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.