rn-animated-toast

Toast it up! Elevate your React Native app with <Toast /> - the perfect ingredient for serving up delightful and informative messages.

Install

Open a Terminal in the project root and run:

Using npm:

npm install rn-animated-toast

or using yarn:

yarn add rn-animated-toast

Features

• Easy-to-use API: Quickly integrate toast messages into your React Native app with a simple and intuitive API.
• Customizable Appearance: Customize the look and feel of your toasts by configuring properties such as background color, text color, duration, and more.
• Multiple Toast Types: Display different types of toasts, including success, error, warning, or general informative messages.
• Built with TypeScript: The entire codebase of the toast package is written in TypeScript, providing improved code maintainability, better developer tooling, and enhanced static type checking.
• Positioning Options: Choose the position where your toasts appear on the screen, such as top, bottom.
• Duration Control: Set the duration for how long the toast message stays visible before automatically dismissing.
• Lightweight and Performant: Designed to be lightweight and optimized for performance, ensuring smooth operation in your React Native app.

Usage

Call Toast Component in your index.ts file.

import Toast from 'rn-animated-toast'

export default function App() {
  return (
    <>
    <RestOfYourApp />
    <Toast>
    <>
  );
}

Customization

Toast props

There are lots of props to customize your toast or your can use renderToast to implement your own component.

<Toast
    position="bottom | top"
    offset={50} // offset is same for top and bottom toasts
    visibilityTime={4000}
    successIcon={require("../../icons/succesIcon.png")}
    errorIcon={require("../../icons/errorIcon.png")}
    infoIcon={require("../../icons/infoIcon.png")}
    defaultIcon={require('../../icons/AppIcon.png')}
    successColor="green"
    errorColor="red"
    infoColor="yellow"
    defaultColor="black"
    isAnimated={true}
>

Methods

showToast()

const onPress = () => {
    showToast(message: "Task finished successfully",
        type: "default" | "success" | "error" | "info",
        iconPath: require("../../images/icon.png")
    );
}

Props

| Prop | Type | Optional | Default | Description | | -------- | ------------------ | -------- | ------- | ------------------------------------- | | message | string | No | | Message which is need to be displayed | | type | string | Yes | default | type of showing message | | iconPath | ImageRequireSource | Yes | | Icon to display in the toast message |

Contributing

We welcome contributions from the community! Please refer to the Contribution Guidelines for more details.

License

This project is licensed under the MIT License.

If you find rn-animated-toast useful, consider giving it a star on GitHub and spread the word! 🌟