Merge pull request #7 from djock/master

Props for fadeIn and fadeOut; Set fadeIn effect for show()

Author: crazycodeboy

README.md

@@ -94,6 +94,10 @@ render() {
                     ref="toast"
                     style={{backgroundColor:'red'}}
                     position='top'
+                    positionValue={200}
+                    fadeInDuration={750}
+                    fadeOutDuration={1000}
+                    opacity={0.8}
                     textStyle={{color:'red'}}
                 />
             </View>
@@ -114,13 +118,17 @@ Props              | Type     | Optional | Default     | Description
 ----------------- | -------- | -------- | ----------- | -----------
 style  | View.propTypes.style  | true | {backgroundColor: 'black',opacity: OPACITY,borderRadius: 5,padding: 10,}  |   Custom style toast
 position |  PropTypes.oneOf(['top','center','bottom',]) |true | 'bottom'  | Custom toast position
+positionValue  | React.PropTypes.number  | true | 120  |   Custom toast position value
+fadeInDuration  | React.PropTypes.number  | true | 500  |   Custom toast show duration
+fadeOutDuration  | React.PropTypes.number  | true | 500  |   Custom toast close duration
+opacity  | React.PropTypes.number  | true | 1  |   Custom toast opacity
 textStyle  | View.propTypes.style  | true | {color:'white'}  |   Custom style text
 
 
 Method            | Type     | Optional | Description
 ----------------- | -------- | -------- | ----------- | -----------
 show(text, duration)   | function | false | show a toast,unit is millisecond
-close(instantly) |  function  | true  |  pass true to close instantly, empty or false to start the close timer    
+close() |  function  | -  |  start the close timer    
 
 
 ## Contribution

index.js

@@ -14,9 +14,8 @@ import {
     Dimensions,
     Text,
 } from 'react-native'
-export const DURATION = { LENGTH_LONG: 2000, LENGTH_SHORT: 1000 };
+export const DURATION = { LENGTH_LONG: 2000, LENGTH_SHORT: 500 };
 const {height, width} = Dimensions.get('window');
-const OPACITY = 0.6;
 
 export default class Toast extends Component {
 
@@ -25,65 +24,70 @@ export default class Toast extends Component {
         this.state = {
             isShow: false,
             text: '',
-            opacityValue: new Animated.Value(OPACITY),
+            opacityValue: new Animated.Value(this.props.opacity),
         }
     }
     show(text, duration) {
         this.duration = duration || DURATION.LENGTH_SHORT;
+
         this.setState({
             isShow: true,
             text: text,
         });
-        this.isShow = true;
-        this.state.opacityValue.setValue(OPACITY)
-        this.close();
-    }
 
-    close(instant) {
-        var animationDuration = 500, closeDuration = this.duration;
-        if (instant == true) {
-            animationDuration = 0;
-            closeDuration = 0;
-        }
+        Animated.timing(
+            this.state.opacityValue,
+            {
+                toValue: this.props.opacity,
+                duration: this.props.fadeInDuration,
+            }
+        ).start(() => {
+            this.isShow = true;
+            this.close();
+        });
+    }
 
+    close() {
+        let delay = this.duration;
+        
         if (!this.isShow) return;
         this.timer && clearTimeout(this.timer);
         this.timer = setTimeout(() => {
             Animated.timing(
                 this.state.opacityValue,
                 {
                     toValue: 0.0,
-                    duration: animationDuration,
+                    duration: this.props.fadeOutDuration,
                 }
             ).start(() => {
                 this.setState({
                     isShow: false,
                 });
                 this.isShow = false;
             });
-        }, closeDuration);
+        }, delay);
     }
 
     componentWillUnmount() {
         this.timer && clearTimeout(this.timer);
     }
 
     render() {
-        let top;
+        let pos;
         switch (this.props.position) {
             case 'top':
-                top = 120;
+                pos = this.props.positionValue;
                 break;
             case 'center':
-                top = height / 2;
+                pos = height / 2;
                 break;
             case 'bottom':
-                top = height - 160;
+                pos = height - this.props.positionValue;
                 break;
         }
         let view = this.state.isShow ?
             <View
-                style={[styles.container, { top: top }]}
+                style={[styles.container, { top: pos }]}
                 pointerEvents="none"
                 >
                 <Animated.View
@@ -105,7 +109,6 @@ const styles = StyleSheet.create({
     },
     content: {
         backgroundColor: 'black',
-        opacity: OPACITY,
         borderRadius: 5,
         padding: 10,
     },
@@ -121,10 +124,18 @@ Toast.propTypes = {
         'center',
         'bottom',
     ]),
-    textStyle: Text.propTypes.style
+    textStyle: Text.propTypes.style,
+    positionValue: React.PropTypes.number,
+    fadeInDuration: React.PropTypes.number,
+    fadeOutDuration: React.PropTypes.number,
+    opacity: React.PropTypes.number
 }
 
 Toast.defaultProps = {
     position: 'bottom',
-    textStyle: styles.text
+    textStyle: styles.text,
+    positionValue: 120,
+    fadeInDuration: 500,
+    fadeOutDuration: 500,
+    opacity: 1
 }