https://github.com/sectorlabs/react-native-international-number-input

A numeric input field for react-native with support for different numeral systems.
https://github.com/sectorlabs/react-native-international-number-input

Last synced: 10 months ago
JSON representation

A numeric input field for react-native with support for different numeral systems.

• Host: GitHub
• URL: https://github.com/sectorlabs/react-native-international-number-input
• Owner: SectorLabs
• License: mit
• Created: 2020-01-30T09:18:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T11:24:59.000Z (over 3 years ago)
• Last Synced: 2025-03-30T16:01:49.182Z (over 1 year ago)
• Language: TypeScript
• Size: 1.97 MB
• Stars: 1
• Watchers: 25
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-international-number-input

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![npm version](https://badge.fury.io/js/react-native-international-number-input.svg)](https://badge.fury.io/js/react-native-international-number-input)

A wrapper over `react-native`'s `TextInput` that accepts numbers in the specified numeral system.

In plain English: a simple text input component that allows users to enter numbers in their native language. For example, Arabic speakers can enter Eastern-Arabic numbers. The application will receive the number translated/transformed to a `number`.

## Installation

### NPM

    npm install react-native-international-number-input

    

### Yarn

    

    yarn add react-native-international-number-input

## Usage

### Full example

The `InternationalNumberInput` is a thin wrapper over react-native's [`TextInput`](https://facebook.github.io/react-native/docs/textinput) component. It accepts all props that `TextInput` does and some additional ones.

`InternationalNumberInput` is a managed/controlled component. You **must** manage the current state/value of the component as described below. [Read more about controlled components.](https://reactjs.org/docs/forms.html#controlled-components).

    import React from 'react';

    import {

        NumeralSystems,

        InternationalNumberInput,

    } from 'react-native-international-number-input';

    const MyComponent = () => {

        const [value, setValue] = React.useState(null);

        return (

            

        );

    };

### Characteristics

* Validates numbers based on the specified `keyboardType`.

    * `keyboardType=decimal-pad` would only allow decimal numbers to be inputted.

    * `keyboardType=number-pad` would only allow integers to be inputted.

    `keyboardType` not only changes the keyboard type the user is shown but it also adds extra validation and prevents the user from entering invalid input.

* Returns `null` in the `onChange` callback when the input is invalid or non-existent/empty.