Mad Toast

Mad Toast is a wrapper around react-native-toast-message that adds EDS styling to the toasts, and a queueing system for toasts.

Features

• EDS styling
• Toast queues
• Simplified API

Installation

npm install @equinor/mad-toast

Usage

Add ToastEmitter component to your app. It should be the last child in your View hierarchy in order to prevent other components from rendering above it:

import { ToastEmitter } from "@equinor/mad-toast";

export function App(props) {
    return (
        <>
            {/* ... */}
            <ToastEmitter />
        </>
    );
}

Then use addToast anywhere in your app

// Foo.jsx
import { addToast } from "@equinor/mad-toast";
import { Button } from "react-native";

export function Foo(props) {
    const showToast = () => {
        addToast({
            type: "SUCCESS",
            text: "Hello",
        });
    };

    return <Button title="Show toast" onPress={showToast} />;
}

Docs

For more detailed information about how to use the package, head to our documentation page