react-native-clean-number-input

A number input component for react native

Usage no npm install needed!

<script type="module">
  import reactNativeCleanNumberInput from 'https://cdn.skypack.dev/react-native-clean-number-input';
</script>

README

React Native Clean Number Input

React Native Component that removes all non-numeric characters from user input.

demo

Installation

npm install react-native-clean-number-input

Usage

Just import the NumberInput Component and render it. When the value of the input changes all non-numeric characters will removed.

import NumberInput from 'react-native-clean-number-input';

class App extends React.Component {
  render() {
    return (
      <View>
        <NumberInput value={20} />
      </View>
    );
  }
}

Props

The NumberInput Component can accept any prop that TextInput accept, but the prop value is required. To customize the TextInput that is rendered inside the NumberInput Component, simply pass props the TextInput accepts to the NumberInput Component. You can find the props the TextInput Component accepts here.

Here is an example of how to change the keyboard type to numeric.

import NumberInput from 'react-native-valid-number-input';

class App extends React.Component {
  render() {
    return (
      <View>
        <NumberInput
          value={20}
          keyboardType={'numeric'}
        />
      </View>
    );
  }
}