![Logo][Logo] [![BuyMeACoffee][BuyMeACoffee]][BuyMeACoffee-URL] [![Kofi][Kofi]][Kofi-URL]

Overview

[![Swift][Swift]][Swift-URL] [![Kotlin][Kotlin]][Kotlin-URL]

🍞 Flexible and customizable React toast notifications with support for positioning, custom rendering, click handlers, and duration control.

Video Demo 📺

| | ![android] | Modal | | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | <video src="https://github.com/baronha/ting/assets/23580920/15f5677a-d041-499b-99e8-75c9c9c511c9" /> | <video src="https://github.com/baronha/ting/assets/23580920/751a7559-0150-46a2-a573-b2b3423e6e29" /> | <video src="https://github.com/baronha/ting/assets/23580920/b5f4d555-8fb1-4ffe-901c-268099f16f03" /> |

Installation

yarn add @baronha/ting
or
npm i @baronha/ting

If you want to use Expo. Burnt is the solution for you.

[][iOS-URL]

New Architecture

cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --verbose

Older

cd ios && pod install --verbose

Usage

![Toast][Toast]

import { toast } from '@baronha/ting';
// ...
const options = {
  title: 'Done 😎',
  message: 'Successful!!',
};

toast(options); // easy to use

Customize Icon

import { toast } from '@baronha/ting';
// ...
const options = {
  // ...
  title: 'Vietnamese Gangz 😎',
  message: 'Anh em tao là Vietnamese Gangz',
  titleColor: '#D60A2E',
  icon: {
    uri: require('./vietnam.png'), // or remote
    size: 24,
  },
};

toast(options); // icon is 🇻🇳

![Alert][Alert]

import { alert } from '@baronha/ting';
// ...
const options = {
  title: 'Done 😎',
  message: 'Successful!!',
};

alert(options); // easy to use

Initialization

Instead of using too many options like this:

const options = {
  // ...
  messageColor: '#D60A2E',
  titleColor: '#D60A2E',
  icon: {
    uri: require('./vietnam.png'), // or remote
    size: 24,
  },
  shouldDismissByTap: true,
  position: 'bottom',
  // ... bla bla bla
};

toast(options);

You want to initialize the default options for all subsequent use of toast or alert. You can use the setup function that is called when the application is initialized. Do the following:

import { setup } from '@baronha/ting';

const initOption = {
  toast: {
    messageColor: '#D60A2E',
    titleColor: '#D60A2E',
    backgroundColor: '#ffffff',
    // ... more and more
  },
  alert: {
    // ... alert's option
  },
};

setup(initOption);

// Use it next time. You can completely override it on subsequent calls
toast({
  title: 'Ting!',
  message: 'Easy toast for React Native',
});

alert({
  title: "What's up bruhhh!",
  message: 'Easy Alert for React Native',
});

Options

| Property | Type | Default value | Platform | Toast | Alert | Description | | --------------------- | :------: | :-----------: | :--------: | :---: | :---: | :------------------------------------------------------------------------------------------ | | title | string | null | ![Both] | ✅ | ✅ | | | message | string | null | ![Both] | ✅ | ✅ | | | titleColor | string | null | ![Both] | ✅ | ✅ | The color of the title text in hexadecimal format (e.g., #FF0000) | | messageColor | string | null | ![Both] | ✅ | ✅ | The color of the message text in hexadecimal format (e.g., #00FF00) | | icon | object | null | ![Both] | ✅ | ✅ | See Icon | | preset | string | done | ![Both] | ✅ | ✅ | done, error, none, spinner | | duration | number | 3 | ![Both] | ✅ | ✅ | The lifetime of the toast (seconds) | | titleColor | string | null | ![Both] | ✅ | ✅ | | | shouldDismissByDrag | boolean | true | ![Both] | ✅ | | position | string | top | ![Both] | ✅ | | Toast is displayed from top or bottom | | haptic | string | null | | ✅ | | success, warning, error, none | | shouldDismissByTap | boolean | true | ![Both] | | ✅ | | | borderRadius | number | null | ![Both] | | ✅ | | | blurBackdrop | number | null | ![Android] | | ✅ | | | backdropOpacity | number | null | ![Android] | | ✅ | | | backgroundColor | string | #ffffff | ![Both] | ✅ | ✅ | The background color of the toast in hexadecimal format (e.g., #0000FF) |

Icon

| icon | Type | Default value | Platform | | ----------- | :----: | :-----------: | :------: | | uri | string | null | ![Both] | | size | number | null | ![Both] | | tintColor | string | null | ![Both] |

To Do

[x] Initialize for the first time (v.1.0.5)
[x] tintColor for icon (v.1.0.5)
[x] backgroundColor (v.1.0.3)
[x] spinner preset for toast (v.1.1.0)
[x] custom color like StyleSheet (e.g. #fff, red, rgba(0, 0, 0, .8))
[x] shouldDismissByDrag on Android
[ ] callback

Performance

We're trying to improve performance. If you have a better solution, please open a issue or pull request. Best regards!

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Contributors ✨

Thanks go to these wonderful people:

<table> <tbody> <tr> <td align="center"> <a href="https://github.com/4cc3ssX"> <img src="https://avatars.githubusercontent.com/u/57473799?v=4" width="100;" alt="4cc3ssX"/> Ryam </a> </td> <td align="center"> <a href="https://github.com/baronha"> <img src="https://avatars.githubusercontent.com/u/23580920?v=4" width="100;" alt="baronha"/> Bảo Hà. </a> </td> <td align="center"> <a href="https://github.com/Acetyld"> <img src="https://avatars.githubusercontent.com/u/55088242?v=4" width="100;" alt="Acetyld"/> Dion Grendelman </a> </td> <td align="center"> <a href="https://github.com/jeongshin"> <img src="https://avatars.githubusercontent.com/u/64301935?v=4" width="100;" alt="jeongshin"/> Huckleberry </a> </td> <td align="center"> <a href="https://github.com/tuanngocptn"> <img src="https://avatars.githubusercontent.com/u/22292704?v=4" width="100;" alt="tuanngocptn"/> Nick - Ngoc Pham </a> </td> </tr> <tbody> </table>

License

MIT AlertKit SPIndicator EasyWindow

Ting

Install / Use

README