|
| 1 | +# react-native-easy-toast |
| 2 | +A react native module to show toast like android, it works on iOS and Android. |
| 3 | + |
| 4 | + |
| 5 | +## Content |
| 6 | + |
| 7 | +- [Installation](#installation) |
| 8 | +- [Demo](#demo) |
| 9 | +- [Getting started](#getting-started) |
| 10 | +- [API](#api) |
| 11 | +- [Contribution](#contribution) |
| 12 | + |
| 13 | +## Installation |
| 14 | + |
| 15 | +* 1.Run `npm i react-native-easy-toast --save` |
| 16 | +* 2.`import Toast, {DURATION} from 'react-native-toast-easy'` |
| 17 | + |
| 18 | +## Demo |
| 19 | +* [Examples](https://github.com/crazycodeboy/react-native-easy-toast/tree/master/examples) |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +## Getting started |
| 24 | + |
| 25 | +Add `react-native-toast-easy` to your js file. |
| 26 | + |
| 27 | +`import Toast, {DURATION} from 'react-native-toast-easy'` |
| 28 | + |
| 29 | +Inside your component's render method, use Toast: |
| 30 | + |
| 31 | +```javascript |
| 32 | + render() { |
| 33 | + return ( |
| 34 | + <View style={styles.container}> |
| 35 | + ... |
| 36 | + <Toast ref="toast"/> |
| 37 | + </View> |
| 38 | + ); |
| 39 | + } |
| 40 | +``` |
| 41 | + |
| 42 | +>Note: Add it in the bottom of the root view. |
| 43 | +
|
| 44 | +Then you can use it like this: |
| 45 | + |
| 46 | +```javascript |
| 47 | + this.refs.toast.show('hello world!'); |
| 48 | +``` |
| 49 | + |
| 50 | +That's it, you're ready to go! |
| 51 | + |
| 52 | + |
| 53 | +### Basic usage |
| 54 | + |
| 55 | +```javascript |
| 56 | +render() { |
| 57 | + return ( |
| 58 | + <View style={styles.container}> |
| 59 | + <TouchableHighlight |
| 60 | + style={{padding: 10}} |
| 61 | + onPress={()=>{ |
| 62 | + this.refs.toast.show('hello world!'); |
| 63 | + }}> |
| 64 | + <Text>Press me</Text> |
| 65 | + </TouchableHighlight> |
| 66 | + <Toast ref="toast"/> |
| 67 | + </View> |
| 68 | + ); |
| 69 | + } |
| 70 | +``` |
| 71 | + |
| 72 | +### Custom Toast |
| 73 | + |
| 74 | +```javascript |
| 75 | +render() { |
| 76 | + return ( |
| 77 | + <View style={styles.container}> |
| 78 | + <TouchableHighlight |
| 79 | + style={{padding: 10}} |
| 80 | + onPress={()=>{ |
| 81 | + this.refs.toast.show('hello world!',DURATION.LENGTH_LONG); |
| 82 | + }}> |
| 83 | + <Text>Press me</Text> |
| 84 | + </TouchableHighlight> |
| 85 | + <Toast |
| 86 | + ref="toast" |
| 87 | + style={{backgroundColor:'red'}} |
| 88 | + position='top' |
| 89 | + /> |
| 90 | + </View> |
| 91 | + ); |
| 92 | + } |
| 93 | +``` |
| 94 | + |
| 95 | +**More Usage:** |
| 96 | + |
| 97 | +[GitHubPopular](https://github.com/crazycodeboy/GitHubPopular/blob/develop/js/page/SearchPage.js) |
| 98 | + |
| 99 | + |
| 100 | + |
| 101 | +## API |
| 102 | + |
| 103 | + |
| 104 | +Props | Type | Optional | Default | Description |
| 105 | +----------------- | -------- | -------- | ----------- | ----------- |
| 106 | +style | View.propTypes.style | true | {backgroundColor: 'black',opacity: OPACITY,borderRadius: 5,padding: 10,} | Custom style toast |
| 107 | +position | PropTypes.oneOf(['top','center','bottom',]) |true | 'bottom' | Custom toast position |
| 108 | + |
| 109 | + |
| 110 | + |
| 111 | +Method | Type | Optional | Description |
| 112 | +----------------- | -------- | -------- | ----------- | ----------- |
| 113 | +show(text, duration) | function | false | show a toast |
| 114 | +close() | function | true | Close toast early |
| 115 | + |
| 116 | + |
| 117 | +## Contribution |
| 118 | + |
| 119 | +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. |
| 120 | + |
| 121 | +Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first. |
| 122 | + |
| 123 | +--- |
| 124 | + |
| 125 | +**MIT Licensed** |
0 commit comments