Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/talut/react-native-pin-view
Easy, convenient, quick-forming PinView component.
https://github.com/talut/react-native-pin-view
Last synced: 2 months ago
JSON representation
Easy, convenient, quick-forming PinView component.
- Host: GitHub
- URL: https://github.com/talut/react-native-pin-view
- Owner: talut
- License: mit
- Created: 2018-06-24T18:38:36.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-02T11:48:48.000Z (11 months ago)
- Last Synced: 2024-03-28T20:28:32.899Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 5.96 MB
- Stars: 173
- Watchers: 5
- Forks: 63
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Lists
- awesome-react-native - react-native-pin-view ★48 - Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android. (Components / UI)
- awesome-reactnative-ui - react-native-pin-view - forming PinView component.|<ul><li>Last updated : This week</li><li>Stars : 85</li><li>Open issues : 3</li></ul>|| (Others)
- awesome-react-native - react-native-pin-view ★48 - Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android. (Components / UI)
- awesome - react-native-pin-view ★48 - Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android. (Components / UI)
- awesome-reactnative-ui - react-native-pin-view - forming PinView component.|<ul><li>Last updated : This week</li><li>Stars : 85</li><li>Open issues : 3</li></ul>|| (Others)
- awesome-react-native - react-native-pin-view ★48 - Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android. (Components / UI)
- awesome-react-native - react-native-pin-view ★48 - Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android. (Components / UI)
- awesome-react-native - react-native-pin-view ★48 - Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android. (Components / UI)
README
# 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.3
You can get codes of this preview from [here](#example)
## 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
```javascript
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 just click to 3")
}
}}
customLeftButton={showRemoveButton ? : undefined}
customRightButton={showCompletedButton ? : undefined}
/>
>
)
}
export default App
```
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details