📱 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
:--------------------------------------------------------------:|:--------------------------------------------------------------:
|

📗 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'

...

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 (


{I18n.translate('amount')} $
style={styles.amountTxt}
showSoftInputOnFocus={false}
maxLength={8}
autoFocus={true}
editable={false}
selectTextOnFocus={false}
value={amount}
/>

onPress={() => {}}
disabled={!amount}>
{I18n.translate('confirm') + ' →'}

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={}
onRightBottomButtonPress={() => {numpadRef.current.clear()}
}
/>


)
}


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 file for details