0.0.4 • Published 2 years ago

@ankhaa/able_ui v0.0.4

Weekly downloads
49
License
ABLE
Repository
gitlab
Last release
2 years ago

@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

underline-28082017 box-28082017 circle-28082017 full-28082017

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:

PropTypeDefaultDescription
codeLengthnumber5length of confirmation code -> number of cells
inputPositionstringcenterposition of code input in its container: left, right, center, full-width
sizenumber40size of input cells in pixels
spacenumber8space between 2 cells in pixels
borderTypestringclearSome built-in borderType: clear, square, circle, underline
cellBorderWidthnumber1.0width of cell borders
activeColorstringrgba(255, 255, 255, 1)color of cells when active
inactiveColorstringrgba(255, 255, 255, 0.2)color of cells when inactive
autoFocusbooleantrueauto focus on code input
codeInputStylestyle objectcustom style for code input
containerStylestyle objectcustom style for code input container
onFulfillfunctioncallback 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.