react-native-pin-view

by talut

Easy, convenient, quick-forming PinView component.

135 Stars 44 Forks Last release: Not found MIT License 190 Commits 11 Releases

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.

PinView 1

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.