@baronha/ting

Overview

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

Installation

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

New Architecture

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

Older

cd ios && pod install --verbose

Usage

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 = {
  // ...
  titleColor: '#D60A2E',
  icon: {
    uri: require('./vietnam.png'), // or remote
    size: 24,
  },
};

toast(options); // icon is 🇻🇳

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		✅	✅
subTitle	string	null		✅	✅
titleColor	string	null		✅	✅
messageColor	string	null		✅	✅
icon	object	null		✅	✅	See Icon
preset	string	done		✅	✅	Toast: done, error, none. Alert: done, error, none, spinner
duration	number	3		✅	✅	The lifetime of the toast (seconds)
titleColor	string	null		✅	✅
shouldDismissByDrag	boolean	true		✅		The behavior on Android is click
position	string	top		✅		Toast is displayed from top or bottom
haptic	string	null		✅		success, warning, error, none
shouldDismissByTap	boolean	true			✅
borderRadius	number	null			✅
blurBackdrop	number	null			✅
backdropOpacity	number	null			✅

Icon

icon	Type	Default value	Platform
uri	string	null
size	number	null

To Do

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

License

MIT AlertKit SPIndicator EasyWindow