A Flexible and customizable React Native toast/alert notifications with support for positioning

by React Native Example

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

Video Demo ?

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.

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 = {
  // ...
  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 ??

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