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

| Customized by props | Customized by component | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | | | |

Example Toast Notification

| Theme Light |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | |

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...

| Name | Description | Required | Default | Type | | ---------- | ------------------------------------------------------------------ | ------- | ------- | ---------- | | alertStyle | The custom style for the Alert component. | | | Object | | actions | An array containing information about the Alert's actions. | | | Array | | icon | The icon to display in the Alert component. | | | React Node | | timeout | The timeout in milliseconds for the Alert component. | | | Number | | onHide | The function to call when the Alert component is hidden. | | () => {}| Function | | isVisible | Whether the Alert component is visible or not. | | | Boolean | | setVisible | The function to call to set the visibility of the Alert component. | | | Function | | title | The title text for the Alert component. | | | String | | body | The body text for the Alert component. | | | String | | children | Any child components to render inside the Alert component. | | | React Node |

AlertStyle

| Name | Description | Required | Default | Type | | ----------- | ------------------------------------------------------- | ------- | ------- | ---------- | | radius | The border radius of the Alert component. | | 20 | Number | | bgColor | The background color of the Alert component. | | "white" | String | | titleColor | The color of the title text in the Alert component. | | "black" | String | | titleSize | The font size of the title text in the Alert component. | | 20 | Number | | bodySize | The font size of the body text in the Alert component. | | 14 | Number | | bodyColor | The color of the body text in the Alert component. | | "black" | String | | family | The font family to use for the Alert component. | | | String | | padding | The padding around the Alert component. | | 1 | Number | | width | The width of the Alert component. | | "100%" | String | | height | The height of the Alert component. | | "auto" | String | | maxWidth | The maximum width of the Alert component. | | 350 | Number | | maxHeight | The maximum height of the Alert component. | | | Number | | textAlign | The text alignment in the Alert component. | | "center"| String | | gap | The gap between the Alert component and its container. | | 20 | Number |

AlertActions

| Name | Description | Required | Default | Type | | -------- | ----------------------------------------------------------------- | ------- | ------- | ----------------------- | | direction| The direction of the inline buttons. Either "row" or "column". | | "row" | String | | gap | The gap between the inline buttons. | | 5 | Number | | radius | The radius of the inline buttons. | | 10 | Number | | buttons | An array containing information about the inline buttons. | | | Array |

AlertButtons

| Name | Description | Required | Default | Type | | ------ | ----------------------------------------------------- | ------- | ------- | ----------- | | onPress| The function to call when the button is pressed. | | () => {}| Function | | title | The text to display on the button. | | "" | String | | style | The style for the button. | | { buttonColor: "", textColor: "" } | Object |

Toast Component

A Toast component displays a brief message to the user.

| Name | Description | Required | Default | Type | | --------------- | --------------------------------------------------------------------------- | ------- | ------- | ------------------------ | | position | The position of the Toast component on the screen. | | "top" | String | | customStyle | The custom style for the Toast component. | | | Object | | timeout | The timeout in milliseconds for the Toast component. | | false | Boolean or Number | | title | The title text for the Toast component. | | | String | | body | The body text for the Toast component. | | | String | | bottomPosition | The distance in pixels from the bottom of the screen for a bottom-positioned Tost. | | 60 | Number | | topPosition | The distance in pixels from the top of the screen for a top-positioned Toast. | | 60 | Number | | icon | The icon to display in the Toast component. | | | React Node | | height | The height of the Toast component. | | 60 | Number | | action | The function to call when an action is triggered in the Toast component. | | () => {}| Function |

ToastStyle

| Name | Description | Require | Default | Type | | ---------------- | --------------------------------------------------- | ------- | ------- | ------ | | titleSize | The font size of the title text in the Alert. | | 16 | Number | | bodySize | The font size of the body text in the Alert. | | 16 | Number | | backgroundColor | The background color of the Alert. | | #2AAF73 | String | | titleColor | The color of the title text in the Alert. | | white | String | | bodyColor | The color of the body text in the Alert. | | white | String |

Author

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

License

MIT