v0.1.3 #1

Author: SFantasy

.npmignore

@@ -0,0 +1,5 @@
+example/
+npm-debug.log
+node_modules
+.DS_Store
+.idea

README.md

@@ -16,14 +16,20 @@ npm install rn-spinner --save
 var Spinner = require('rn-spinner');
 
 // Use
-<Spinner max={10} min={2} onNumChange={(num)=>{console.log(num)}}
+<Spinner max={10}
+         min={2}
+         default={5}
+         color="#f60"
+         onNumChange={(num)=>{console.log(num)}}
 ```
 
 ## Props
 
 - max
 - min
+- default: default number of the Spinner
 - onNumChange: get the number of the Spinner
+- color: custom color of the Spinner
 
 ## Screenshot
 

example.png

@@ -6,15 +6,32 @@ var styles = require('./style');
 var {
   View,
   Text,
-  TouchableOpacity
+  TouchableOpacity,
+  PropTypes
 } = React;
 
 var Spinner = React.createClass({
+  propTypes: {
+    min: PropTypes.number,
+    max: PropTypes.number,
+    default: PropTypes.number,
+    color: PropTypes.string
+  },
+
+  getDefaultProps () {
+    return {
+      min: 0,
+      max: 99,
+      default: 0,
+      color: '#33c9d6'
+    }
+  },
+
   getInitialState () {
     return {
-      min: this.props.min || 0,
-      max: this.props.max || 99,
-      num: this.props.default || 0
+      min: this.props.min,
+      max: this.props.max,
+      num: this.props.default
     }
   },
 
@@ -46,14 +63,14 @@ var Spinner = React.createClass({
 
   render () {
     return (
-      <View style={styles.container}>
-        <TouchableOpacity style={styles.btn} onPress={this._decrease}>
+      <View style={[styles.container, {borderColor:this.props.color}]}>
+        <TouchableOpacity style={[styles.btn, {backgroundColor:this.props.color}]} onPress={this._decrease}>
           <Text style={styles.btnText}>-</Text>
         </TouchableOpacity>
         <View style={styles.num}>
           <Text style={styles.numText}>{this.state.num}</Text>
         </View>
-        <TouchableOpacity style={styles.btn} onPress={this._increase}>
+        <TouchableOpacity style={[styles.btn, {backgroundColor:this.props.color}]} onPress={this._increase}>
           <Text style={styles.btnText}>+</Text>
         </TouchableOpacity>
       </View>

index.js

@@ -1,6 +1,6 @@
 {
   "name": "rn-spinner",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Number spinner for react-native",
   "keywords": ["react-native", "spinner", "react-component"],
   "author": {

package.json

@@ -2,16 +2,15 @@ var React = require('react-native');
 
 module.exports = React.StyleSheet.create({
   container: {
-    borderColor:'#33c9d6',
     borderWidth:1,
     borderRadius:4,
+    width: 90,
     flexDirection:'row'
   },
 
   btn: {
     paddingVertical:5,
-    paddingHorizontal:10,
-    backgroundColor:'#33c9d6'
+    paddingHorizontal:10
   },
 
   btnText: {