{"_id":"23mofang-react-native-root-toast","_rev":"2-d6e6671859274249085edfd77769ee06","name":"23mofang-react-native-root-toast","description":"react native toast like component, pure javascript solution","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"version":"1.0.1","name":"23mofang-react-native-root-toast","description":"react native toast like component, pure javascript solution","repository":{"type":"git","url":"git+https://github.com/magicismight/react-native-root-toast.git"},"license":"MIT","main":"./index.js","keywords":["react-component","react-native","ios","android","image","video","focus"],"dependencies":{"react-native-root-siblings":"1.2.1","prop-types":"^15.5.10"},"bugs":{"url":"https://github.com/magicismight/react-native-root-toast/issues"},"homepage":"https://github.com/magicismight/react-native-root-toast#readme","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","gitHead":"9d0daef9e8f23e7c45e04817cb0bd632c15c7f83","_id":"23mofang-react-native-root-toast@1.0.1","_shasum":"6b526b4c43a8e577aba6cc27f9a6c7930609f812","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.2","_npmUser":{"name":"23mf","email":"1008@23mofang.com"},"dist":{"shasum":"6b526b4c43a8e577aba6cc27f9a6c7930609f812","tarball":"https://registry.npmjs.org/23mofang-react-native-root-toast/-/23mofang-react-native-root-toast-1.0.1.tgz","integrity":"sha512-nOZHuCnsPYAnbcSHrneiBKNWcFR1N4dpw4w1nB1hITNOKkxoX6WpxP8W1m8d7/V1+V8wwLvQwpzoTKZ2vlPbHw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZh/HZGKsK+bYhP9yARgX/kR3htxfjLmj6cupGtgFtogIhAM/v5B4KczACVa4NjfS7wJcZNbNDA3z72lwejXlvFfAt"}]},"maintainers":[{"name":"23mf","email":"1008@23mofang.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/23mofang-react-native-root-toast-1.0.1.tgz_1511173077387_0.251712248660624"}}},"readme":"### react-native-root-toast\n\n-----------------------\n\n#### Features\n1. Pure javascript solution.\n2. Support both Android and iOS.\n3. Lots of custom options for Toast.\n4. You can show/hide Toast by calling api or using Component inside render.\n\n\n\n### Install\n\n`npm install react-native-root-toast`\n\n\n### Settings\n\nName | Default | Type | Description\n--------------------|--------------------------|----------|---------------------------\nduration | Toast.durations.SHORT | Number | The duration of the toast. (Only for api calling method)\nvisible | false | Bool | The visibility of toast. (Only for Toast Component)\nposition | Toast.positions.BOTTOM | Number | The position of toast showing on screen (A negative number represents the distance from the bottom of screen. A positive number represents the distance form the top of screen. `0` will position the toast to the middle of screen.)\nanimation | true | Bool | Should preform an animation on toast appearing or disappearing.\nshadow | true | Bool | Should drop shadow around Toast element.\nbackgroundColor | null | String | The background color of the toast.\nshadowColor | null | String | The shadow color of the toast.\ntextColor | null | String | The text color of the toast.\ndelay | 0 | Number | The delay duration before toast start appearing on screen.\nhideOnPress | true | Bool | Should hide toast that appears by pressing on the toast.\nonShow | null | Function | Callback for toast\\`s appear animation start\nonShown | null | Function | Callback for toast\\`s appear animation end\nonHide | null | Function | Callback for toast\\`s hide animation start\nonHidden | null | Function | Callback for toast\\`s hide animation end\n\n\n### Properties\n\n##### Toast.durations\n\npresets of duration of the toast.\n\n1. Toast.durations.SHORT (equals to *2000*)\n\n2. Toast.durations.LONG (equals to *3500*)\n\n##### Toast.positions\n\npresets of position of toast.\n\n1. Toast.positions.TOP (equals to *20*)\n\n2. Toast.positions.BOTTOM (equals to *-20*)\n\n3. Toast.positions.CENTER (equals to *0*)\n\n### Usage\n\nThere are two different ways to manage a Toast.\n\n##### **Calling api**\n\n```\nimport Toast from 'react-native-root-toast';\n\n\n// Add a Toast on screen.\nlet toast = Toast.show('This is a message', {\n duration: Toast.durations.LONG,\n position: Toast.positions.BOTTOM,\n shadow: true,\n animation: true,\n hideOnPress: true,\n delay: 0,\n onShow: () => {\n // calls on toast\\`s appear animation start\n },\n onShown: () => {\n // calls on toast\\`s appear animation end.\n },\n onHide: () => {\n // calls on toast\\`s hide animation start.\n },\n onHidden: () => {\n // calls on toast\\`s hide animation end.\n }\n});\n\n// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.\nsetTimeout(function () {\n Toast.hide(toast);\n}, 500);\n\n```\n\n##### **Using a Component**\n\n**NOTE:**\nShowing a toast by using a Component inside render, The toast will be automatically disappeared when the `` is unmounted.\n\n```\nimport React, {Component} from 'react-native';\nimport Toast from 'react-native-root-toast';\n\nclass Example extends Component{\n constructor() {\n super(...arguments);\n this.state = {\n visible: false\n };\n }\n\n componentDidMount() {\n setTimeout(() => this.setState({\n visible: true\n }), 2000); // show toast after 2s\n\n setTimeout(() => this.setState({\n visible: false\n }), 5000); // hide toast after 5s\n };\n\n render() {\n return This is a message;\n }\n}\n\n```\n\n### Run example:\n\n```\ncd ./Example\nnpm install\n```\n","maintainers":[{"name":"23mf","email":"1008@23mofang.com"}],"time":{"modified":"2022-06-12T14:06:42.452Z","created":"2017-11-20T10:17:58.134Z","1.0.1":"2017-11-20T10:17:58.134Z"},"homepage":"https://github.com/magicismight/react-native-root-toast#readme","keywords":["react-component","react-native","ios","android","image","video","focus"],"repository":{"type":"git","url":"git+https://github.com/magicismight/react-native-root-toast.git"},"bugs":{"url":"https://github.com/magicismight/react-native-root-toast/issues"},"license":"MIT","readmeFilename":"README.md"}