react-native-simple-stepper - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

package.json

 {
   "name": "react-native-simple-stepper",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A super simple react-native implementation of the classic UIStepper from iOS.",
@@ -5,0 +5,0 @@ "main": "SimpleStepper.js",

README.md

@@ -13,6 +13,4 @@ ## react-native-simple-stepper
 ### Installation
-```
-npm i react-native-simple-stepper --save
+```npm i react-native-simple-stepper --save```
 
-```
 ### Usage
@@ -28,3 +26,3 @@ ```javascript
 valueChanged(value) {
-  // Update UI ...
+  // ...
 }
@@ -55,1 +53,3 @@ //...
 | ```tintOnDecrementImage``` | Boolean  | whether or not you want tintColor applied to decrement image | true
+| ```imageHeight``` | Number  | network image height | 36
+| ```imageWidth``` | Number  | network image width | 36

SimpleStepper.js

@@ -17,2 +17,4 @@ import React, {Component, PropTypes} from 'react'
     tintOnDecrementImage: PropTypes.bool,
+    imageHeight: PropTypes.number,
+    imageWidth: PropTypes.number,
     incrementImage: PropTypes.oneOfType([
@@ -40,3 +42,5 @@ PropTypes.string,
     tintOnDecrementImage: true,
-    padding: 4
+    padding: 4,
+    imageHeight: 36,
+    imageWidth: 36
   }
@@ -105,18 +109,34 @@ constructor(props) {
   }
-  render() {
-    var tintIncrementStyle
-    var tintDecrementStyle
-    if (this.props.tintOnIncrementImage) {
-      tintIncrementStyle = {tintColor: this.props.tintColor}
+  tintStyle(status) {
+    if (status) {
+      return {tintColor: this.props.tintColor}
     }
-    if (this.props.tintOnDecrementImage) {
-      tintDecrementStyle = {tintColor: this.props.tintColor}
+    return null
+  }
+  imageSrc(src) {
+    if (typeof src == 'string') {
+      return {'uri': src}
     }
+    return src
+  }
+  imageStyle(src) {
+    if (typeof src == 'string') {
+      return {width: this.props.imageWidth, height: this.props.imageHeight}
+    }
+    return null
+  }
+  render() {
+    var tintIncrementStyle = this.tintStyle(this.props.tintOnIncrementImage)
+    var tintDecrementStyle = this.tintStyle(this.props.tintOnDecrementImage)
+    var decrementImageSrc = this.imageSrc(this.props.decrementImage)
+    var incrementImageSrc = this.imageSrc(this.props.incrementImage)
+    var incrementStyle = this.imageStyle(this.props.incrementImage)
+    var decrementStyle = this.imageStyle(this.props.decrementImage)
     return (
       <View style={[styles.container, {backgroundColor: this.props.backgroundColor, borderColor: this.props.tintColor}]}>
         <TouchableHighlight style={[styles.leftButton, {opacity: this.state.decrementOpacity, borderColor: this.props.tintColor, padding: this.props.padding}]} underlayColor={this.props.underlayColor} onPress={this.decrementAction} disabled={this.state.hasReachedMin}>
-          <Image style={tintDecrementStyle} source={this.props.decrementImage} resizeMode="contain" />
+          <Image style={[decrementStyle, tintDecrementStyle]} source={decrementImageSrc} />
         </TouchableHighlight>
         <TouchableHighlight style={[styles.rightButton, {opacity: this.state.incrementOpacity, borderColor: this.props.tintColor, padding: this.props.padding}]} underlayColor={this.props.underlayColor} onPress={this.incrementAction} disabled={this.state.hasReachedMax}>
-          <Image style={tintIncrementStyle} source={this.props.incrementImage} resizeMode="contain" />
+          <Image style={[incrementStyle, tintIncrementStyle]} source={incrementImageSrc}  />
         </TouchableHighlight>
@@ -134,3 +154,4 @@ </View>
     borderRadius: 3,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    alignItems: 'center'
   },
@@ -137,0 +158,0 @@ leftButton: {

No alert changes

Improved metrics

Total package byte prevSize

10307

increased by7.77%

Lines of code

162

increased by14.89%

No dependency changes