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

Video Demo ?

ios android Modal

Ting_iOS.mp4

Ting_Android.mp4

Modal.mp4

Installation

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

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

iOS

New Architecture

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

Older

cd ios && pod install --verbose

Usage

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

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

alert(options); // easy to use

Options

Property Type Default value Platform Toast Alert Description
title string null Both ✅ ✅
subTitle string null Both ✅ ✅
titleColor string null Both ✅ ✅
messageColor string null Both ✅ ✅
icon object null Both ✅ ✅ See Icon
preset string done Both ✅ ✅ Toast: done, error, none.Alert: done, error, none, spinner
duration number 3 Both ✅ ✅ The lifetime of the toast (seconds)
titleColor string null Both ✅ ✅
shouldDismissByDrag boolean true Both ✅ The behavior on Android is click
position string top Both ✅ Toast is displayed from top or bottom
haptic string null iOS ✅ success, warning, error, none
shouldDismissByTap boolean true Both ✅
borderRadius number null Both ✅
blurBackdrop number null Android ✅
backdropOpacity number null Android ✅

Icon

icon Type Default value Platform
uri string null Both
size number null Both

To Do

  • shouldDismissByDrag on Android
  • callback
  • backgroundColor

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.

License

MIT AlertKit SPIndicator EasyWindow

GitHub

View Github