Merge pull request #5 from Smiche/master

additional features

Author: crazycodeboy

README.md

@@ -87,6 +87,7 @@ render() {
                     ref="toast"
                     style={{backgroundColor:'red'}}
                     position='top'
+                    textStyle={{color:'red'}}
                 />
             </View>
         );
@@ -106,13 +107,13 @@ 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
-
+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() |  function  | true  |  Close toast early    
+close(instantly) |  function  | true  |  pass true to close instantly, empty or false to start the close timer    
 
 
 ## Contribution

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
+}