expo-alerts v0.1.0

expo-alerts

Internal notifications module for React Native / Expo. Focused on providing a flexible, cross-platform and easy-to-implement solution for developers looking to add internal notifications to their apps

Example Alert Notification

Example Toast Notification

|

Installation

- Installing:

yarn add expo-alerts

- Installing dependencies:

• For Native project:

yarn add expo-alerts

pod install

• For Expo project:

expo install expo-alerts

Usage

Alert configured by props

import { Alert } from "expo-alerts";
import React, { useState } from "react";
import { Image } from "react-native";

const App = () => {
    // Handler
    const [visible, setVisible] = useState()
    
    // ALert configuration
    const alertConfig = {
        icon: <Image source={...} />,
        title: "Another alert with props",
        body: "This is an alert customized by props.\nAwesome!",
        alertStyle: { radius: 30, padding: 12 },
        actions: {
            direction: "row",
                gap: 5,
                radius: 50,
                buttons: [
                {
                    onPress: () => setVisible(),
                    title: "Aceptar",
                    style: { buttonColor: "#2AAF73", textColor: "white" },
                },
            ],
        },
    };
    
    return (
        <Alert isVisible={isVisible} setVisible={setVisible} {...alertConfig} />
    );
};

export default App;

Alert by user custom component

import { Alert } from "expo-alerts";
import React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

const App = () => {
    // Handler
    const [visible, setVisible] = useState()
    return (
        <Alert isVisible={isVisible} setVisible={setVisible}>
          // Children
        </Alert>
    );
};

Toast Notification

import { Alert } from "expo-alerts";
import React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

const App = () => {
    // Handler
    const [visible, setVisible] = useState()
    
    // Toast configuration
    const configuration = {
        position: "bottom",
        bottomPosition: 20,
        customStyle: {
            titleSize: 16,
            bodySize: 16,
            backgroundColor: "#2AAF73",
            titleColor: "white",
            bodyColor: "white",
        },
        timeout: 3000,
        title: "Timeout Toast",
        body: "This toast will be visible for 3 seconds",
    };
    
    return (
        <Toast
            visible={toast === "Toast"}
            setVisible={setToast}
            config={configuration}
        />
    );
};

Documentation:

Alert Component

Alert component that will show data, actions, images...

AlertStyle

AlertActions

AlertButtons

Toast Component

A Toast component displays a brief message to the user.

ToastStyle

Author

Eloy Gómez García | https://eloygomez.net.com

License

MIT