Description
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 29.68 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
create-react-native-web-app: 0.1.6
react-native-cli: 2.0.1
Description
While using a third party package,
https://www.npmjs.com/package/react-native-numeric-input
I am trying to make a text input which can be incremented, which can accept decimal inputs as well.
This works fine while running the app in iOS, but in Android, the decimal is not accepted, or in other words, is removed as soon as it is entered.
Reproducible Demo
Unfortunately, the app and code is confidential, but the part of the package mentioned which seems to be responsible for this behaviour is mentioned below. Although I think this might be something related to react-native and not the package.
onChange = (value) => {
let currValue = typeof this.props.value === 'number' ? this.props.value : this.state.value
let realMatch = value && value.match(/\d+(\.(\d+)?)?/) && value.match(/\d+(\.(\d+)?)?/)[0] === value.match(/\d+(\.(\d+)?)?/).input,
intMatch = value && value.match(/\d+/) && value.match(/\d+/)[0] === value.match(/\d+/).input,
legal = value === '' || (((this.props.valueType === 'real' && realMatch) || (this.props.valueType !== 'real' && intMatch)) && (this.props.maxValue === null || (parseFloat(value) <= this.props.maxValue)) && (this.props.minValue === null || (parseFloat(value) >= this.props.minValue)))
if (!legal) {
if (this.ref) {
this.ref.blur()
setTimeout(() => {
this.ref.clear()
setTimeout(() => {
this.props.onChange && this.props.onChange(currValue - 1)
this.setState({ value: currValue - 1 }, () => {
this.setState({ value: currValue })
this.props.onChange && this.props.onChange(currValue)
})},10)
}, 15)
setTimeout(() => this.ref.focus(), 200)
}
} else {
this.setState({stringValue:value})
let parsedValue = this.props.valueType === 'real' ? parseFloat(value) : parseInt(value)
parsedValue = isNaN(parsedValue) ? 0 : parsedValue
if (parsedValue !== this.props.value)
this.props.onChange && this.props.onChange(parsedValue)
this.setState({ value: parsedValue })
}
}