Hi,
Thanks for such an awesome library ! Really appreciate it !
I would like to know how do I disable the editable part of the input between the two selector buttons.
I tried applying a style inputStyle={{editable:false}} as a prop to the Numeric Input component. But doesn't seem work.

Awaiting your response. Thanks in advance !

Relating to #3

I can no longer type in a number I need.

For example, type "21" will be prevented, only "2" will be displayed

I can not type 2.50 since . is not allowed.

our config:

<NumericInput
                    value={this.amount}
                    onChange={(text) => { this.changeAmount(text) }}
                    totalWidth={150}
                    totalHeight={35}
                    minValue={0}
                    maxValue={9999}
                    step={1}
                    iconStyle={{ fontSize: 15, color: '#434A5E' }}
                    inputStyle={{ fontSize: 18, color: '#434A5E' }}
                    valueType='real'
                    borderColor='#C7CBD6'
                    rightButtonBackgroundColor='#C7CBD6'
                    leftButtonBackgroundColor='#C7CBD6'
                  />

I was trying to do something on submit of react-native-numeric-input, But couldn't do so.

here is my code example:

qtyNumHandle = (value, id) => {
	console.log("qtyNum handler");
	console.log(value);
	console.log(id);
}
qtyNumUpdate = (value, id) => {
	console.log("qtyNum Updater");
	console.log(value);
	console.log(id);
}

<NumericInput
	totalHeight={35}
	totalWidth={80}
	initValue={qtyN}
	separatorWidth={0}
	rounded={true}
	textColor='#2e6153'
	borderColor='#2e6153'
	minValue={1}
	maxValue={999}
	onChange={(value) => this.qtyNumHandle(value, data.item.id)}
	onSubmitEditing={(value) => this.qtyNumUpdate(value, data.item.id)}
/>

In this code I get the value onChange function, But I want to get value on submit of input.
@himelbrand Is there any way to do it...??

Describe the bug
Warning notice about using componentWillReceiveProps as unsafe component function.

To Reproduce
componentWillReceiveProps used in file NumericInput.js

    componentWillReceiveProps(props) {
        const initSent = !(props.initValue !== 0 && !props.initValue)
        if (props.initValue !== this.state.value && initSent) {

            this.setState({
                value: props.initValue,
                lastValid: props.initValue,
                stringValue: props.initValue.toString()
            });
        }
    }

Enviorment:

• Version: 1.8.3
• React: 16.9.0
• React Native version: 0.61.2
• Device: Emulator Android 5.1.0

Small Issue, but may cause some confusion, if not noticed by the users. 'seperatorWidth' property is spelled as 'sepratorWidth'(without 'e' after 'p'), so it works only when specified without the 'e'.
Best solution might be to support the correct spelled property name, along with the present property name.

Is your feature request related to a problem? Please describe.
I would like the selector to have the following values: 30, 50 , 60, 90, 120

Describe the solution you'd like
It would be ideal if the NumericInput supported the input of an array of values, so that step, minValue and maxValue would have no use.

Here is the code of my app.

When clicking the plus and minus values the ControlValueChange function of my component not getting called? Spent two hours to find the issue but couldn't find why.

I am testing my app in expo via webbrowser.

<View style={{flex:1,justifyContent: "center"}}>
                        <NumericInput 
                            //initValue={10}
                            value={value} 
                            onChange={ControlValueChange} 
                            onLimitReached={(isMin, msg) => console.log(isMin, msg)} 
                            totalWidth={80} 
                            totalHeight={30} 
                            //iconSize={10} 
                            step={1} 
                            minValue={0}
                            //type='up-down'  
                            valueType="integer" 
                            //rounded 
                            editable={true} 
                            textColor="#B0228C" 
                            iconStyle={{ color: "white", justifyContent: 'space-between', alignItems: 'center',}} 
                            rightButtonBackgroundColor="#18c2ef" 
                            leftButtonBackgroundColor="#ff8080" 
                            //containerStyle= {{height: 30, width: 80, justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#F5FCFF',}}
                            inputStyle= {{height: 30, width: 80,  justifyContent: 'space-between', alignItems: 'center',}}
                            //extraTextInputProps = {{height: 30, width: 80, justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#F5FCFF',}}
                        /> 
                    </View>

Enviorment (please complete the following information):

• Version: [e.g. 22]

• React Native version: [eg. 0.59]

• Device: [e.g. iPhone6] (mention if using emulator)

• Device OS: [e.g. iOS8.1]

  "expo": "^36.0.2",
  "expo-constants": "^9.0.0",
  "expo-image-manipulator": "^8.1.0",
  "expo-image-picker": "^8.1.0",
  "expo-linear-gradient": "^8.1.0",
  "import": "^0.0.6",
  "react": "~16.9.0",
  "react-dom": "~16.9.0",
  "react-native": "~0.61.4",

Also my plus and minus buttons are not alligning.

Desired Behaviour: When min/max value is reached, clicking the - / + button should trigger a prop called incPressedAfterReachMax / decPressedAfterReachMin, so the parent can show an alert message to the user accordingly.

Current Behaviour: When min/max value is reached and - / + buttons are clicked, there is no prop to inform the user about why the quantity no longer increments / decrements.

Hi, @himelbrand . Thanks for such an awesome library. I really appreciate it.

I would like to know how to set iconStyle props of two selector buttons when the value is same as minValue or maxValue props, so user seems that buttons is disabled.

Awaiting your response. Thanks in advance.

Here is how we use the numeric input.

Min value = -40.0
Max Value = 135.0
step = 0.2
initValue and value = 98.6

<NumericInput 
                  minValue = {this.state.startTemp.min}
                   maxValue = {this.state.startTemp.max}
                   step={this.state.startTemp.step}
                   initValue={this.state.startTemp.currentValue}
                   value={this.state.startTemp.currentValue}
                    onChange={value => 
                              {
                                    this.setState(update(this.state, {
                                         startTemp: {
                                               currentValue: {$set: value}                                                
                                         }
                                    }))
                              }} 
                              totalWidth={calcSize(280)} 
                              totalHeight={calcSize(80)} 
                               iconSize={calcSize(50)}
                               valueType='real'
                               textColor='#B0228C' 
                               iconStyle={{ color: 'white' }} 
                               rightButtonBackgroundColor='#EA3788' 
                               leftButtonBackgroundColor='#E56B70'/>

1. Everything seems to work as I am incrementing but as soon as hit 99.4 and hit an increment the number that is shown in the text box has multiple decimal places and the ellipsis shows up with the text. I have in fact ensured that it stays a single decimal number.

2. The same scenario when I decrement the number from 0 to say -40. I get way to many decimal places displayed.

3. When i type in a number into the text box I can't enter a negative value. Since the minimum value in my case is -40.0

Please let me know if a fix is already available for this issue. Although I am using the latest react-native and the latest version of this repository as well.

Thanks,
Yogesh

Separate value displayed in thousands
eg. 10,000, 100,000, 1,000,000 10,000,000, 100,000,000

Enviorment (please complete the following information):

• Version: [1.3.8]
• React Native version: [eg. 0.59.5]
• Device: [e.g. iPhone XR] (mention if using emulator)
• Device OS: [e.g. iOS12.4.1]

I am trying to add value direct from the API to FlatList, for eg. Cart screen with multiple item and multiple quantity, but it always render 0

when using with flatlist it throw to decimal then get max value

constructor(props) {
super(props)
this.state = {
v3: 0,
}
}
renderItem = ({item}) => {
if(item.quota === 0){
return(
sorry abis bos
)
}
return(


<Image
style={{width : 80, height: 80}}
source={{uri: item.image}}
/>


{item.name}
Rp {item.price}

jumlah
<NumericInput initValue={this.state.v3}
value={this.state.v3}
onChange={(v3) => this.setState({ v3 })} rounded minValue={0} valueType='integer'/>







)
}

Hello everyone,
I want to say thanks for all of the positive responses for this project and for all of the users and contributors!
As you might have noticed, I'm having some trouble maintaining this package in a regular manner...
I'm looking for volunteers that would like to take some more responsibilities in maintaining this package.

The responsibilities include:

• Approving and reviewing pull requests
• Responding to issues
• Updating the package when needed to keep it alive and kicking!

Anyone that is interested, let me know here,

The objective here is for the users of this package to be able too keep using it and enjoying their numeric input needs for react native.

I hope that we will find someone soon, since I have a lot on my plate recently and I don't have the time to keep maintaining in a regular manner.

Thanks you all!

Is your feature request related to a problem? Please describe.
It seems a little heavy and unecessary to require react-native-vector-icons. The basic number input functionality could easily be implemented without it and it would be nice for people who want to keep dependency complexity to a minimum. react-native-vector-icons can be a pain to get installed as well.

Describe the solution you'd like
Allow for a basic installation that doesn't use icons and just simple unicode characters.

When I enter the decimal sign on my keyboard it gets automatically removed so I can never enter a decimal value only when using steps.

First of all thank you for this library!

Describe the bug
When defining a step larger than 1 and also a minimum value,
once user presses minus, the onChange could be triggered with a value less than the minimum,
this could happen once though.

To Reproduce
Steps to reproduce the behavior:

1. step=5, minValue=0
2. set the input to 3
3. press minus
4. onchange is triggered with the value -2.

and/or

Share your relevant code segment. (usually, try and share at least your NumericInput component code)

        <NumericInput
          rounded
          step={5}
          minValue={0}
          value={value}
          onChange={(fieldValue) => {
            onValueChange(Number(fieldValue));
          }}
        />

Expected behavior
Expected behavior is that onChange will be triggered with the min value.

If any additional info is required, let me know. I don't believe it has anything to do with OS etc..

Thanks in advance!

How to get the data from numericInput. I want to get the result from the value I press
here is my code:
<NumericInput type='up-down'
totalWidth={155}
totalHeight={40}
value={this.state.value}
onChange={value =>console.log(value)} />

I have try
<NumericInput type='up-down' value={this.state.value} onChange={value => this.setState({value})}
but this cannot work

Basically what the title says. I have this component wrapped in a parent View container. From the docs, it seems like the totalWidth and totalHeight only accept integer values. Is there any way to override this?

react-native-numeric-input "onChange" is not getting triggered when value is decremented from 1 to 0

<NumericInput
value={this.state.cartState[data.id].count}
onChange={value => this.sendData(data.id,value,rowNumber)}
minValue={0}
iconSize={25}
step={1}
valueType='integer'
rounded={true}
textColor='#B0228C'
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor='#EA3788'
leftButtonBackgroundColor='#E56B70'/>

Bug when setting min and max value
If you set the property minValue to a minimum value and type a value below the minimum value using the cell phone keypad and click on another field on the screen to leave the field and then go back to the field and leave again, an error will occur that will break your application .

To Reproduce
Steps to reproduce the behavior:

1. Set the minValue of the component to 0.
2. Click on the text part of the component and using de cellphone keyboard, type -1.
3. Click on another part of the screen to leave the field.
4. Click back in the field.
5. Click on another part of the screen to leave the field.
6. You will see the error that will break your app.

If you don't see the error, try to repeat the previous steps and in step 4, when clicking on the field, try to enter some other valid or invalid value.

Component Code:

<NumericInput type='plus-minus' minValue={0} maxValue={9999} rounded={true} onChange={value => console.log(value)} />

Expected behavior
When the user enters a value below the minimum, the set value should be equal to the minimum value and not a null value. By making this adjustment, the error should probably be adjusted and also allows the user to leave the field.

Enviroment:

• Version: 1.8.3
• React Native version: 0.62.2
• Device: Nexus_5X_API_24 (using emulator)
• Device OS: Android 7

Here is part of the log printed by the library when the error occurred:

[Mon Aug 31 2020 23:04:46.170]  LOG      0
[Mon Aug 31 2020 23:04:46.168]  LOG      0
[Mon Aug 31 2020 23:04:46.381]  LOG      0
[Mon Aug 31 2020 23:04:48.749]  LOG      0
[Mon Aug 31 2020 23:04:51.693]  LOG      -5
[Mon Aug 31 2020 23:04:53.998]  LOG      
[Mon Aug 31 2020 23:04:54.000]  LOG      
[Mon Aug 31 2020 23:04:57.259]  LOG      
[Mon Aug 31 2020 23:04:57.260]  LOG      
[Mon Aug 31 2020 23:04:58.175]  LOG      
[Mon Aug 31 2020 23:04:58.176]  LOG      
[Mon Aug 31 2020 23:08:32.432]  LOG      1
[Mon Aug 31 2020 23:08:33.207]  LOG      2
[Mon Aug 31 2020 23:08:33.384]  LOG      3
[Mon Aug 31 2020 23:08:33.569]  LOG      4
[Mon Aug 31 2020 23:08:35.125]  LOG      3

Hi,

How can I change input from keyboard and after this check min and max value?

Example: min value = 10, max value = 100, value = 50
If I add from keyboard any number or delete number current value don't show and show the last value. I want to clear value only after removing focus from input.

Thanks in advance!

Describe the bug
When I assign a hook as the value for the spinner and then modify that value elsewhere, the spinner doesn't immediately update. But then when I hit the spinner buttons, it jumps to that new value and updates based upon that.

To Reproduce
Here is a code snippet:
https://snack.expo.io/@bevans99/bug-when-value-changes-outside-of-spinner

Expected behavior
I was expecting the spinner value to visually update when it's connected to a hook that changes outside of the spinner.

Environment
I was able to recreate this bug as a Snack and have so far observed it on Android and iOS devices.

Additional context
I'm not sure if this is intended functionality or not, but it's very confusing to have the spinner not change with the rest of the information related to a hook and then suddenly jump.

Hi, thank you for the plugin,

I have a new installation of reeact-native and copied the exact example code in my App,js file but the value does not decrease or increase, could you please help on how best to resolve this ?

Hey there!
Thanks for the awesome numeric input but there is a problem that i can't solve even by directly copying and pasting your code into mine and running it on my device.
The state or the value of the input is not changing by tapping on either of the '+' and '-' buttons.
Does this happen automatically or do i have to add some kind of functionality behind it myself?

Hello,

Is there a way to remove the increment and decrement button?

Thanks,
Matt

Is your feature request related to a problem? Please describe.
The design of my application is required custom icons instead of used in this component

Describe the solution you'd like
My proposal - add additional props for custom icons

Describe alternatives you've considered
There are no alternatives I see

Additional context

My project won't bundle after adding react-native-numeric-input. I installed the basic usage according to the readme

<NumericInput
          value={this.state.number}
          onChange={number => this.setState({number})}
        />

(I also have number set to 0 in the initial state)
and I get this error:

error: bundling failed: node_modules\react-native-numeric-input\NumericInput\NumericInput.js: C:\Users\andre\Documents\geopad\node_modules\react-native-numeric-input\NumericInput\NumericInput.js: Missing class properties transform.
  30 |         }
  31 |     }
> 32 |     updateBaseResolution = (width, height) => {
     |     ^
  33 |         calcSize = create({ width, height })
  34 |     }
  35 |     inc = () => {

I have the following packages installed;

...
"dependencies": {
    "@babel/preset-env": "^7.9.0",
    "@react-native-community/cli": "^4.3.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/picker": "^1.3.0",
    "@react-native-firebase/app": "~6.3.4",
    "@react-native-firebase/auth": "~6.3.4",
    "@react-native-firebase/firestore": "~6.3.4",
    "@react-native-firebase/functions": "~6.3.4",
    "@react-native-firebase/storage": "~6.3.4",
    "eject": "0.0.4",
    "moment": "^2.24.0",
    "npx": "^10.2.2",
    "react": "16.9.0",
    "react-native": "^0.61.5",
    "react-native-easy-toast": "^1.2.0",
    "react-native-eject": "^0.1.2",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-image-picker": "0.28.0",
    "react-native-image-resizer": "^1.2.0",
    "react-native-lightbox": "^0.8.1",
    "react-native-maps": "0.27.1",
    "react-native-numeric-input": "^1.8.3",
    "react-native-reanimated": "^1.7.0",
    "react-native-router-flux": "^4.2.0",
    "react-native-screens": "^2.3.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "shelljs": "^0.8.3",
    "ts-jest": "^25.2.1",
    "util": "^0.12.2",
    "uuid-random": "^1.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.2.3",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "^16.13.1"
  },
...

I've googled this error and it seems to be something related to babel, but I don't know anything about babel, and none of the other situations that give rise to this error seem similar or relevant, as far as I can tell...

Hello,
Is there a way i can align input left as normal text input ?
Thanks

If I hit the - button, the input works fine, but if I try to type in a negative number it does not allow it.

So I'm using <NumericInput> as the following :

                  <Text style={styles.TextColorGrey}>
                    {productStock.name}
                    {` (${stocks[productStock.id]} ${typeof stocks[productStock.id]})`}
                  </Text>
                  <NumericInput
                    minValue={0}
                    onChange={value => this.updateStockQuantity(productStock.id, value)}
                    value={stocks[productStock.id]}
                  />

And here is what is happening :

So basically the displayed value is 0, while it should be 3, then touching the plus button shows 4.
From the source code I found that you where doing a different treatment if the value is a number or not (that's why I'm showing the value type which is a number here), but it seems like you're not using the const value afterward but the this.state.stringValue.

I added react-native-numeric-input in my app to update qty of product. I was working normally but when I added code to update value in my database quantity is update from onChange but in textInput it dosen't change the value.

here is the video of app : https://imgur.com/kH8CW7G

Here is my code:

<NumericInput
    totalHeight={35}
    totalWidth={80}
    validateOnBlur={false}
    initValue={qtyN}
    separatorWidth={0}
    rounded={true}
    textColor='#2e6153'
    borderColor='#0000'
    inputStyle={{
        backgroundColor: "#fff",
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    containerStyle={{
        backgroundColor: '#2e6153',
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    iconStyle={{
        color: '#fff',
    }}
    leftButtonBackgroundColor='#2e6153'
    rightButtonBackgroundColor='#2e6153'
    minValue={1}
    maxValue={999}
    onChange={(value) => this.qtyNumHandle(value, data.item.id)}
/>

and here is the function in which I updated the qty:

qtyNumHandle = async (value, id) => {
    console.log("qtyNum handler");
    console.log(value)
    console.log(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.log(user_id);
        let updateProduct = await fetch(`http://website.com/api/cart/updatecart?productid=${id}&userid=${user_id}&qty=${value}`, {
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
            },
        });
        let updateProductRes = await updateProduct.json();
        console.log(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.log(errors);
    }
}

Well hello, @himelbrand thanks for this awesome plugins ❤️

i tried to create input stepper button on my cart like:

import React, { Component } from 'react';
import ....;

export default class Cart extends Component {
  state = {
    textInputs: [],
  };

  render() {

    console.log(this.state.textInput);

    return (
      {cart.get.map((item, index) => (
	<ListItem key={index} noIndent>
	   <Body>
	     <Text>{item.product.name}</Text>
	     <Text note numberOfLines={1}>{item.qty} x {item.price}</Text>
	     <Text note numberOfLines={1}>Rp. {item.total}</Text>
	  </Body>
          <Right>
              <NumericInput initValue={item.qty} value={this.state.textInputs[index] ? this.state.textInputs[index] : item.qty} totalHeight={30} onChange={value => { let { textInputs } = this.state; textInputs[index] = value; this.setState({textInputs, })}}/>
            </Right>
         </ListItem>
      ))}
    );
  }
}

the value show as a decimal 12.000000000 in the view, but the console say it is 12.
I was looking for the solution with this #13 issue.

And all working fine if i delete this:

1. ComponentWillReceiveProps
2. .toFixed(12) on the Line 36 and Line 45.

react-native-numeric-input version 1.6.2

When running it on simulator getting error

Please update the following components: NumericInput

I'm trying to use the basic example in a new project but I can't make to change its value.

constructor(props) {
  super(props);
  this.state = {
    quantity: 0
  }
}

 <NumericInput
   value={this.state.quantity}
   onChange={quantity => this.setState({quantity})}
   iconStyle={{ color: '#06213b' }}
   containerStyle={{ borderRadius: 4, border: 'none'}}
   inputStyle={{ borderRadius: 4, border: 'none'}}
   rightButtonBackgroundColor='#707070' 
   leftButtonBackgroundColor='#707070'
/>

Hi, love the component so far!
I would like to know if it would be possible to add a long press functionality to the increase and decrease buttons.

Doing so can make a lot easier make larger number inputs without having to use the keyboard and its a bit more intuitive.

I'll try to do it on my own but official support would be awesome.

Hi,

I have this sample of code

<NumericInput 
                        minValue={0}
                        value={this.state.answers[index]}
                        onChange={value => {
                            console.log("$ ", this.state.answers[index])
                            let a = this.state.answers
                            a[index] = value
                            this.setState({answers: a})
                            console.log("$$$ ", this.state.answers[index])
                        }} 
                    />

What happens is

• The console log with the single $ prints the current value
• The console log with three $ prints the increased/decreased value
• The component shows always the initial element (zero in my case)

Hi. I use this plugin. So nice.

But I have an issue.
I created my form. It uses NumericInput.
And I set props.value=0 as init value when user change other param in my form.
inc and dec func in NumericInput.js check props.value as below.
"let value = this.props.value ? this.props.value : this.state.value"
It substitutions this.state.value for value cause this.props.value is 0.
e.g.
User clicked inc a few times. state.value is incremented.
Then User changed other param in my form.
I want to set value=0 to use props.value but value is incremented state.value.

For now, I changed as below.
"let value = (typeof this.props.value === 'number') ? this.props.value : this.state.value"

Is there any other way ?

Thank you.

Describe the bug
when the values is 0 not call onChange

Hi Thanks for the lib.

First I'm sorry for my english. I'll try the tell you something.

in the function dec in the file NumericInput.js

dec = () => {
let value = this.props.value && (typeof this.props.value === 'number') ? this.props.value : this.state.value
if (this.props.minValue === null || (value - this.props.step > this.props.minValue)) {
value = (value - this.props.step).toFixed(12)
value = this.props.valueType === 'real' ? parseFloat(value) : parseInt(value)
this.setState({ value, stringValue: value.toString() })
} else if (this.props.minValue !== null) {
this.props.onLimitReached(false, 'Reached Minimum Value!')
value = this.props.minValue
this.setState({ value, stringValue: value.toString() })
}
if (value !== this.props.value)
this.props.onChange && this.props.onChange(Number(value))
}

the last if is which one call onChange, But value and this.props.value is equal in that point.
value=0 and this.props.value=0 so never call onChange.

Thanks.

I created #14 a couple of days ago, it was closed right away since it worked on iOS in simulator, while I can confirm this works great it is still broken on Android.

Every time I press the decimal sign on the keyboard it removed it straight away, I believe this is due to the casting from string that takes place inside the onChange function.

I want to dynamically change the value to a default value I made when I click on a button.

My code looks like this:

const numberDefault = 1;
const [enteredNumber, setEnteredNumber] = useState(numberDefault);
const resetInputHandler = () => {
    setEnteredNumber(numberDefault);
}


<NumericInput
        value={enteredNumber}
        ... />
<Button title="Reset" onPress={resetInputHandler} />

Hello,

I think you inverted real and int match functions parameters.

Regards,
Stéphane

Describe the bug

When passing iconStyle={{ color: 'white' }} I am getting a typescript error:

Type '{ color: string; }' has no properties in common with type 'ViewStyle'.

This is due to iconStyle?: ViewStyle in index.d.ts. A simple solution would be to use any instead of ViewStyle. See https://github.com/oblador/react-native-vector-icons/blob/d969f8c8ba1cb6852b723af6ee4fefc4ee85b083/lib/icon-button.js#L80

To Reproduce

        <NumericInput 
            value={this.state.value} 
            onChange={value => this.setState({value})} 
            onLimitReached={(isMax,msg) => console.log(isMax,msg)}
            totalWidth={240} 
            totalHeight={50} 
            iconSize={25}
            step={1.5}
            valueType='real'
            rounded 
            textColor='#B0228C' 
            iconStyle={{ color: 'white' }} 
            rightButtonBackgroundColor='#EA3788' 
            leftButtonBackgroundColor='#E56B70'/>

Expected behavior

I would not expect a TypeScript error when using iconStyle.

Enviorment (please complete the following information):

• Version: 1.8.3
• React Native version: 0.61.4
• Device: n/a
• Device OS: n/a

Describe the bug
I set minValue to 0.01 and when a try to type '0.01' the component sets the value to '0' after I enter the zero after the point ('0.0'). So, I never can type a number less than 0.1 if the min value is not zero. In another hand, with min button it works perfectly so that I can go from 0.1 to 0.09 just touching the min button.

<NumericInput
valueType={'real'}
minValue={0.01}
maxValue={2}
step={0.01}
value={dose}
onChange={value => setDose(value)}
/>

Enviorment:

• Version: 1.8.3
• React Native version: 0.61.5
• Device: Nexus 5X API 27 (emulator)

Describe the bug
Icons for +/- are not showing for Android 9. Tested on emulator only. In iOS this problem doesn't happen.

To Reproduce
Steps to reproduce the behavior:

1. Import the package
2. use the <NumericInput onChange={value => console.log(value)} />
3. Android simulator is showing this:
   

Expected behavior
It should display icons properly.

Enviorment (please complete the following information):

• Version: v1.8.3
• React Native version: 0.61.2
• Device: Android 9 Emulator
• Device OS: Android 9 Emulator

I am using react-native-numeric-input for the input of the tips given to a service
It would be nice to have a prefix of the currency used.

5.25 -> $5.25

I think a new prop currency: string is needed and the currency symbol or text should be added before the number and the value should remain type number

can't input . in the textbox

Getting this warning !!!

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: NumericInput