Need help with react-native-pin-view?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

talut
149 Stars 53 Forks MIT License 195 Commits 1 Opened issues

Description

Easy, convenient, quick-forming PinView component.

Services available

!
?

Need anything else?

Contributors list

# 438,070
Objecti...
CSS
respons...
ghost-t...
40 commits
# 463,224
Vanilla...
vanilla...
selectb...
select-...
20 commits
# 581,052
JavaScr...
14 commits
# 600,581
Java
Objecti...
7 commits
# 414,745
C++
C
2 commits
# 150,311
Vue.js
headles...
mssql
GraphQL
2 commits
# 145,634
Tensorf...
tensorf...
iOS
React N...
1 commit
# 62,579
React N...
React
sidekiq
stripe
1 commit
# 730,784
JavaScr...
1 commit

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.* 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.