Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android, and has only keyboard and input.
You can get codes of this preview from here
via Yarn
yarn add react-native-pin-view
via NPM
npm install --save react-native-pin-view
import PinView from 'react-native-pin-view';
...
<PinView pinLength={6} />
| 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 |
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. |
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 (
<>
<StatusBar barStyle="light-content" />
<SafeAreaView
style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)", justifyContent: "center", alignItems: "center" }}>
<Text
style={{
paddingTop: 24,
paddingBottom: 48,
color: "rgba(255,255,255,0.7)",
fontSize: 48,
}}>
LUNA/CITY
</Text>
<ReactNativePinView
inputSize={32}
ref={pinView}
pinLength={8}
buttonSize={60}
onValueChange={value => 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 just click to 3")
}
}}
customLeftButton={showRemoveButton ? <Icon name={"ios-backspace"} size={36} color={"#FFF"} /> : undefined}
customRightButton={showCompletedButton ? <Icon name={"ios-unlock"} size={36} color={"#FFF"} /> : undefined}
/>
</SafeAreaView>
</>
)
}
export default AppThis project is licensed under the MIT License - see the LICENSE.md file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent