react-native-cocoalert

A customizable alert component for React Native projects. You can display 4 types of messages (Info,Error,Warning and Success)

Installation

You can install this package using npm or yarn:

npm install react-native-cocoalert

or

yarn add react-native-cocoalert

Usage

import CocoAlert from 'react-native-cocoalert';

 <CocoAlert
visible={true}
type={'error'}
title={'Title'}
message={'Message'}
onClose={() => {
//other actions
}}
/>

Example Usage

import React, { useState } from "react";
import { View, Text, StyleSheet } from 'react-native';
// import CocoAlert from "../utils/CocoAlert";
import CocoAlert from "react-native-cocoalert";

const TestCocoAlert = () => {
    const [showAlert, setShowAlert] = useState(false);
    const [message, setMessage] = useState("Message")
    const [type, setType] = useState("");
    const [title, setTitle] = useState("Title")


    return (
        <View style={styles.container}>
            <Text style={styles.text} onPress={() => {
                setType("info")
                setShowAlert(true)
            }}>Info</Text>
            <Text style={styles.text} onPress={() => {
                setType("warning")
                setShowAlert(true)

            }}>Warning</Text>
            <Text style={styles.text} onPress={() => {
                setType("success")
                setShowAlert(true)

            }}>Success</Text>
            <Text style={styles.text} onPress={() => {
                setType("error")
                setShowAlert(true)

            }}>Error</Text>

            <CocoAlert
                visible={showAlert}
                type={type}
                title={title}
                message={message}
                onClose={() => {
                    setShowAlert(false)
                }}
            />

        </View>
    )

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        backgroundColor: '#000',
        padding: 10,
        textAlign: 'center',
        color: 'white',
        margin: 10
    },
});

export default TestCocoAlert;

Properties

Property	Type	Description
type	string	Specifies the type of alert. Values are info,error,success or warning
title	string	The title of the alert optional
message	string	Display message
visible	boolean	Show alert with true or hide alert with false
onClose	function	You can close the alert here and any additional operations afterwards