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

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`