react-native-code-pin

This is a react-native component for a implements a code pin view in your project

Attention: This package is under development and evolution over time Contributions are welcome!

Installation

npm install --save pincode

or

yarn add pincode

Basic Usage

Basic usage requires Code and Size.

• Size : requires the size of the code

import PinCode from 'pincode'

<PinCode Size={4} />

Options

| Key | Description | Required | Default | Type | |---|---|---|---|---| |ForgetText|Change the text of the forget method |false|forget|string| |ForgetMethod|take as a parameter a function to execute when forget is called|false|() => (console.log('forget')|func| |Size|is a size of the code |true|4|number| |Random|return the keyboard keys randomly|false|false|boolean| |eventCode|is a function that takes in parameter the password typed by the user, a error function and a loading function|???| (event, error, loading) => {}|func|

Example

basic use of eventCode prop

...
import PinCode from 'pincode'

export default Example extends Component {
  ...
  checkCode = (event, loading, error) => {
    if(event == 'this.state.YourCode'){
      loading(true);
      setTimeout(() => {
          loading(false)
      }, 5000);
    } else {
      error();
    }
  }
  
  render(){
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> 
          <PinCode Size={4} eventCode={this.checkCode}/>
        </View>
    )
  }
}

Utilisation

• eventCode(event, error, loading)
• event() return the code entered by the user
• error() clear the animation
• loading(value) stop the loading animation value by default egal false

Styles

| Key | Description | Default | Type | |---|---|---|---| |TextColor|change color of the keyboard text|'#5262F3'|string| |BorderColor|change color of the Keyboard border|'rgba(0,0,0,0.1)'|string| |PinColor|Change color of the pin code |turquoise|string| |FontSize|sets the font size|30|number| |CodeColor|is an array of the different colors of the animation|['#EB5088', '#72C1FA', '#F5D679', '#76ECC9', '#5468F3', 'red']|arrayOf(string)| |ImageSize|size of the icon|{height: 15, width:20}|object(height, width)| |ImageLocation|link to the icon|require('./assets/icons/backspace-arrow.png')|any|