Skip to content

Latest commit

 

History

History
270 lines (217 loc) · 11.3 KB

README.md

File metadata and controls

270 lines (217 loc) · 11.3 KB

Logo1.2.3 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:

4cc3ssX
Ryam
baronha
Bảo Hà.
Acetyld
Dion Grendelman
jeongshin
Huckleberry
tuanngocptn
Nick - Ngoc Pham

License

MIT AlertKit SPIndicator EasyWindow