custom-alert-expo
v1.0.5
Published
A custom alert component for React Native Expo applications, designed to mimic the elegant look and feel of iOS alerts. Perfect for developers seeking to enhance their app's user interface with a native-like iOS alert experience.
Downloads
12
Maintainers
Readme
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!