additional features

Adding support for text style, ability to close the toast instantly.

Author: Smiche

index.js

@@ -6,98 +6,96 @@
  * @flow
  */
 
-import React, {Component,PropTypes} from 'react';
+import React, {Component} from 'react';
 import {
     StyleSheet,
     View,
     Animated,
     Dimensions,
     Text,
 } from 'react-native'
-export const DURATION = {LENGTH_LONG: 2000, LENGTH_SHORT: 1000};
+export const DURATION = { LENGTH_LONG: 2000, LENGTH_SHORT: 1000 };
 const {height, width} = Dimensions.get('window');
-const OPACITY=0.6;
+const OPACITY = 0.6;
 
 export default class Toast extends Component {
-    static propTypes = {
-        style:View.propTypes.style,
-        position: PropTypes.oneOf([
-            'top',
-            'center',
-            'bottom',
-        ]),
-    }
-    static defaultProps = {
-        position:'bottom',
-    }
+
     constructor(props) {
         super(props);
         this.state = {
             isShow: false,
             text: '',
-            opacityValue:new Animated.Value(OPACITY),
+            opacityValue: new Animated.Value(OPACITY),
         }
     }
     show(text, duration) {
-        this.duration=duration||DURATION.LENGTH_SHORT;
+        this.duration = duration || DURATION.LENGTH_SHORT;
         this.setState({
             isShow: true,
             text: text,
         });
-        this.isShow=true;
+        this.isShow = true;
         this.state.opacityValue.setValue(OPACITY)
         this.close();
     }
 
-    close() {
-        if(!this.isShow)return;
+    close(instant) {
+        var animationDuration = 500, closeDuration = this.duration;
+        if (instant == true) {
+            animationDuration = 0;
+            closeDuration = 0;
+        }
+
+        if (!this.isShow) return;
         this.timer && clearTimeout(this.timer);
         this.timer = setTimeout(() => {
             Animated.timing(
                 this.state.opacityValue,
                 {
                     toValue: 0.0,
-                    duration:500,
+                    duration: animationDuration,
                 }
-            ).start(()=>{
+            ).start(() => {
                 this.setState({
                     isShow: false,
                 });
-                this.isShow=false;
+                this.isShow = false;
             });
-        }, this.duration);
+        }, closeDuration);
     }
+
     componentWillUnmount() {
         this.timer && clearTimeout(this.timer);
     }
 
     render() {
         let top;
-        switch (this.props.position){
+        switch (this.props.position) {
             case 'top':
-                top=120;
+                top = 120;
                 break;
             case 'center':
-                top=height /2;
+                top = height / 2;
                 break;
             case 'bottom':
-                top=height - 160;
+                top = height - 160;
                 break;
         }
         let view = this.state.isShow ?
             <View
-                style={[styles.container,{top:top}]}
+                style={[styles.container, { top: top }]}
                 pointerEvents="none"
-            >
-                <Animated.View
-                    style={[styles.content,{opacity:this.state.opacityValue},this.props.style]}
                 >
-                    <Text style={styles.text}>{this.state.text}</Text>
+                <Animated.View
+                    style={[styles.content, { opacity: this.state.opacityValue }, this.props.style]}
+                    >
+                    <Text style={this.props.textStyle}>{this.state.text}</Text>
                 </Animated.View>
             </View> : null;
         return view;
     }
 }
+
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -111,7 +109,22 @@ const styles = StyleSheet.create({
         borderRadius: 5,
         padding: 10,
     },
-    text:{
-        color:'white'
-    },
-})
+    text: {
+        color: 'white'
+    }
+});
+
+Toast.propTypes = {
+    style: View.propTypes.style,
+    position: React.PropTypes.oneOf([
+        'top',
+        'center',
+        'bottom',
+    ]),
+    textStyle: Text.propTypes.style
+}
+
+Toast.defaultProps = {
+    position: 'bottom',
+    textStyle: styles.text
+}