├── .DS_Store
├── .gitattributes
├── .gitignore
├── LICENCE
├── README.md
├── index.js
├── lib
    ├── Notification.js
    └── NotificationComponent.js
├── media
    └── giphy.gif
├── package.json
└── yarn.lock


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ronal2do/react-native-lazy-toast/740e41250f06588b673e7411fd9c510a5f493f37/.DS_Store


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ronal2do/react-native-lazy-toast/740e41250f06588b673e7411fd9c510a5f493f37/.gitattributes


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | 
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 | 
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 | 
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 | 
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Ronaldo Lima
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Native Lazy Toast
 2 | 
 3 |    ![Example](/media/giphy.gif)
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```sh
 9 | yarn add react-native-lazy-toast
10 | ```
11 | 
12 | ## Usage
13 | 
14 | ```jsx
15 | import { withNotification } from 'react-native-lazy-toast';
16 | 
17 | // ...
18 | import React from 'react';
19 | import { Button } from 'react-native';
20 | import { withNotification } from 'react-native-lazy-toast';
21 | 
22 | const Action = () => console.log('action')
23 | 
24 | const App = ({ notify }) => 
25 |     <Button
26 |       onPress={ () => notify() }
27 |       title="Join with HOC"
28 |       color="#841584"
29 |       accessibilityLabel="Learn more about this purple button"
30 |     />
31 | 
32 | export default withNotification({ 
33 |   title: 'Are you sure about that? ', 
34 |   message: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut`,
35 |   action: Action,
36 |  })(App);
37 | // ...
38 | ```
39 | Our you can use as a component
40 | ```jsx
41 | import { Notification } from 'react-native-lazy-toast';
42 | 
43 | // ...
44 |   render() {
45 |     return (
46 |      
47 |         <Button
48 |             onPress={ () => this.child.showNotify() } // here you can call showNotify with ref
49 |             title="Join component"
50 |             color="#841584"
51 |             accessibilityLabel="Learn more about this purple button"
52 |         />
53 | 
54 |         <Notification 
55 |             ref={ el =>  this.child = el }
56 |             title={'Are you sure about that? '}
57 |             action={() => { console.log('action props') }}
58 |             message={`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut` }  
59 |         />
60 |     )
61 |   }
62 | // ...
63 | ```
64 | 
65 | ## Props
66 | 
67 | ##### `title` (string)
68 | The title of toast
69 | 
70 | ##### `action` (function)
71 | A function for `Accept` button.
72 | 
73 | ##### `message` (string)
74 | The message to appear below the title
75 | 
76 | ##### `color` (string)
77 | The color of the `Accept` button.
78 | 
79 | ## Next features
80 | 
81 | - Add carousel for toast like steps
82 | - 3 sizes
83 | - Custom buttons
84 | - Pass styles for childrens
85 | - Toast auto-hide, without action buttons
86 | 
87 | ## Credits
88 | Inspired by https://github.com/kiok46/ReactNative-Challenge-6
89 | 
90 | ## License
91 | 
92 | MIT © [Ronaldo Lima](http://github.com/ronal2do)
93 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import { withNotification } from './lib/Notification';
2 | import Notification from './lib/NotificationComponent';
3 | 
4 | export {
5 |   withNotification,
6 |   Notification
7 | }


--------------------------------------------------------------------------------
/lib/Notification.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent, Fragment } from 'react';
 2 | import NotificationComponent from './NotificationComponent'
 3 | 
 4 | export const withNotification = ({ title, message, action, color }) => {
 5 |   return Component => {
 6 |     return class extends PureComponent {
 7 |       render() {
 8 |         return (
 9 |           <Fragment>
10 |             <Component notify={ () => this.child.showNotify() } {...this.props} />
11 |             <NotificationComponent
12 |               ref={ el =>  this.child = el }
13 |               title={title}
14 |               action={action}
15 |               message={message}       
16 |               color={color}       
17 |             />
18 |           </Fragment>
19 |         );
20 |       }
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/lib/NotificationComponent.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import {
  4 |     StyleSheet,
  5 |     Text,
  6 |     View,
  7 |     Image,
  8 |     TouchableOpacity,
  9 |     Animated,
 10 |     Dimensions,
 11 |     Button
 12 | } from 'react-native';
 13 | const { width } = Dimensions.get('window')
 14 | 
 15 | class Notification extends PureComponent {
 16 |   static propTypes = {
 17 |     title: PropTypes.string, 
 18 |     message: PropTypes.string, 
 19 |     action: PropTypes.func,
 20 |     color: PropTypes.string
 21 |   }
 22 | 
 23 |   static defaultProps = {
 24 |     color: '#841584',
 25 |     title: '',
 26 |     message: '',
 27 |     action: () => {},
 28 |   };
 29 | 
 30 |   state={
 31 |     show: false,
 32 |     animation: new Animated.Value(0)
 33 |   }
 34 | 
 35 |   showNotify = () => {
 36 |     const toValue = this.state.show ? 0 : 1
 37 |     Animated.spring(this.state.animation, {
 38 |       toValue,
 39 |       tension: 50,
 40 |     },{
 41 |       nativeDriver: true
 42 |     }).start(() => this.setState({
 43 |       show: !this.state.show
 44 |     }))
 45 |   }
 46 | 
 47 |   acceptAction = async () => {
 48 |     await this.props.action()
 49 |     this.showNotify()
 50 |   }
 51 | 
 52 |   render() {
 53 |     const _translateY = this.state.animation.interpolate({
 54 |         inputRange: [0, .8, 1],
 55 |         outputRange: [width + 100, 100, 0]
 56 |     })
 57 |     const textY = this.state.animation.interpolate({
 58 |       inputRange: [ 0, .6, 1 ],
 59 |       outputRange: [ 0, 100, 0]
 60 |     })
 61 |     const animationStyle = { transform: [{ translateY: _translateY }] }
 62 |     const animatedText = { transform: [{ translateY: textY }] }
 63 |     const _opacity = this.state.animation.interpolate({
 64 |         inputRange: [0, 1],
 65 |         outputRange: [0, .8]
 66 |     })
 67 |     const bgStyle = {  opacity: _opacity }
 68 |     const { show } = this.state;
 69 |     const { title, message, action, color='#841584' } = this.props;
 70 | 
 71 |     return (
 72 |       <View
 73 |           style={StyleSheet.absoluteFill}
 74 |           pointerEvents={show ? 'auto' : 'none'}
 75 |       >
 76 |         <Animated.View style={[styles.blur, bgStyle]}>
 77 |           <TouchableOpacity style={styles.touch} onPress={() => this.showNotify()}/>
 78 |         </Animated.View>
 79 |         <Animated.View style={[styles.toast, animationStyle]}>
 80 |           <Animated.View style={animatedText}>
 81 |               <Text style={styles.title}>
 82 |                   {title}
 83 |               </Text>
 84 |           </Animated.View>
 85 |           <Animated.View style={[styles.header, animatedText]}>
 86 |               <Text style={styles.headerStyle}>
 87 |                   {message}
 88 |               </Text>
 89 |           </Animated.View>
 90 |           <View style={styles.actionContainer}>
 91 |             <Button
 92 |               onPress={this.showNotify}
 93 |               title='Cancel'
 94 |               color='gray'
 95 |             />
 96 |             <Button
 97 |               onPress={this.acceptAction}
 98 |               title='Accept'
 99 |               color={color}
100 |             />
101 |           </View>
102 |         </Animated.View>
103 |       </View>
104 |     );
105 |   }
106 | }
107 | 
108 | const styles = StyleSheet.create({
109 |   touch: {
110 |     flex: 1 
111 |   },
112 |   actionContainer: {
113 |     flexDirection: 'row',
114 |     width,
115 |     justifyContent: 'space-around',
116 |   },
117 |   blur: {
118 |     flex: 2,
119 |     backgroundColor:  'rgba(0, 0, 0, .2)',
120 |   },
121 |   toast: {
122 |     flex: 2,
123 |     paddingTop: 30,
124 |     backgroundColor: 'white',
125 |     paddingBottom: 20,
126 |     alignItems: 'center',
127 |     justifyContent: 'space-around',
128 |   },
129 |   title: {
130 |     textAlign: 'center',
131 |     fontSize: 27,
132 |     color: 'rgb(70, 70, 70)',
133 |     fontWeight: '500'
134 |   },
135 |   header: {
136 |     paddingHorizontal: 35
137 |   },
138 |   headerStyle: {
139 |     textAlign: 'center',
140 |     fontSize: 18,
141 |     color: 'rgb(180, 180, 180)',
142 |     fontWeight: '500'
143 |   },
144 | });
145 | 
146 | export default Notification
147 | 


--------------------------------------------------------------------------------
/media/giphy.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ronal2do/react-native-lazy-toast/740e41250f06588b673e7411fd9c510a5f493f37/media/giphy.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-lazy-toast",
 3 |   "version": "0.0.2",
 4 |   "description": "Easy toast with PureJS for react-native without dependencies",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/ronal2do/react-native-lazy-toast.git"
12 |   },
13 |   "keywords": [
14 |     "React-Native",
15 |     "Toast",
16 |     "Alert"
17 |   ],
18 |   "author": "Ronal2do",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/ronal2do/react-native-lazy-toast/issues"
22 |   },
23 |   "homepage": "https://github.com/ronal2do/react-native-lazy-toast#readme",
24 |   "dependencies": {
25 |     "prop-types": "^15.6.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | asap@~2.0.3:
 6 |   version "2.0.6"
 7 |   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
 8 | 
 9 | core-js@^1.0.0:
10 |   version "1.2.7"
11 |   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
12 | 
13 | encoding@^0.1.11:
14 |   version "0.1.12"
15 |   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
16 |   dependencies:
17 |     iconv-lite "~0.4.13"
18 | 
19 | fbjs@^0.8.16:
20 |   version "0.8.16"
21 |   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
22 |   dependencies:
23 |     core-js "^1.0.0"
24 |     isomorphic-fetch "^2.1.1"
25 |     loose-envify "^1.0.0"
26 |     object-assign "^4.1.0"
27 |     promise "^7.1.1"
28 |     setimmediate "^1.0.5"
29 |     ua-parser-js "^0.7.9"
30 | 
31 | iconv-lite@~0.4.13:
32 |   version "0.4.19"
33 |   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
34 | 
35 | is-stream@^1.0.1:
36 |   version "1.1.0"
37 |   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
38 | 
39 | isomorphic-fetch@^2.1.1:
40 |   version "2.2.1"
41 |   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
42 |   dependencies:
43 |     node-fetch "^1.0.1"
44 |     whatwg-fetch ">=0.10.0"
45 | 
46 | js-tokens@^3.0.0:
47 |   version "3.0.2"
48 |   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
49 | 
50 | loose-envify@^1.0.0, loose-envify@^1.3.1:
51 |   version "1.3.1"
52 |   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
53 |   dependencies:
54 |     js-tokens "^3.0.0"
55 | 
56 | node-fetch@^1.0.1:
57 |   version "1.7.3"
58 |   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
59 |   dependencies:
60 |     encoding "^0.1.11"
61 |     is-stream "^1.0.1"
62 | 
63 | object-assign@^4.1.0, object-assign@^4.1.1:
64 |   version "4.1.1"
65 |   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
66 | 
67 | promise@^7.1.1:
68 |   version "7.3.1"
69 |   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
70 |   dependencies:
71 |     asap "~2.0.3"
72 | 
73 | prop-types@^15.6.0:
74 |   version "15.6.0"
75 |   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
76 |   dependencies:
77 |     fbjs "^0.8.16"
78 |     loose-envify "^1.3.1"
79 |     object-assign "^4.1.1"
80 | 
81 | setimmediate@^1.0.5:
82 |   version "1.0.5"
83 |   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
84 | 
85 | ua-parser-js@^0.7.9:
86 |   version "0.7.17"
87 |   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
88 | 
89 | whatwg-fetch@>=0.10.0:
90 |   version "2.0.3"
91 |   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
92 | 


--------------------------------------------------------------------------------