# custom-pin-keyboard
> React Native Pin View Component for Protection
Latest version **0.5.0** (published 2021-01-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install custom-pin-keyboard
pnpm add custom-pin-keyboard
yarn add custom-pin-keyboard
bun add custom-pin-keyboard
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.0 |
| Published | 2021-01-06 |
| First published | 2021-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | lozytskyia |
| Keywords | react-native, pin-view, pin-password, pin-view-password, react-native-pin-view, react pin view, pin view, pinlock, code, react-security-view, react pin, react password, pin, PinView |
## Links
- npm: https://www.npmjs.com/package/custom-pin-keyboard
- Repository: https://github.com/LozytskyiA/custom-pin-keyboard
- Issues: https://github.com/LozytskyiA/custom-pin-keyboard/issues
- npm.io page: https://npm.io/package/custom-pin-keyboard
## Alternatives
- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads
## Recent versions
- 0.5.0 (latest) — 2021-01-06
- 0.4.0 — 2021-01-06
- 0.3.0 — 2021-01-06
- 0.2.0 — 2021-01-06
- 3.0.2 — 2021-01-06
## README
# Custom pin keyboard
## Getting Started
**via Yarn**
```
yarn add custom-pin-keyboard
```
**via NPM**
```
npm install --save custom-pin-keyboard
```
## Basic Usage
```
import PinView from 'custom-pin-keyboard';
...
```
## 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 "custom-pin-keyboard";
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](LICENSE.md) file for details
---
_Source: https://npm.io/package/custom-pin-keyboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._