{"id":25983695,"url":"https://github.com/foveluy/rn-toaster","last_synced_at":"2025-03-05T10:31:53.436Z","repository":{"id":57363980,"uuid":"150370816","full_name":"Foveluy/rn-toaster","owner":"Foveluy","description":"A android like toast for react-native apps ( forks )","archived":false,"fork":false,"pushed_at":"2018-09-28T07:26:56.000Z","size":16,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-08-24T06:47:21.998Z","etag":null,"topics":["react","react-native","reactnative","toast"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Foveluy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-26T04:59:11.000Z","updated_at":"2023-08-12T16:36:43.000Z","dependencies_parsed_at":"2022-09-16T22:50:42.191Z","dependency_job_id":null,"html_url":"https://github.com/Foveluy/rn-toaster","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2Frn-toaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2Frn-toaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2Frn-toaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2Frn-toaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foveluy","download_url":"https://codeload.github.com/Foveluy/rn-toaster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242009968,"owners_count":20057177,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","reactnative","toast"],"created_at":"2025-03-05T10:31:52.372Z","updated_at":"2025-03-05T10:31:53.347Z","avatar_url":"https://github.com/Foveluy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-smart-toast\n\n[![npm](https://img.shields.io/npm/v/rn-toaster.svg)](https://www.npmjs.com/package/rn-toaster)\n[![npm](https://img.shields.io/npm/dm/rn-toaster.svg)](https://www.npmjs.com/package/rn-toaster)\n[![npm](https://img.shields.io/npm/dt/rn-toaster.svg)](https://www.npmjs.com/package/rn-toaster)\n[![npm](https://img.shields.io/npm/l/rn-toaster.svg)](https://github.com/react-native-component/rn-toaster/blob/master/LICENSE)\n\nA android like toast for react-native apps, written in JS for cross-platform support.\nIt works on iOS and Android.\n\nThis component is compatible with React Native 0.25 and newer.\n\n## Preview\n\n![react-native-smart-toast-preview-ios][1]\n![react-native-smart-toast-preview-android][2]\n\n## Installation\n\n```\nnpm install rn-toaster --save\n```\n\n## Full Demo\n\nsee [ReactNativeComponentDemos][0]\n\n## Usage\n\nInstall the toast from npm with `npm install rn-toaster --save`.\nThen, require it from your app's JavaScript files with `import toast from 'rn-toaster'`.\n\n```js\nimport React, { Component } from \"react\";\nimport { View } from \"react-native\";\n\nimport Button from \"react-native-smart-button\";\nimport TimerEnhance from \"react-native-smart-timer-enhance\";\nimport Toast from \"rn-toaster\";\n\nclass LoadingToast extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  render() {\n    return (\n      \u003cView style={{ paddingTop: 64, flex: 1, backgroundColor: \"#fff\" }}\u003e\n        \u003cButton\n          onPress={this._showTopToast}\n          touchableType={Button.constants.touchableTypes.fadeContent}\n          style={{\n            margin: 10,\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show top (顶部显示)\n        \u003c/Button\u003e\n\n        \u003cButton\n          onPress={this._showCenterToast}\n          touchableType={Button.constants.touchableTypes.highlight}\n          underlayColor={\"#C90000\"}\n          style={{\n            margin: 10,\n            justifyContent: \"center\",\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show center (中心显示)\n        \u003c/Button\u003e\n\n        \u003cButton\n          onPress={this._showBottomToast}\n          touchableType={Button.constants.touchableTypes.blur}\n          style={{\n            margin: 10,\n            justifyContent: \"center\",\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show bottom (底部显示)\n        \u003c/Button\u003e\n        \u003cButton\n          onPress={this._showFastToast}\n          style={{\n            margin: 10,\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show fast (快速显示)\n        \u003c/Button\u003e\n        \u003cButton\n          onPress={this._showFastToastAndAnimatedHide}\n          style={{\n            margin: 10,\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show fast immediate hide\n        \u003c/Button\u003e\n        \u003cButton\n          onPress={this._showImmediateToast}\n          style={{\n            margin: 10,\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show immediate (立即显示)\n        \u003c/Button\u003e\n        \u003cButton\n          onPress={this._showImmediateToastAndAnimatedHide}\n          style={{\n            margin: 10,\n            height: 40,\n            backgroundColor: \"red\",\n            borderRadius: 3,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: \"red\",\n            justifyContent: \"center\"\n          }}\n          textStyle={{ fontSize: 17, color: \"white\" }}\n        \u003e\n          show immediate animated hide\n        \u003c/Button\u003e\n\n        \u003cToast ref={component =\u003e (this._toast = component)} marginTop={64}\u003e\n          Unable to connect to apple store\n        \u003c/Toast\u003e\n      \u003c/View\u003e\n    );\n  }\n\n  _showTopToast = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.top\n    });\n  };\n\n  _showCenterToast = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.center,\n      children: (\n        \u003cView\u003e\n          \u003cText style={{ color: \"yellow\" }}\u003eUnalbe to download now\u003c/Text\u003e\n        \u003c/View\u003e\n      )\n    });\n  };\n\n  _showBottomToast = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.bottom,\n      children: \"Unalbe to upload now\"\n    });\n  };\n\n  _showFastToast = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.center,\n      duration: 255,\n      children: \"Unable to connect to apple store\"\n    });\n  };\n\n  _showFastToastAndAnimatedHide = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.center,\n      duration: 255,\n      children: \"Unable to connect to google store\",\n      animationEnd: () =\u003e {\n        this._toast._toastAnimationToggle = this.setTimeout(() =\u003e {\n          this._toast.hide({\n            duration: 0,\n            animationEnd: () =\u003e {\n              //do sth...\n            }\n          });\n        }, 3000);\n      }\n    });\n  };\n\n  _showImmediateToast = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.center,\n      duration: 0,\n      children: \"Unable to connect to wifi\"\n    });\n  };\n  _showImmediateToastAndAnimatedHide = () =\u003e {\n    this._toast.show({\n      position: Toast.constants.gravity.center,\n      duration: 0,\n      children: \"Unable to connect to wlan\",\n      animationEnd: () =\u003e {\n        this._toast._toastAnimationToggle = this.setTimeout(() =\u003e {\n          this._toast.hide({\n            animationEnd: () =\u003e {\n              //do sth...\n            }\n          });\n        }, 3000);\n      }\n    });\n  };\n}\n\nexport default TimerEnhance(LoadingToast);\n```\n\n## Props\n\n| Prop             | Type   | Optional | Default          | Description                                                                                           |\n| ---------------- | ------ | -------- | ---------------- | ----------------------------------------------------------------------------------------------------- |\n| style            | style  | Yes      |                  | see [react-native documents][3]                                                                       |\n| textStyle        | style  | Yes      |                  | see [react-native documents][4]                                                                       |\n| spacing          | number | Yes      | 30               | determine the top or bottom spacing when the position is on the top or bottom                         |\n| position         | style  | Yes      | constants.bottom | determine the position of toast                                                                       |\n| duration         | number | Yes      | 3000             | determine the residence duration after toast is shown                                                 |\n| animatedDuration | number | Yes      | 510              | determine the duration of toast animation                                                             |\n| delay            | number | Yes      | 0                | determine the delay of toast animation                                                                |\n| marginTop        | number | Yes      | 0                | determine the marginTop of the root container view, it is used when toast's position is constants.top |\n\n## Method\n\n- show({children, position, duration, easing, delay, animationEnd,})\n\n  - children: determine the children of toast\n  - position: determine the position of toast. enum(gravity.bottom, gravity.top, gravity.center)\n  - duration: determine the duration of animation\n  - easing: determine the easing of animation\n  - delay: determine the delay of animation\n  - animationEnd: determine the callback when animation is end\n\n- hide({duration, easing, delay, animationEnd,})\n\n  - duration: determine the duration of animation\n  - easing: determine the easing of animation\n  - delay: determine the delay of animation\n  - animationEnd: determine the callback when animation is end\n\n[0]: https://github.com/cyqresig/ReactNativeComponentDemos\n[1]: http://cyqresig.github.io/img/react-native-smart-toast-preview-ios-v1.0.0.gif\n[2]: http://cyqresig.github.io/img/react-native-smart-toast-preview-android-v1.0.0.gif\n[3]: https://facebook.github.io/react-native/docs/style.html\n[4]: http://facebook.github.io/react-native/docs/text.html#style\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoveluy%2Frn-toaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoveluy%2Frn-toaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoveluy%2Frn-toaster/lists"}