Easy, convenient, quick-forming PinView component.
Available items
No Items, yet!
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
React Native Pin View
Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android, and has only keyboard and input.
v3.0.0 Released with more powerful features
BEWARE! This version has a lot of breaking changes.
You can get codes of this preview from here
Getting Started
via Yarn
yarn add react-native-pin-view
via NPM
npm install --save react-native-pin-view
Basic Usage
import PinView from 'react-native-pin-view';...
Props
| Prop | Type | Default | Required | | ----------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ---------- | |pinLength |number |- | Yes | |onButtonPress |func |- | No | |onValueChange |func |- | No | |inputSize |number |- | No | |activeOpacity |number |
0.9| No | |buttonSize |number |
60| No | |style |ViewStyle |- | No | |inputAreaStyle |ViewStyle |
{ marginVertical: 12 } | No |
|inputViewStyle |ViewStyle |- | No |
|inputViewEmptyStyle |ViewStyle |- | No |
|buttonViewStyle |ViewStyle |- | No |
|buttonAreaStyle |ViewStyle |{ marginVertical: 12 } | No |
|inputViewFilledStyle |ViewStyle |- | No |
|inputTextStyle |TextStyle |- | No |
|buttonTextStyle |TextStyle |{ color: "#FFF", fontSize: 30 } | No |
|disabled |boolean |- | No |
|showInputText |boolean |false| No | |accessible |boolean |
false| No | |buttonTextByKey |object |
{one: "1",two: "2",three: "3",four: "4",five: "5",six: "6",seven: "7",eight: "8",nine: "9",zero: "0",}| No |
|customLeftButtonDisabled |boolean |false| No | |customLeftButton |React.Component |- | No | |customLeftAccessibilityLabel |string |
left| No | |customLeftButtonViewStyle |ViewStyle |- | No | |customRightButtonDisabled |boolean |- | No | |customRightButton |React.Component |- | No | |customRightAccessibilityLabel |string |
right| No | |customRightButtonViewStyle |ViewStyle |- | No |
Ref Actions
const pinView = useRef(null)
| Prop | Description | | ----------------------------- | -----------------------------------------------------| |pinView.current.clearAll() |This method completely clears the entered code. | |pinView.current.clear() |This method only delete last number of entered code. |
Example
import Icon from "react-native-vector-icons/Ionicons"
import React, { useEffect, useRef, useState } from "react"
import { ImageBackground, SafeAreaView, StatusBar, Text } from "react-native"
import ReactNativePinView from "react-native-pin-view"
const App = () => {
const pinView = useRef(null)
const [showRemoveButton, setShowRemoveButton] = useState(false)
const [enteredPin, setEnteredPin] = useState("")
const [showCompletedButton, setShowCompletedButton] = useState(false)
useEffect(() => {
if (enteredPin.length > 0) {
setShowRemoveButton(true)
} else {
setShowRemoveButton(false)
}
if (enteredPin.length === 8) {
setShowCompletedButton(true)
} else {
setShowCompletedButton(false)
}
}, [enteredPin])
return (
<>
LUNA/CITY
setEnteredPin(value)}
buttonAreaStyle={{
marginTop: 24,
}}
inputAreaStyle={{
marginBottom: 24,
}}
inputViewEmptyStyle={{
backgroundColor: "transparent",
borderWidth: 1,
borderColor: "#FFF",
}}
inputViewFilledStyle={{
backgroundColor: "#FFF",
}}
buttonViewStyle={{
borderWidth: 1,
borderColor: "#FFF",
}}
buttonTextStyle={{
color: "#FFF",
}}
onButtonPress={key => {
if (key === "custom_left") {
pinView.current.clear()
}
if (key === "custom_right") {
alert("Entered Pin: " + enteredPin)
}
if (key === "three") {
alert("You can't use 3")
}
}}
customLeftButton={showRemoveButton ? : undefined}
customRightButton={showCompletedButton ? : undefined}
/>
>
)
}
export default App
License
This project is licensed under the MIT License - see the LICENSE.md file for details