Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

react-native-common-toast

A toast component with react-native

  • support for iOS
  • support for Android

Install

npm install react-native-common-toast

Example

REACT-NATIVE-COMMON-TOAST REACT-NATIVE-COMMON-TOAST EXAMPLE

Usage

import Toast from 'react-native-common-toast/lib';
import {DURATION} from 'react-native-common-toast/lib/type';

// show success toast
Toast.success("success!");
// show fail toast
Toast.fail("fail!");
// show info toast
Toast.info("info");
// show loading toast
Toast.loading("loading...");
// show custom style toast
Toast.info({
  content: 'custom style',
  style: {backgroundColor: 'blue'}
});
// show modal toast and set duration
Toast.info({
  content: 'modal toast',
  modal: true,
  duration: DURATION.NONE
});
  • if react-native version >= 0.62, insert ToastRoot within root component like this
  • Read more about react-native-root-siblings
import {ToastRoot} from 'react-native-common-toast/lib';

export default () => {
  return <ToastRoot>
    <App />
  </ToastRoot>
}

Events

name params description
success Props show success toast
fail Props show fail toast
info Props show info toast
loading Props show loading toast
show Props the base function
destroy destroy toast

Props

if props is a string, the toast will direct show the string in content

if props is an object, details are listed below

name default type description
content string / JSX.Element The content for toast, maybe is string or JSX.Element
duration DURATION.SHORT enum The duration for toast, if duration is DURATION.NONE, the toast will be not hide, unless you call function named destroy
modal false boolean The modal for toast, if modal is true, you can do nothing before the toast has been destroyed
mask string The mask color for toast
style ViewStyle Custom style for toast
onhide function When toast has been destroyed calling the function

DURATION

  • DURATION.SHORT = 5s
  • DURATION.LONG = 8s
  • DURATION.NONE = 0

TODO

  • With animation and animation hooks
  • Show toast at the top or bottom in the screen
  • Add global toast config
  • Add custom icon in toast

About

No description, website, or topics provided.

Resources

Releases

No releases published
You can’t perform that action at this time.