Added props for custom icons inside plus-minus buttons

NumericInput/NumericInput.js

@@ -21,7 +21,7 @@ export default class NumericInput extends Component {
 
     // this.props refers to the new props
     componentDidUpdate() {
-        const initSent = !(this.props.initValue !== 0 && !this.props.initValue); 
+        const initSent = !(this.props.initValue !== 0 && !this.props.initValue);
 
         // compare the new value (props.initValue) with the existing/old one (this.state.value)
         if (this.props.initValue !== this.state.value && initSent) {
@@ -32,7 +32,7 @@ export default class NumericInput extends Component {
             });
         }
     }
-    
+
     updateBaseResolution = (width, height) => {
         calcSize = create({ width, height })
     }
@@ -231,13 +231,13 @@ export default class NumericInput extends Component {
         else return (
             <View style={inputContainerStyle}>
                 <Button onPress={this.dec} style={leftButtonStyle}>
-                    <Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
+                    {this.props.customDecIcon || <Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />}
                 </Button>
                 <View style={[inputWraperStyle]}>
                     <TextInput {...this.props.extraTextInputProps} editable={editable} returnKeyType='done' underlineColorAndroid='rgba(0,0,0,0)' keyboardType='numeric' value={this.state.stringValue} onChangeText={this.onChange} style={inputStyle} ref={ref => this.ref = ref} onBlur={this.onBlur} onFocus={this.onFocus} />
                 </View>
                 <Button onPress={this.inc} style={rightButtonStyle}>
-                    <Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
+                    {this.props.customIncIcon || <Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />}
                 </Button>
             </View>)
 
@@ -305,6 +305,14 @@ NumericInput.propTypes = {
     upDownButtonsBackgroundColor: PropTypes.string,
     rightButtonBackgroundColor: PropTypes.string,
     leftButtonBackgroundColor: PropTypes.string,
+    customDecIcon: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+    ]),
+    customIncIcon: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+    ]),
     editable: PropTypes.bool,
     reachMaxIncIconStyle: PropTypes.any,
     reachMaxDecIconStyle: PropTypes.any,
@@ -332,6 +340,8 @@ NumericInput.defaultProps = {
     upDownButtonsBackgroundColor: 'white',
     rightButtonBackgroundColor: 'white',
     leftButtonBackgroundColor: 'white',
+    customDecIcon: null,
+    customIncIcon: null,
     editable: true,
     validateOnBlur: true,
     reachMaxIncIconStyle: {},

README.md

@@ -13,7 +13,7 @@ enjoy!
 
 ## Installation
 ### Latest version
-v1.9.0
+v1.9.1
 #### if you have react-native-vector-icons installed in your project
 ```bash
 yarn add react-native-numeric-input
@@ -110,6 +110,8 @@ Name                                | Type                                | Defa
 **upDownButtonsBackgroundColor**    |`string`                             | `'white'`
 **rightButtonBackgroundColor**      |`string`                             | `'white'`
 **leftButtonBackgroundColor**       |`string`                             | `'white'`
+**customDecIcon**                   |`element` or `node`                  | none
+**customIncIcon**                   |`element` or `node`                  | none
 **totalHeight**                     |`number`                             | none
 **onChange**                        |`function`                           | none - required prop
 **onLimitReached**                  |`function`                           | none (empty function)
@@ -134,6 +136,7 @@ Name                                | Type                                | Defa
 * **reachMinDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case minValue is reached - **optional**
 * **onLimitReached** - added on version 1.7.0, used to handle event of min/max reached, **this function receives 2 arguments: (isMas:Boolean, msg:String)** like in the advanced example above - **optional**
 * **extraTextInputProps**  - added on version 1.8.0, used to add props used for the original TextInput component that are not used/supported in this component explicitly - **optional**
+* **customDecIcon** & **customIncIcon**  - added on version 1.8.4, used for custom icons inside `'plus-minus'` buttons - **optional**
 
 
 ## Versioning

index.d.ts

@@ -1,4 +1,5 @@
 declare module 'react-native-numeric-input' {
+  import { ReactElement } from 'react';
   import { ViewStyle } from 'react-native'
   import { Color } from 'csstype'
 
@@ -22,6 +23,8 @@ declare module 'react-native-numeric-input' {
     upDownButtonsBackgroundColor?: Color
     rightButtonBackgroundColor?: Color
     leftButtonBackgroundColor?: Color
+    customDecIcon?: ReactElement<any>
+    customIncIcon?: ReactElement<any>
     totalHeight?: number
     onChange: (value: number) => void
     onLimitReached?: (isMax: boolean, msg: string) => void