React Native Dialog Component for Customizable Alerts

Description:

The react-native-dialog component library provides a set of components for creating native-style dialogs on both iOS and Android platforms.

It can be used for implementing user interaction patterns that require modal dialogs, alerts, confirmation screens, and input prompts.

Features

🌐 Compatible with Expo SDK 49+ and bare React Native projects.
🎨 Global styling configuration through DialogProvider for design consistency.
🚀 Portal-based rendering ensures proper z-index management and display.
⚡ Configurable animation duration and delay parameters for fine-tuned transitions.
🎬 Multiple slide animation options including bottom, top, left, and right directions.
📱 Input field support within dialogs for user data collection.
🔍 Blur effect integration compatible with popular blur libraries.
🌙 Dark and light tint options for backdrop customization.
📋 TypeScript support with included type definitions.
🛠️ Modular component structure for flexible dialog composition.

Preview

Use Cases

• Displaying terms of service agreements that require user acceptance.
• Collecting user input through modal forms without navigation context.
• Showing critical alerts that require immediate user attention.
• Presenting confirmation dialogs for destructive actions like deletions.
• Implementing tutorial overlays and feature announcements.

How to Use It

1. Install the package through your preferred package manager.

# Yarn
$ yarn add @ontech7/react-native-dialog

# NPM
$ npm install @ontech7/react-native-dialog

# PNPM
$ pnpm install @ontech7/react-native-dialog

2. Wrap your application root component with the DialogProvider. This enables global styling configuration and provides the necessary context for dialog operations. Place this provider in your main App.js file or root layout component.

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

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

3. To create a standard dialog, you import the required components and manage its visibility with a state variable. The Dialog component is controlled by the open prop.

// MyComponent.tsx
import React, { useState, useCallback } from "react";
import { Button, View } from "react-native";
import {
  Dialog,
  DialogAction,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
} from "@ontech7/react-native-dialog";
export default function BasicDialogExample() {
  const [isVisible, setIsVisible] = useState(false);
  const showDialog = useCallback(() => setIsVisible(true), []);
  const hideDialog = useCallback(() => setIsVisible(false), []);
  return (
    <View>
      <Button title="Show Basic Dialog" onPress={showDialog} />
      <Dialog open={isVisible}>
        <DialogHeader>
          <DialogTitle>Action Required</DialogTitle>
          <DialogDescription>
            Please confirm your choice below. This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogAction onPress={hideDialog}>Cancel</DialogAction>
          <DialogAction onPress={hideDialog}>Confirm</DialogAction>
        </DialogFooter>
      </Dialog>
    </View>
  );
}

4. For dialogs that require user input, you can use the DialogInput component. It is a good practice to use a ref to handle the text input value to prevent performance issues from frequent state updates.

// MyInputDialog.tsx
import React, { useState, useCallback, useRef } from "react";
import { Button, View, Text } from "react-native";
import {
  Dialog,
  DialogAction,
  DialogInput,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogBody,
  DialogDescription,
} from "@ontech7/react-native-dialog";
export default function InputDialogExample() {
  const [isVisible, setIsVisible] = useState(false);
  const [submittedText, setSubmittedText] = useState("");
  const inputValueRef = useRef("");
  const showDialog = useCallback(() => setIsVisible(true), []);
  const hideDialog = useCallback(() => setIsVisible(false), []);
  const handleConfirm = useCallback(() => {
    setSubmittedText(inputValueRef.current);
    hideDialog();
  }, [hideDialog]);
  return (
    <View>
      <Button title="Show Input Dialog" onPress={showDialog} />
      <Text>Submitted Text: {submittedText}</Text>
      <Dialog open={isVisible}>
        <DialogHeader>
          <DialogTitle>Enter Your Name</DialogTitle>
          <DialogDescription>
            Please provide your name in the field below.
          </DialogDescription>
        </DialogHeader>
        <DialogBody>
          <DialogInput
            placeholder="e.g., John Doe"
            onChangeText={(text) => (inputValueRef.current = text)}
          />
        </DialogBody>
        <DialogFooter>
          <DialogAction onPress={hideDialog}>Cancel</DialogAction>
          <DialogAction onPress={handleConfirm}>Submit</DialogAction>
        </DialogFooter>
      </Dialog>
    </View>
  );
}

5. Customize the dialog’s behavior and appearance through the following props on the Dialog component.

• BlurComponent: Pass a blur view component (e.g., from expo-blur) to add a blur effect to the background.
• tint: Sets the backdrop color. Accepts 'light' or 'dark'.
• animation: A boolean to enable or disable animations.
• duration: The animation duration in milliseconds.
• slideFrom: Defines the slide-in animation direction. Options are 'none', 'bottom', 'top', 'left', and 'right'.

FAQs

Q: Does this library work with Expo managed workflows?
A: Yes, the library maintains full compatibility with Expo SDK versions 49 and higher.

Q: Can I customize the appearance of individual dialog components?
A: Yes, each component accepts style props while maintaining global styling through the provider.

Q: How do I add blur effects to dialog backgrounds?
A: Pass a BlurComponent prop to your Dialog instance, using compatible blur libraries like expo-blur.