Fix network image sources; Fix style with network image src; Add props to network height and width; Update example to include network images

Author: testshallpass

README.md

@@ -10,10 +10,8 @@
 A super simple react-native implementation of the classic UIStepper from iOS. Check out the props below for customization.
 
 ### Installation
-```
-npm i react-native-simple-stepper --save
+```npm i react-native-simple-stepper --save```
 
-```
 ### Usage
 ```javascript
 import SimpleStepper from 'react-native-simple-stepper'
@@ -24,7 +22,7 @@ render() {
   )
 }
 valueChanged(value) {
-  // Update UI ...
+  // ...
 }
 //...
 ```
@@ -50,3 +48,5 @@ valueChanged(value) {
 | ```decrementImage``` | String or Number  | network or local image | require('./assets/decrement.png')
 | ```tintOnIncrementImage``` | Boolean  | whether or not you want tintColor applied to increment image | true
 | ```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

@@ -14,6 +14,8 @@ export default class SimpleStepper extends Component {
     valueChanged: PropTypes.func,
     tintOnIncrementImage: PropTypes.bool,
     tintOnDecrementImage: PropTypes.bool,
+    imageHeight: PropTypes.number,
+    imageWidth: PropTypes.number,
     incrementImage: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number
@@ -36,7 +38,9 @@ export default class SimpleStepper extends Component {
     incrementImage: require('./assets/increment.png'),
     tintOnIncrementImage: true,
     tintOnDecrementImage: true,
-    padding: 4
+    padding: 4,
+    imageHeight: 36,
+    imageWidth: 36
   }
   constructor(props) {
     super(props)
@@ -100,22 +104,38 @@ export default class SimpleStepper extends Component {
       this.props.valueChanged(value)
     }
   }
-  render() {
-    var tintIncrementStyle
-    var tintDecrementStyle
-    if (this.props.tintOnIncrementImage) {
-      tintIncrementStyle = {tintColor: this.props.tintColor}
+  tintStyle(status) {
+    if (status) {
+      return {tintColor: this.props.tintColor}
+    }
+    return null
+  }
+  imageSrc(src) {
+    if (typeof src == 'string') {
+      return {'uri': src}
     }
-    if (this.props.tintOnDecrementImage) {
-      tintDecrementStyle = {tintColor: this.props.tintColor}
+    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>
       </View>
     )
@@ -128,7 +148,8 @@ var styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 1,
     borderRadius: 3,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    alignItems: 'center'
   },
   leftButton: {
     alignItems: 'center'

example/Main.js

@@ -14,26 +14,34 @@ export default class Main extends Component {
     this.state = {
       blue: 0,
       peru: 0,
-      red: 0
+      red: 0,
+      purple: 0
     }
-    this.valueChangedBlue = this.valueChangedBlue.bind(this)
-    this.valueChangedPeru = this.valueChangedPeru.bind(this)
-    this.valueChangedRed = this.valueChangedRed.bind(this)
   }
   render() {
     return (
       <ScrollView contentContainerStyle={styles.container}>
         <Text style={[styles.text, {fontSize: 22}]}>{'Simple Stepper'}</Text>
         <View style={{flexDirection: 'column', alignItems: 'center'}}>
           <Text style={[styles.text, {fontSize: 32, color: 'blue'}]}>{this.state.blue}</Text>
-          <SimpleStepper valueChanged={this.valueChangedBlue} />
-          <Text style={styles.text}> {'\n'}{'min 0, max 10, initialValue is 0 and stepValue is 1'}{'\n'} </Text>
+          <SimpleStepper valueChanged={(value) => this.valueChangedBlue(value)} />
+          <Text style={styles.text}>{'min 0, max 10, initialValue is 0 and stepValue is 1'}{'\n'} </Text>
           <Text style={[styles.text, {fontSize: 32, color: 'peru'}]}>{this.state.peru}</Text>
-          <SimpleStepper valueChanged={this.valueChangedPeru} tintColor={'peru'} maximumValue={15} initialValue={.99} stepValue={.99}/>
-          <Text style={styles.text}> {'\n'}{'min is 0, max is 15, initialValue is .99 and stepValue is .99'}{'\n'} </Text>
+          <SimpleStepper valueChanged={(value) => this.valueChangedPeru(value)} tintColor={'peru'} maximumValue={15} initialValue={.99} stepValue={.99}/>
+          <Text style={styles.text}>{'min is 0, max is 15, initialValue is .99 and stepValue is .99'}{'\n'} </Text>
           <Text style={[styles.text, {fontSize: 32, color: '#cc3232'}]}>{this.state.red}</Text>
-          <SimpleStepper valueChanged={this.valueChangedRed} tintColor={'#cc3232'} minimumValue={-100} maximumValue={100} initialValue={50} stepValue={25} />
-          <Text style={styles.text}> {'\n'}{'min is -100, max is 100, initialValue is 50 and stepValue is 25'}{'\n'} </Text>
+          <SimpleStepper valueChanged={(value) => this.valueChangedRed(value)} tintColor={'#cc3232'} minimumValue={-100} maximumValue={100} initialValue={50} stepValue={25} />
+          <Text style={styles.text}>{'min is -100, max is 100, initialValue is 50 and stepValue is 25'}{'\n'} </Text>
+          <Text style={[styles.text, {fontSize: 32, color: 'purple'}]}>{this.state.purple}</Text>
+          <SimpleStepper
+            tintColor={'purple'}
+            valueChanged={(value) => this.valueChangedPurple(value)}
+            tintOnIncrementImage={false}
+            tintOnDecrementImage={false}
+            incrementImage={'https://facebook.github.io/react/img/logo_og.png'}
+            decrementImage={'https://facebook.github.io/react/img/logo_og.png'}
+           />
+           <Text style={styles.text}>{'min 0, max 10, initialValue is 0 and stepValue is 1'}{'\n'} </Text>
         </View>
       </ScrollView>
     );
@@ -53,6 +61,11 @@ export default class Main extends Component {
       red: value
     })
   }
+  valueChangedPurple(value) {
+    this.setState({
+      purple: value
+    })
+  }
 }
 
 const styles = StyleSheet.create({