allow only number input react native code example
Example 1: react allow only numbers in input
class App extends React.Component{
constructor(){
super();
this.state = {value: ''};
this.onChange = this.onChange.bind(this)
}
onChange(e){
const re = /^[0-9\b]+$/;
if (e.target.value === '' || re.test(e.target.value)) {
this.setState({value: e.target.value})
}
}
render(){
return <input value={this.state.value} onChange={this.onChange}/>
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
Example 2: react native numbers only input
/\*\*
\* Sample React Native App
\* https://github.com/facebook/react-native
\* @flow
\*/
import React, { Component } from "react";
import { Platform, StyleSheet, View, Button, TextInput, } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
placeholder="Enter Your Mobile Number"
underlineColorAndroid='transparent'
style={styles.TextInputStyle}
**keyboardType={'numeric'}**
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
headerText: {
fontSize: 20,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
TextInputStyle: {
textAlign: 'center',
height: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: '#009688',
marginBottom: 10
}
});