Easy, convenient, quick-forming PinView component.
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';...
| 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 ( <> 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
This project is licensed under the MIT License - see the LICENSE.md file for details