react-native-confirmation-code-input
A react-native confirmation code input for both IOS and Android
Features
- A user-friendly component for inputting confirmation code
- Extended from component, so you can use its props
- Built-in type of code input: underline, box, circle
- Set position: center, left, right, full width
- Set size and active color, inactive color
- Easy to customize style, use base style from TextInput component
- Check code on finish or return code for async checking
- Clear code on fail
- Use React Native ES6
Screenshots
Installation
npm install react-native-confirmation-code-input --save
Usage
Basic
Import this module:
;
Use as a component and style it:
{ return <CodeInput ref="codeInputRef1" secureTextEntry className='border-b' space=5 size=30 inputPosition='left' onFulfill= this /> <CodeInput ref="codeInputRef2" secureTextEntry compareWithCode='AsDW2' activeColor='rgba(49, 180, 4, 1)' inactiveColor='rgba(49, 180, 4, 1.3)' autoFocus=false ignoreCase=true inputPosition='center' size=50 onFulfill= this containerStyle= marginTop: 30 codeInputStyle= borderWidth: 15 /> <CodeInput ref="codeInputRef2" keyboardType="numeric" codeLength=5 className='border-circle' compareWithCode='12345' autoFocus=false codeInputStyle= fontWeight: '800' onFulfill= this /> }
props
This component uses the same props as . Below are additional props for this component:
Prop | Type | Default | Description |
---|---|---|---|
codeLength |
number | 5 | length of confirmation code -> number of cells |
compareWithCode |
string | code to compare. if null, onFulfill callback return inputted code to check later | |
inputPosition |
string | center |
position of code input in its container: left , right , center , full-width |
size |
number | 40 | size of input cells |
space |
number | 8 | space between 2 cells |
className |
string | border-box |
Some built-in classname: border-box , border-circle , border-b , border-b-t , border-l-r |
cellBorderWidth |
number | 1.0 | width of cell borders |
activeColor |
string | rgba(255, 255, 255, 1) |
color of cells when active |
inactiveColor |
string | rgba(255, 255, 255, 0.2) |
color of cells when inactive |
ignoreCase |
boolean | false |
ignore case when checking code |
autoFocus |
boolean | true |
auto focus on code input |
codeInputStyle |
style object | custom style for code input | |
containerStyle |
style object | custom style for code input container | |
onFulfill |
function | callback function called when fulfilling code. If compareWithCode is null -> return (code) in callback, else return (isValid, code) . Required |
|
onCodeChange |
function | Get Code text on every update of Field |
functions
clear input:
thisrefsrefNameclear;...<CodeInput ... ref="refName"/>
Example
See EXAMPLE
git clone https://github.com/ttdung11t2/react-native-confirmation-code-input.gitcd react-native-confirmation-code-input/examplenpm installreact-native run-ios / react-native run-android
License
react-native-confirmation-code-input is released under the MIT license. See LICENSE for details.
Any question or support will welcome.