custom-alert-expo

custom-alert-expo is a customizable alert component for React Native applications, designed to work seamlessly with Expo. This library provides an easy way to create custom alerts similar to iOS alerts.

Output

Installation

You can install the package using npm or yarn:

npm install custom-alert-expo

USAGE

import React, { useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import tailwind from 'twrnc';
import CustomAlert from 'custom-alert-expo';

const LogOut = () => {
    const [isVisible, setIsVisible] = useState(false);

    const OkayButton = {
        text: "OKAY",
        onPress: () => {
            setIsVisible((prev) => !prev);
        }
    };

    const options = {
        title: "Are You Sure?",
        subTitle: "Please confirm if you wish to proceed with logging out.",
        buttons: [
            {
                text: "Confirm",
                onPress: () => {
                    // write any other code
                    setIsVisible((prev) => !prev);
                }
            },
            {
                text: "Cancel",
                onPress: () => {
                    // write any other code
                    setIsVisible((prev) => !prev);
                }
            }
        ]
    };

    return (
        <View style={[tailwind`bg-black flex w-full h-full items-center justify-center`]}>
            {isVisible && <CustomAlert isVisible={isVisible} options={options}/>}
            <TouchableOpacity onPress={() => setIsVisible(true)}>
                <Text style={[tailwind`text-white text-[14px]`]}>Log Out</Text>
            </TouchableOpacity>
        </View>
    )
}

export default LogOut;

`

Props

• isVisible (boolean, optional): Controls the visibility of the alert. Defaults to true.
• options (object, required): Configuration options for the alert.
  • title (string): Title of the alert.
  • subTitle (string): Subtitle of the alert.
  • buttons (array): Array of button objects.
    • text (string): Text displayed on the button.
    • onPress (function): Function to execute when the button is pressed.
• style (object, optional): Additional styles to apply to the alert component.

Supported Style Props

• safeAreaView (object): Styles for the SafeAreaView container wrapping the modal.
• blurView (object): Styles for the BlurView component used for background blur.
• container (object): Styles for the main container of the alert.
• contentContainer (object): Styles for the container of the alert content.
• title (object): Styles for the alert title text.
• subTitle (object): Styles for the alert subtitle text.
• button (object): Styles for the alert button containers.
• buttonText (object): Styles for the alert button text.

Enjoy

Remember, great code is like a fine-tuned instrument—it sings when it's played right. Keep coding, stay inspired, and build amazing things!