react-native-custom-code-input

A simple react native code input component for both iOS and android platforms.

Installation

  npm install react-native-custom-code-input --save

Import

 import CodeInput from "react-native-custom-code-input";

Example

 <CodeInput
    onInputComplete={() => console.log('Done!')} // must pass complete prop
    number={6} // You must pass number prop
    autoFocusFirst={true} // auto-focus on first element (default true)
   />

and pin inputs could be achieved by obfuscation prop

 <CodeInput
    obfuscation={true} // to hide input (default false)
    container={{ backgroundColor: "#fff" }} // parent view prop
    item={{ backgroundColor: "#fff" }} // child textinput prop
    onInputComplete={() => console.log('Done!')} // must pass complete prop
    number={6} // must pass number prop
    autoFocusFirst={true} // auto-focus on first element (default true)
   />

props

| prop | type | description | isRequired | default value | | ----------------- | ------------------------- | --------------------------------- | ------------ | ------------ | | number | number | length of code input | not required | 6 | | onInputComplete | function | call on input completes | required | | | autoFocusFirst | boolean | to focus on firt code element | not required| true | | container | style | parent container(view element styles) | not required | | | item | style | code element(textinput element styles)| not required| | | obfuscation | boolean | for pin inputs | not required| false |