codepin

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