@ontech7/react-native-dialog
Version:
Simple and lightweight dialog component for React Native, structure similar to shadcn/ui, with dimezis background blur. Compatible with Android & iOS.
219 lines (168 loc) • 8.19 kB
Markdown
# react-native-dialog
[](https://snack.expo.io/@dontrok1/react-native-dialog-simple-example)
[](https://www.npmjs.com/package/@ontech7/react-native-dialog)
[](https://www.npmjs.com/package/@ontech7/react-native-dialog)
[](https://www.npmjs.com/package/@ontech7/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](https://ui.shadcn.com/) |
| ----------------------------------- |
|  |
## Usage
```bash
$ 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.
```jsx
// _layout.tsx
import { DialogProvider } from "@ontech7/react-native-dialog";
export default function RootLayout() {
return <DialogProvider>{/* ... rest of the code here ... */}</DialogProvider>;
}
```
### Default
```jsx
// 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
```jsx
// 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.
```jsx
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](https://snack.expo.dev/@dontrok1/react-native-dialog-simple-example)
- [Expo Snack - Input example](https://snack.expo.dev/@dontrok1/react-native-dialog-input-example)
- Check [example folder](/example/)
## Credits
Written by [Andrea Losavio](https://linkedin.com/in/andrea-losavio).