0.0.4 • Published 3 years ago
@ankhaa/able_ui v0.0.4
@able/able-ui
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 i @ankhaa/able_ui --save
Usage
Basic
Import this module:
import Login from '@ankhaa/able_ui';
Use as a component and style it:
render() {
return (
<Login
ref="codeInputRef1"
secureTextEntry
borderType={'underline'}
space={5}
size={30}
inputPosition='left'
onFulfill={(code) => this._onFulfill(code)}
/>
)
}
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 |
inputPosition | string | center | position of code input in its container: left , right , center , full-width |
size | number | 40 | size of input cells in pixels |
space | number | 8 | space between 2 cells in pixels |
borderType | string | clear | Some built-in borderType: clear , square , circle , underline |
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 |
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, called with code as string. Required |
functions
clear input:
this.refs.refName.clear();
...
<CodeInput
...
ref="refName"
/>
Example
See EXAMPLE
git clone https://github.com/leonardodino/react-native-code-input.git
cd react-native-code-input/example
npm install
react-native run-ios / react-native run-android
License
react-native-code-input is released under the MIT license. See LICENSE for details.
Any question or support will welcome.