TextInput accepts only numbers - React Native

rn.input-numbers.js

import React, { Component } from 'react';
import { TextInput } from 'react-native';

class Input extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }

   handleInputChange = (text) => {
    if (/^\d+$/.test(text)) {
      this.setState({
        text: text
      });
    }
  }
   
  
  render () {
    return (
      <TextInput
        keyboardType='numeric'
        onChangeText={this.handleInputChange}
        value={this.state.text}
      />
    )
  }

}

Thanks

what about
-5
.2
0.5
-0.5

It ain't working!!!

It's working! Thx!

Nice snippet, I tried the code and discovered a bug though. You can't set the text back to blank. Here is how i changed the code

if (/^\d+$/.test(amount) || amount === '') { this.setState({ amount }) }

this works great!!!

How can we do the same for Input Field in React Native. Please find my sample code :

CODE:

<_InputField width="48%">
<_NewProductTextBoxLabel>Minimum Quantity</_NewProductTextBoxLabel>
<_NewProductTextBox
keyboardType="numeric"
returnKeyType="done"
style={this.setBorder(0, 'min')}
onFocus={() => this.setFocus(0)}
onChangeText={text => this.setProduct('minimumQty', text)}>
{this.state.newProduct.minimumQty}
</_NewProductTextBox>
</_InputField>

ONCHANGETEXT CODE`::

setProduct = (product, text) => {
const newData = Object.assign({}, this.state.newProduct);
console.log("SKT::::" + text),
newData[product] = text;
this.setState(
{
newProduct: newData,
},
() => {
this.props.setEditedProduct(this.state.newProduct);
},
);
};

Nice snippet, I tried the code and discovered a bug though. You can't set the text back to blank. Here is how i changed the code

if (/^\d+$/.test(amount) || amount === '') { this.setState({ amount }) }

Great, this works excellent

Thanks
This was very helpful