react-native-cocoalert v1.0.5

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