npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-smooth-pincode-input-vcb

v1.0.0

Published

A cross-platform, smooth, lightweight, customizable PIN code input component for React Native.

Downloads

123

Readme

React Native Smooth Pincode Input

A cross-platform, smooth, lightweight, customizable PIN code input component for React Native.

Most PIN code inputs components implemented by combining several TextInputs. They works, however, not good enough. When user types fast, or system sluggish, characters may lost when component switching focus between TextInputs. User need to type over and over again to get a correct input, gave a frustrated user experience.

React Native Smooth Pincode Input implemented with a different approach - It's based on single TextInput but only render it as seperated fields. In other words, it looks like a PIN code input, but works as smooth as a native TextInput.

React Native Smooth Pincode Input is also highly customizable. By exposing cells and text stylesheets, it can be fully customized to fit in your app design. Password mode also supported with customizable mask characters as well as placeholders.

Features

  • Smooth typing without losing inputs
  • Customizable cell style
  • Customizable text style
  • Password mode
  • Customizable password mask and placeholder characters
  • Built in animations (Credit to react-native-animatable)

Installation

# yarn
yarn add react-native-smooth-pincode-input

# npm
npm i react-native-smooth-pincode-input

Examples

Default style with event handling

<SmoothPinCodeInput
  ref={this.pinInput}
  value={code}
  onTextChange={code => this.setState({ code })}
  onFulfill={this._checkCode}
  onBackspace={this._focusePrevInput}
  />

Password with custom mask

<SmoothPinCodeInput password mask="﹡"
  cellSize={36}
  codeLength={8}
  value={password}
  onTextChange={password => this.setState({ password })}/>

Underline style

<SmoothPinCodeInput
  cellStyle={{
    borderBottomWidth: 2,
    borderColor: 'gray',
  }}
  cellStyleFocused={{
    borderColor: 'black',
  }}
  value={code}
  onTextChange={code => this.setState({ code })}
  />

Customized style

<SmoothPinCodeInput
  placeholder="⭑"
  cellStyle={{
    borderWidth: 2,
    borderRadius: 24,
    borderColor: 'mediumturquoise',
    backgroundColor: 'azure',
  }}
  cellStyleFocused={{
    borderColor: 'lightseagreen',
    backgroundColor: 'lightcyan',
  }}
  textStyle={{
    fontSize: 24,
    color: 'salmon'
  }}
  textStyleFocused={{
    color: 'crimson'
  }}
  value={code}
  onTextChange={code => this.setState({ code })}
  />

Custom placeholder and mask using a component

<SmoothPinCodeInput
  placeholder={<View style={{
    width: 10,
    height: 10,
    borderRadius: 25,
    opacity: 0.3,
    backgroundColor: 'blue',
  }}></View>}
  mask={<View style={{
    width: 10,
    height: 10,
    borderRadius: 25,
    backgroundColor: 'blue',
  }}></View>}
  maskDelay={1000}
  password={true}
  cellStyle={null}
  cellStyleFocused={null}
  value={code}
  onTextChange={code => this.setState({ code })}
/>

Available props

| Name | Type | Default | Description | |-------------------|---------------------------------------------------------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | value | String | '' | The value to show for the input | | codeLength | Number | 4 | Number of character for the input | | cellSize | Number | 48 | Size for each cell in input | | cellSpacing | Number | 4 | Space between each cell | | placeholder | String | Element | '' | | mask | String | Element | '*' | | maskDelay | Number | 200 | The delay in milliseconds before a character is masked | | password | Boolean | false | Mask the input value. Each cell masked with mask props | | autoFocus | Boolean | false | If true, focuses the input on componentDidMount | | editable | Boolean | true | If false, makes each cell not editable | | animated | Boolean | true | Toggle animations | | animationFocused | String, Object | 'pulse' | The animation of the focused cell. This can be a preset animation in the form of a string or a custom animation object. | | restrictToNumbers | Boolean | false | Restrict input to numbers only | | containerStyle | React View StyleSheet | {} | View style for whole cell containers | | cellStyle | React View StyleSheet | { borderColor: 'gray', borderWidth: 1} | View style for each cell | | cellStyleFocused | React View StyleSheet | { borderColor: 'black', borderWidth: 2 } | View style for focused cell | | textStyle | React Text StyleSheet | { color: 'gray', fontSize: 24 } | Text style for cell value | | textStyleFocused | React Text StyleSheet | { color: 'black' } | Text style for focused cell value | | onFulfill | Function | null | Callback function that's called when the input is completely filled | | onTextChange | Function | null | Callback function that's called when the text changed | | onBackspace | Function | null | Callback function that's called when the input is empty and the backspace button is pressed | | keyboardType | Enum('default', 'number-pad', 'decimal-pad', 'numeric', 'email-address', 'phone-pad') | 'numeric' | Determines which keyboard to open |

Thanks to contributors