Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-native-smooth-pincode-input-custom
Advanced tools
Readme
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.
# yarn
yarn add react-native-smooth-pincode-input
# npm
npm i react-native-smooth-pincode-input
<SmoothPinCodeInput
ref={this.pinInput}
value={code}
onTextChange={code => this.setState({ code })}
onFulfill={this._checkCode}
onBackspace={this._focusePrevInput}
/>
<SmoothPinCodeInput password mask="﹡"
cellSize={36}
codeLength={8}
value={password}
onTextChange={password => this.setState({ password })}/>
<SmoothPinCodeInput
cellStyle={{
borderBottomWidth: 2,
borderColor: 'gray',
}}
cellStyleFocused={{
borderColor: 'black',
}}
value={code}
onTextChange={code => this.setState({ code })}
/>
<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 })}
/>
<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 })}
/>
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 |
FAQs
A cross-platform, smooth, lightweight, customizable PIN code input component for React Native custom from react-native-smooth-pincode-input.
The npm package react-native-smooth-pincode-input-custom receives a total of 36 weekly downloads. As such, react-native-smooth-pincode-input-custom popularity was classified as not popular.
We found that react-native-smooth-pincode-input-custom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.