react-native-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-code-input --save

Usage

Basic

Import this module:

import CodeInput from 'react-native-code-input';

Use as a component and style it:

render() {
  return (
    <CodeInput
      ref="codeInputRef1"
      secureTextEntry
      borderType={'underline'}
      space={5}
      size={30}
      inputPosition='left'
      onFulfill={(code) => this._onFulfill(code)}
    />
    
    <CodeInput
      ref="codeInputRef2"
      secureTextEntry
      activeColor='rgba(49, 180, 4, 1)'
      inactiveColor='rgba(49, 180, 4, 1.3)'
      autoFocus={false}
      inputPosition='center'
      size={50}
      onFulfill={(code) => this._onFinishCheckingCode1(code)}
      containerStyle={{ marginTop: 30 }}
      codeInputStyle={{ borderWidth: 1.5 }}
    />
    
    <CodeInput
      ref="codeInputRef2"
      keyboardType="numeric"
      codeLength={5}
      borderType='border-circle'
      autoFocus={false}
      codeInputStyle={{ fontWeight: '800' }}
      onFulfill={(code) => this._onFinishCheckingCode2(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.