# react-native-numeric-pad

> A React Native component for amount or verification code input. It easily handles both decimals and integers, and runs smoothly for both IOS and Android. The design is simple and clear with numbers, dot, and one custom button.

Latest version **1.1.5** (published 2022-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-numeric-pad
pnpm add react-native-numeric-pad
yarn add react-native-numeric-pad
bun add react-native-numeric-pad
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2022-08-22 |
| First published | 2022-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 168.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | RidicZhi |
| Maintainers | ridiczhi |
| Keywords | react-native, react-native-numeric-pad, numeric-pad, decimal pad, input amount, integer decimal, keyboard, verification code, amount keyboard, finance app, react native amount, react native decimal, amount number pad |

## Links

- npm: https://www.npmjs.com/package/react-native-numeric-pad
- Repository: https://github.com/RidicZhi/react-native-numeric-pad
- npm.io page: https://npm.io/package/react-native-numeric-pad

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2022-08-22
- 1.1.4 — 2022-08-22
- 1.1.3 — 2022-08-21
- 1.1.2 — 2022-08-21
- 1.1.1 — 2022-08-21
- 1.1.0 — 2022-08-21
- 1.0.6 — 2022-08-21
- 1.0.5 — 2022-08-21
- 1.0.4 — 2022-08-21
- 1.0.3 — 2022-08-21
- 1.0.2 — 2022-08-21
- 1.0.1 — 2022-08-21

## README

# 📱 React Native Numeric Pad 📱

A React Native component for amount or verification code input. It easily handles both decimals and integers, and runs smoothly for both IOS and Android. The design is simple and clear with numbers, dot, and one custom button.

## 💃 Demo
Decimal Input            										|  Integer Input
:--------------------------------------------------------------:|:--------------------------------------------------------------:
<img src="./screenshots/demo_decimal.png" alt="demo_decimal" width="350"/>  |  <img src="./screenshots/demo_integer.png" alt="demo_integer" width="350"/>

📗 Note
1. This keyboard has basic input validation such as number of point and the point's position.
2. This package only contains the number pad(second half screen). You need to bind the value and a handler function with your onw component(see my example).
3. The value output form this keyboard is a string type. Don't forget to convert to achieve your goal🤙

## 🚀 Getting Started

**via NPM**

```
npm i react-native-numeric-pad

📗 Note
This component has a peer dependency: "react-native": "^0.63.4", to smoothly match your 
project you may ues:

npm i react-native-numeric-pad --legacy-peer-deps
```

**via Yarn**

```
yarn add react-native-numeric-pad
```
  
## 🛻 Usage

  
```
import  NumericPad  from  'react-native-numeric-pad'

...

<NumericPad
  numLength={8}
  onValueChange={(v) => { setState(v)} }
  allowDecimal={true}
}/>
```


## 👉🏼 Props

| Prop                          | Type              | Default                                                                                                |  Required  |
| ----------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ---------- |
|numLength                      |number             |-                                                                                                       | **Yes**    |
|onValueChange                  |func               |-                                                                                                       | No         |
|activeOpacity                  |number             |`0.9`                                                                                                   | No         |
|buttonSize                     |number             |`60`                                                                                                    | No         |
|allowDecimal                   |boolean            |`true`                                                                                                  | No         |
|style                          |ViewStyle          |-                                                                                                       | No         |
|buttonAreaStyle                |ViewStyle          |-                                                                                                       | No         |
|buttonItemStyle                |ViewStyle          |-                                                                                                       | No         |
|buttonTextStyle                |TextStyle          |` { color: '#000', fontSize: 30, fontWeight: '400' }`                                                   | No         |
|numericDisabled                |boolean            |`false`                                                                                                 | No         |
|accessible                     |boolean            |`false`                                                                                                 | No         |
|buttonTextByKey                |object             |`{one: "1",two: "2",three: "3",four: "4",five: "5",six: "6",seven: "7",eight: "8",nine: "9",dot: '.',zero: "0",}`| No|
|rightBottomButton              |React.Component    |`null`                                                                                                  | No         |
|onRightBottomButtonPress       |func               |-                                                                                                       | No         |
|rightBottomButtonDisabled      |boolean            |`false`                                                                                                 | No         |
|rightBottomButtonSize          |number             |`60`                                                                                                    | No         |
|rightBottomAccessibilityLabel  |string             |`"right_bottom"`                                                                                          | No         |
|rightBottomButtonItemStyle     |ViewStyle          |-                                                                                                       | No         |


  

## 👉🏼 Ref Actions

`const numpadRef = useRef(null)`

  

| Prop | Description |
| ----------------------------- | -----------------------------------------------------|
|numpadRef.current.clearAll()   |This method completely clears the entered code.       |
|numpadRef.current.clear() 		|This method only delete last number of entered code.  |

  

## 🍗 My Example
```javascript

import  React, { useState, useRef } from  'react'
import { StyleSheet, Text, View, TextInput } from  'react-native'
import { Button } from  '@ant-design/react-native'
import { Ionicons } from  '@expo/vector-icons'
import  NumericPad  from  'react-native-numeric-pad'
import { I18n } from  '../../i18n'
import { LAYOUT, COLORS } from  '../../theme'
import { deviceHeight, deviceWidth } from  '../../theme/devices'

export  default  function  Widget ({ navigation, route }) {
const [amount, setAmount] = useState('')
const numpadRef = useRef(null)

return (
  <View style={styles.container}>
    <View style={styles.shadowBox}>
      <Text>{I18n.translate('amount')} $</Text>
      <TextInput
        style={styles.amountTxt}
        showSoftInputOnFocus={false}
        maxLength={8}
        autoFocus={true}
        editable={false}
        selectTextOnFocus={false}
        value={amount}
        />
    </View>

    <View style={styles.keyboardContainer}>
      <Button style={styles.btn}  type='primary'
        onPress={() => {}}
        disabled={!amount}>
        {I18n.translate('confirm') + ' →'}
      </Button>

      <NumericPad
        ref={numpadRef}
        numLength={8}
        buttonSize={60}
        activeOpacity={0.1}
        onValueChange={value => setAmount(value)}
        allowDecimal={true}
        // Try them to understand each area :)
        // style={{ backgroundColor: 'black', paddingVertical: 12 }}
        // buttonAreaStyle={{ backgroundColor: 'gray' }}
        // buttonItemStyle={{ backgroundColor: 'red' }}
        rightBottomButton={<Ionicons name={'ios-backspace-outline'} size={28} color={'#000'}/>}
        onRightBottomButtonPress={() => {numpadRef.current.clear()}
        }
      />
    </View>
  </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: LAYOUT['spacing-05']
  },
  shadowBox: {
    width: '100%',
    borderRadius: LAYOUT['spacing-03'],
    padding: LAYOUT['spacing-05'],
    backgroundColor: COLORS.WHITE,
    shadowOffset: {
      height: 3,
      width: 3
    },
    shadowOpacity: 0.15,
    shadowRadius: 5,
    shadowColor: '#1D2660',
    elevation: 5
  },
  amountTxt: {
    fontSize: 38,
    fontWeight: '700',
    lineHeight: 40,
    marginTop: LAYOUT['spacing-06'],
    color: COLORS['brand-01']
  },
  keyboardContainer: {
    width: deviceWidth,
    height: deviceHeight * 0.46,
    borderRadius: 26,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
    position: 'absolute',
    bottom: 0,
    backgroundColor: COLORS.WHITE,
    shadowOffset: {
      height: 3,
      width: 3
    },
    shadowOpacity: 0.15,
    shadowRadius: 5,
    shadowColor: '#1D2660',
    elevation: 5
  },
  btn: {
    width: '100%',
    marginTop: 10,
    backgroundColor: COLORS['brand-01']
  }
})
```

  

## 📰 License


This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

---
_Source: https://npm.io/package/react-native-numeric-pad · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._