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
143 Stars 47 Forks MIT License 195 Commits 0 Opened issues

Description

Easy, convenient, quick-forming PinView component.

Services available

!
?

Need anything else?

Contributors list

# 438,511
Objecti...
CSS
respons...
ghost-t...
40 commits
# 464,203
Vanilla...
vanilla...
selectb...
select-...
20 commits
# 584,167
JavaScr...
14 commits
# 605,793
Java
Objecti...
7 commits
# 410,672
C#
Objecti...
2 commits
# 708,817
JavaScr...
2 commits
# 122,841
tensorf...
node
iOS
React N...
1 commit
# 58,305
React N...
React
HTML
sidekiq
1 commit
# 735,812
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.