Skip to content
/ ting Public

🍞 Flexible and customizable React Native toast/alert notifications with support for positioning, custom rendering, click handlers, and duration control. Written in Swift and Kotlin

License

Notifications You must be signed in to change notification settings

baronha/ting

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

98 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Logo1.2.2 BuyMeACoffee Kofi

Overview

Turbo Native Modules Swift Kotlin

Ting - React Native Toast | Product Hunt

🍞 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

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 iOS βœ… 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

  • Initialize for the first time (v.1.0.5)
  • tintColor for icon (v.1.0.5)
  • backgroundColor (v.1.0.3)
  • spinner preset for toast (v.1.1.0)
  • custom color like StyleSheet (e.g. #fff, red, rgba(0, 0, 0, .8))
  • 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:

tuanngocptn
Nick - Ngoc Pham
baronha
BαΊ£o HΓ .
4cc3ssX
Ryam
Acetyld
Dion Grendelman

License

MIT AlertKit SPIndicator EasyWindow

About

🍞 Flexible and customizable React Native toast/alert notifications with support for positioning, custom rendering, click handlers, and duration control. Written in Swift and Kotlin

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published