npmpackage.info

Gathering detailed insights and metrics for react-native-easy-toast

Other packages similar to react-native-easy-toast

@hyoungnamoh/react-native-easy-toast

0.0.5

[Fork Version] A react native module to show toast like android, it works on iOS and Android.

react-native-easy-custom-toast

1.1.0

Customizable Toast hook for React Native

react-native-easy-toast-0

1.0.3

@olio-rent/react-native-easy-toast

2.0.1

A react native module to show toast like android, it works on iOS and Android.

Gathering detailed insights and metrics for react-native-easy-toast

react-native-easy-toast - 2.3.0 | npmpackage.info

react-native-easy-toast

A react native module to show toast like android, it works on iOS and Android.

2.3.0

1,142

MIT

JavaScript

16.69 kB

2,831,810 2.8

Installations

npm install react-native-easy-toast

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.17.6

NPM Version

6.14.15 Pull Requests

Open

32

Total

62

Closed

13

Merged

17

Issues

Open

53

Total

68

Closed

15

Releases

v2.1.0

Updated on Nov 15, 2022

v2.0.0

Updated on Dec 31, 2020

v1.2.0

Updated on Feb 07, 2019

v1.0.6

Updated on May 20, 2017

v1.0.5

Updated on Dec 05, 2016

v1.0.3

Updated on Nov 15, 2016

View All 7 releases

Languages

JavaScript

JavaScript (100%)

Developer

crazycodeboy

Download Statistics

Total Downloads

2,831,810

Last Day

1,013

Last Week

7,429

Last Month

30,634

Last Year

326,430

GitHub Statistics

MIT License

1,142 Stars

78 Commits

259 Forks

17 Watchers

18 Branches

15 Contributors

Updated on Jul 18, 2025

Maintainers

View All 15 Contributors

Package Meta Information

Latest Version

2.3.0

Package Id

react-native-easy-toast@2.3.0

Unpacked Size

16.69 kB

Size

5.25 kB

File Count

NPM Version

6.14.15

Node Version

14.17.6

Total Downloads

Cumulative downloads

Total Downloads

2,831,810

Last Day

17.4%

1,013

Compared to previous day

Last Week

-19.5%

7,429

Compared to previous week

Last Month

20.8%

30,634

Compared to previous month

Last Year

-1.9%

326,430

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

deprecated-react-native-prop-types prop-types

Peer Dependencies

react-native prop-types

react-native-easy-toast

A react native module to show toast like android, it works on iOS and Android.

Installation

1.Run npm i react-native-easy-toast --save
- or yarn add react-native-easy-toast
2.import Toast, {DURATION} from 'react-native-easy-toast'

Demo

Examples

Screenshots

Getting started

Add react-native-easy-toast to your js file.

import Toast, {DURATION} from 'react-native-easy-toast'

Inside your component's render method, use Toast:

1 render() {
2     return (
3         <View>
4             ...
5            <Toast ref={(toast) => this.toast = toast}/>
6         </View>
7     );
8 }

Note: Be sure to add Toast to the bottom of the root view.

Then you can use it like this:

1this.toast.show('hello world!');

That's it, you're ready to go!

show a toast, and execute callback function when toast close it:

1this.toast.show('hello world!', 500, () => {
2    // something you want to do at close
3});

Show a toast forever until you manually close it:

1this.toast.show('hello world!', DURATION.FOREVER);

Or pass an element:

1this.toast.show(<View><Text>hello world!</Text></View>);
2 // later on:
3 this.toast.close('hello world!');

Optional you can pass a delay in seconds to the close()-method:

1 this.toast.close('hello world!', 500);

Currently, the default delay for close() in FOREVER-mode is set to 250 ms (or this.props.defaultCloseDelay, which you can pass with)

1 <Toast ... defaultCloseDelay={100} />

Basic usage

1render() {
2return (
3    <View>
4        <Button title={'Press me'} onPress={()=>{
5            this.toast.show('hello world!',2000);
6        }}/>
7        <Toast ref={(toast) => this.toast = toast}/>
8    </View>
9);
10    }

Custom Toast

1render() {
2    return (
3        <View>
4            <Button title={'Press me'} onPress={()=>{
5                    this.toast.show('hello world!',2000);
6                }}/>
7            <Toast
8                ref={(toast) => this.toast = toast}
9                style={{backgroundColor:'red'}}
10                position='top'
11                positionValue={200}
12                fadeInDuration={750}
13                fadeOutDuration={1000}
14                opacity={0.8}
15                textStyle={{color:'red'}}
16            />
17        </View>
18    );
19}

More Usage:

GitHubPopular

API

Props	Type	Optional	Default	Description
style	View.propTypes.style	true	{backgroundColor: 'black',opacity: OPACITY,borderRadius: 5,padding: 10,}	Custom style toast
position	PropTypes.oneOf(['top','center','bottom',])	true	'bottom'	Custom toast position
positionValue	React.PropTypes.number	true	120	Custom toast position value
fadeInDuration	React.PropTypes.number	true	500	Custom toast show duration
fadeOutDuration	React.PropTypes.number	true	500	Custom toast close duration
opacity	React.PropTypes.number	true	1	Custom toast opacity
textStyle	View.propTypes.style	true	{color:'white'}	Custom style text

Method	Type	Optional	Description
show(text, duration, callback, onPress)	function	false	show a toast,unit is millisecond，and do callback
close()	function	-	start the close timer

Contribution

Issues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.

Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first.

MIT Licensed

No vulnerabilities found.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More