In React-Native project, I have an Input component from Native Base and I want to this component to take only numeric values 0-9 and give this field default value, I looked for other questions about this issue, I do not know maybe those answers are for 'textInput' component or somehow suggestions did not work for me? Can you help me please?
-
See also: stackoverflow.com/questions/32946793/…hippietrail– hippietrail2017-11-01 13:17:14 +00:00Commented Nov 1, 2017 at 13:17
Add a comment
|
4 Answers
1 Comment
Eric
Unfortunately that can still allow non-numeric input to get in, such as commas and dashes depending on the platform.
I grab your problem there is no attribute for Text Input to take numeric only. But I have two method for this, In first method you have to write the code for taking the value numeric this is hack but you can use it, the code is :
<TextInput
style={styles.textInput}
keyboardType = 'numeric'
onChangeText = {(text)=> this.onChanged(text)}
value = {this.state.myNumber}
/>
onTextChanged(text) {
// code to remove non-numeric characters from text
this.setState({myNumber: text})
}
Comments
keyboardType="number-pad"
see source https://facebook.github.io/react-native/docs/textinput.html#keyboardtype
Comments
You can use keyboardType = 'numeric' for numeric keyboard.
<View style={styles.container}>
<Text style={styles.txtStyle}>Enter numeric value</Text>
<TextInput
placeholder={'Enter number'}
style={styles.textInputStyle}
keyboardType="numeric"
onChangeText={value => this.onChanged(value)}
value={this.state.myNumber}
/>
</View>
In first case punctuation marks are included ex:- . and -
Use regular expression to remove punctuation marks.
onChanged(value) {
this.setState({ myNumber: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
}
Please check snack link
