https://github.com/foveluy/rn-toaster
A android like toast for react-native apps ( forks )
https://github.com/foveluy/rn-toaster
react react-native reactnative toast
Last synced: over 1 year ago
JSON representation
A android like toast for react-native apps ( forks )
- Host: GitHub
- URL: https://github.com/foveluy/rn-toaster
- Owner: Foveluy
- License: mit
- Created: 2018-09-26T04:59:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-28T07:26:56.000Z (almost 8 years ago)
- Last Synced: 2023-08-24T06:47:21.998Z (almost 3 years ago)
- Topics: react, react-native, reactnative, toast
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-smart-toast
[](https://www.npmjs.com/package/rn-toaster)
[](https://www.npmjs.com/package/rn-toaster)
[](https://www.npmjs.com/package/rn-toaster)
[](https://github.com/react-native-component/rn-toaster/blob/master/LICENSE)
A android like toast for react-native apps, written in JS for cross-platform support.
It works on iOS and Android.
This component is compatible with React Native 0.25 and newer.
## Preview
![react-native-smart-toast-preview-ios][1]
![react-native-smart-toast-preview-android][2]
## Installation
```
npm install rn-toaster --save
```
## Full Demo
see [ReactNativeComponentDemos][0]
## Usage
Install the toast from npm with `npm install rn-toaster --save`.
Then, require it from your app's JavaScript files with `import toast from 'rn-toaster'`.
```js
import React, { Component } from "react";
import { View } from "react-native";
import Button from "react-native-smart-button";
import TimerEnhance from "react-native-smart-timer-enhance";
import Toast from "rn-toaster";
class LoadingToast extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
show top (顶部显示)
show center (中心显示)
show bottom (底部显示)
show fast (快速显示)
show fast immediate hide
show immediate (立即显示)
show immediate animated hide
(this._toast = component)} marginTop={64}>
Unable to connect to apple store
);
}
_showTopToast = () => {
this._toast.show({
position: Toast.constants.gravity.top
});
};
_showCenterToast = () => {
this._toast.show({
position: Toast.constants.gravity.center,
children: (
Unalbe to download now
)
});
};
_showBottomToast = () => {
this._toast.show({
position: Toast.constants.gravity.bottom,
children: "Unalbe to upload now"
});
};
_showFastToast = () => {
this._toast.show({
position: Toast.constants.gravity.center,
duration: 255,
children: "Unable to connect to apple store"
});
};
_showFastToastAndAnimatedHide = () => {
this._toast.show({
position: Toast.constants.gravity.center,
duration: 255,
children: "Unable to connect to google store",
animationEnd: () => {
this._toast._toastAnimationToggle = this.setTimeout(() => {
this._toast.hide({
duration: 0,
animationEnd: () => {
//do sth...
}
});
}, 3000);
}
});
};
_showImmediateToast = () => {
this._toast.show({
position: Toast.constants.gravity.center,
duration: 0,
children: "Unable to connect to wifi"
});
};
_showImmediateToastAndAnimatedHide = () => {
this._toast.show({
position: Toast.constants.gravity.center,
duration: 0,
children: "Unable to connect to wlan",
animationEnd: () => {
this._toast._toastAnimationToggle = this.setTimeout(() => {
this._toast.hide({
animationEnd: () => {
//do sth...
}
});
}, 3000);
}
});
};
}
export default TimerEnhance(LoadingToast);
```
## Props
| Prop | Type | Optional | Default | Description |
| ---------------- | ------ | -------- | ---------------- | ----------------------------------------------------------------------------------------------------- |
| style | style | Yes | | see [react-native documents][3] |
| textStyle | style | Yes | | see [react-native documents][4] |
| spacing | number | Yes | 30 | determine the top or bottom spacing when the position is on the top or bottom |
| position | style | Yes | constants.bottom | determine the position of toast |
| duration | number | Yes | 3000 | determine the residence duration after toast is shown |
| animatedDuration | number | Yes | 510 | determine the duration of toast animation |
| delay | number | Yes | 0 | determine the delay of toast animation |
| marginTop | number | Yes | 0 | determine the marginTop of the root container view, it is used when toast's position is constants.top |
## Method
- show({children, position, duration, easing, delay, animationEnd,})
- children: determine the children of toast
- position: determine the position of toast. enum(gravity.bottom, gravity.top, gravity.center)
- duration: determine the duration of animation
- easing: determine the easing of animation
- delay: determine the delay of animation
- animationEnd: determine the callback when animation is end
- hide({duration, easing, delay, animationEnd,})
- duration: determine the duration of animation
- easing: determine the easing of animation
- delay: determine the delay of animation
- animationEnd: determine the callback when animation is end
[0]: https://github.com/cyqresig/ReactNativeComponentDemos
[1]: http://cyqresig.github.io/img/react-native-smart-toast-preview-ios-v1.0.0.gif
[2]: http://cyqresig.github.io/img/react-native-smart-toast-preview-android-v1.0.0.gif
[3]: https://facebook.github.io/react-native/docs/style.html
[4]: http://facebook.github.io/react-native/docs/text.html#style