Skip to content

Commit 3e62411

Browse files
author
Luke Farrell
committed
fix(docs): remove maintenance warning
1 parent 03afbf6 commit 3e62411

File tree

2 files changed

+75
-70
lines changed

2 files changed

+75
-70
lines changed

‎README.md‎

Lines changed: 74 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
[![npm licence](http://img.shields.io/npm/l/react-native-awesome-pin.svg?style=flat-square)](https://npmjs.org/package/react-native-awesome-pin)
55
[![npm downloads](http://img.shields.io/npm/dt/react-native-awesome-pin.svg?style=flat-square)](https://npmjs.org/package/react-native-awesome-pin)
66

7-
**This repository is no longer actively maintained. It has been extracted into two other packages to be more reusable: [react-native-pins](https://github.com/lukebrandonfarrell/react-native-pins) and [react-native-screen-keyboard](https://github.com/lukebrandonfarrell/react-native-screen-keyboard)**.
8-
97
A highly interactive and customizable PIN code screen for React Native.
108

119
- Plug and play PIN screen with dozens of props (can be themed to suit your brand).
@@ -18,6 +16,7 @@ A highly interactive and customizable PIN code screen for React Native.
1816
## Install
1917

2018
To get started install via npm:
19+
2120
```sh
2221
npm install react-native-awesome-pin --save
2322
```
@@ -30,11 +29,13 @@ The `<PinScreen />` will take up the full view. It is a plug and play component.
3029
logo, tagline, background colour, callback function and start verifying PINs.
3130

3231
Import:
32+
3333
```js
34-
import { PinScreen } from 'react-native-awesome-pin';
34+
import { PinScreen } from "react-native-awesome-pin";
3535
```
3636

3737
Then add it to your code:
38+
3839
```js
3940
<PinScreen
4041
onRef={ ref => (this.pinScreen = ref) }
@@ -51,14 +52,14 @@ recievePin(pin){
5152
```
5253

5354
You need to add a ref to your PinScreen, this allows you to throw an error from the
54-
parent component when a PIN is incorrect. Errors can be thrown using the `throwError(message)`
55-
method. Keyboard errors can be cleared using `clearError()`
55+
parent component when a PIN is incorrect. Errors can be thrown using the `throwError(message)`
56+
method. Keyboard errors can be cleared using `clearError()`
5657

5758
```js
5859
recievePin(pin){
5960
// Clear error on interaction
6061
this.pinScreen.clearError();
61-
62+
6263
if(pin != '56771'){
6364
this.pinScreen.throwError('Your PIN is incorrect');
6465
}
@@ -69,15 +70,17 @@ recievePin(pin){
6970

7071
<img src="https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-awesome-pin/keyboard.png" width="50%" /><br />
7172

72-
The on-screen keyboard can be used separately if you do not want to use the plug
73-
and play `<PinScreen />` component.
73+
The on-screen keyboard can be used separately if you do not want to use the plug
74+
and play `<PinScreen />` component.
7475

7576
Import:
77+
7678
```js
77-
import { PinKeyboard } from 'react-native-awesome-pin';
79+
import { PinKeyboard } from "react-native-awesome-pin";
7880
```
7981

8082
Then add it to your code:
83+
8184
```js
8285
<PinKeyboard
8386
onRef={ref => (this.keyboard = ref)}
@@ -97,21 +100,23 @@ keyboard displaying the given error message. The style of the popup can be custo
97100

98101
<img src="https://raw.githubusercontent.com/LukeBrandonFarrell/open-source-images/master/react-native-awesome-pin/pins.png" width="50%" /><br />
99102

100-
The PIN input circles can be used separately if you do not want to use the plug
101-
and play `<PinScreen />` component. They come with a shake animation and configurable
103+
The PIN input circles can be used separately if you do not want to use the plug
104+
and play `<PinScreen />` component. They come with a shake animation and configurable
102105
device vibration.
103106

104107
Import:
108+
105109
```js
106-
import { PinInput } from 'react-native-awesome-pin';
110+
import { PinInput } from "react-native-awesome-pin";
107111
```
108112

109113
Then add it to your code:
114+
110115
```js
111116
<PinInput
112-
onRef={ref => (this.pins = ref)}
113-
numberOfPins={5}
114-
numberOfPinsActive={2}
117+
onRef={(ref) => (this.pins = ref)}
118+
numberOfPins={5}
119+
numberOfPinsActive={2}
115120
/>
116121
```
117122

@@ -123,74 +128,74 @@ will be fired when the animation is complete. See props below.
123128

124129
#### PinScreen
125130

126-
The `<PinScreen />` is a great plug and play solution for a PIN screen.
127-
128-
| Prop | Type | Optional | Default | Description |
129-
| --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |
130-
| onRef | string | No | | onRef allows you to call the `throwError(message)` method. |
131-
| keyDown | string | No | | Callback function triggered when a key is pressed. Returns the current PIN value. |
132-
| tagline | string | Yes | 'Enter your PIN' | Tagline which sits above the PINS. |
133-
| logo | object | Yes | | Logo to place at top of screen. |
134-
| numberOfPins | number | Yes | 5 | Number of pins to render. |
135-
| keyVibration | bool | Yes | true | Should vibration be enabled for key press. |
136-
| shakeVibration | bool | Yes | true | Should vibration be enabled for shake. |
137-
| headerBackgroundColor | string | Yes | #e2e2e2 | Header colour for the SafeAreaView. |
138-
| footerBackgroundColor | string | Yes | #fff | Footer colour for the SafeAreaView. |
139-
| ItemFooter | element | Yes | | A footer component to render below the PinScreen. |
140-
| containerStyle | object | Yes | See PinScreen.js | Style applied to the container. Background colour can be set here. |
141-
| logoStyle | object | Yes | | Style applied to your logo. |
142-
| taglineStyle | object | Yes | See PinScreen.js | Style applied to the tagline. |
143-
| pinContainerStyle | object | Yes | See PinInput.js | Style applied to PINS container. |
144-
| pinStyle | object | Yes | See PinInput.js | Style applied to each circle PIN. |
145-
| pinActiveStyle | object | Yes | See PinInput.js | Style applied to each circle PIN when it is active. |
146-
| keyboardStyle | object | Yes | See PinKeyboard.js | Style applied to the keyboard. |
147-
| keyboardDisabledStyle | object | Yes | See PinKeyboard.js | Style applied when the keyboard is disabled. |
148-
| keyStyle | object | Yes | See PinKeyboard.js | Style applied to each key on the keyboard. |
149-
| keyTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside each key. |
150-
| keyImageStyle | object | Yes | See PinKeyboard.js | Style applied to image in a key. If an image is passed. |
151-
| errorStyle | object | Yes | See PinKeyboard.js | Style applied to popup error. Can set the background colour here. |
152-
| errorTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside the popup error. |
131+
The `<PinScreen />` is a great plug and play solution for a PIN screen.
132+
133+
| Prop | Type | Optional | Default | Description |
134+
| --------------------- | ------- | -------- | ------------------ | --------------------------------------------------------------------------------- |
135+
| onRef | string | No | | onRef allows you to call the `throwError(message)` method. |
136+
| keyDown | string | No | | Callback function triggered when a key is pressed. Returns the current PIN value. |
137+
| tagline | string | Yes | 'Enter your PIN' | Tagline which sits above the PINS. |
138+
| logo | object | Yes | | Logo to place at top of screen. |
139+
| numberOfPins | number | Yes | 5 | Number of pins to render. |
140+
| keyVibration | bool | Yes | true | Should vibration be enabled for key press. |
141+
| shakeVibration | bool | Yes | true | Should vibration be enabled for shake. |
142+
| headerBackgroundColor | string | Yes | #e2e2e2 | Header colour for the SafeAreaView. |
143+
| footerBackgroundColor | string | Yes | #fff | Footer colour for the SafeAreaView. |
144+
| ItemFooter | element | Yes | | A footer component to render below the PinScreen. |
145+
| containerStyle | object | Yes | See PinScreen.js | Style applied to the container. Background colour can be set here. |
146+
| logoStyle | object | Yes | | Style applied to your logo. |
147+
| taglineStyle | object | Yes | See PinScreen.js | Style applied to the tagline. |
148+
| pinContainerStyle | object | Yes | See PinInput.js | Style applied to PINS container. |
149+
| pinStyle | object | Yes | See PinInput.js | Style applied to each circle PIN. |
150+
| pinActiveStyle | object | Yes | See PinInput.js | Style applied to each circle PIN when it is active. |
151+
| keyboardStyle | object | Yes | See PinKeyboard.js | Style applied to the keyboard. |
152+
| keyboardDisabledStyle | object | Yes | See PinKeyboard.js | Style applied when the keyboard is disabled. |
153+
| keyStyle | object | Yes | See PinKeyboard.js | Style applied to each key on the keyboard. |
154+
| keyTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside each key. |
155+
| keyImageStyle | object | Yes | See PinKeyboard.js | Style applied to image in a key. If an image is passed. |
156+
| errorStyle | object | Yes | See PinKeyboard.js | Style applied to popup error. Can set the background colour here. |
157+
| errorTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside the popup error. |
153158

154159
#### PinKeyboard
155160

156161
The `<PinKeyboard />` uses two arrays to allow you to set keys and define custom functions for each key. This is not the most fine-tune solution and will be upgraded
157-
in the future.
158-
159-
| Prop | Type | Optional | Default | Description |
160-
| --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |
161-
| onRef | string | No | | onRef allows you to call the `throwError(message)` method. |
162-
| keyDown | string | No | | Callback function triggered when a key is pressed. Returns the key value. |
163-
| keyboard | array | Yes | See PinKeyboard.js | 4 x 3 matrix containing the value for each key. Image or text. |
164-
| keyboardFunc | array | Yes | See PinKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. |
165-
| keyboardStyle | object | Yes | See PinKeyboard.js | Style applied to the keyboard. |
166-
| keyboardDisabledStyle | object | Yes | See PinKeyboard.js | Style applied when the keyboard is disabled. |
167-
| keyStyle | object | Yes | See PinKeyboard.js | Style applied to each key on the keyboard. |
168-
| keyTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside each key. |
169-
| keyImageStyle | object | Yes | See PinKeyboard.js | Style applied to image in a key. If an image is passed. |
170-
| errorStyle | object | Yes | See PinKeyboard.js | Style applied to popup error. Can set the background colour here. |
171-
| errorTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside the popup error. |
162+
in the future.
163+
164+
| Prop | Type | Optional | Default | Description |
165+
| --------------------- | ------ | -------- | ------------------ | --------------------------------------------------------------------------------- |
166+
| onRef | string | No | | onRef allows you to call the `throwError(message)` method. |
167+
| keyDown | string | No | | Callback function triggered when a key is pressed. Returns the key value. |
168+
| keyboard | array | Yes | See PinKeyboard.js | 4 x 3 matrix containing the value for each key. Image or text. |
169+
| keyboardFunc | array | Yes | See PinKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. |
170+
| keyboardStyle | object | Yes | See PinKeyboard.js | Style applied to the keyboard. |
171+
| keyboardDisabledStyle | object | Yes | See PinKeyboard.js | Style applied when the keyboard is disabled. |
172+
| keyStyle | object | Yes | See PinKeyboard.js | Style applied to each key on the keyboard. |
173+
| keyTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside each key. |
174+
| keyImageStyle | object | Yes | See PinKeyboard.js | Style applied to image in a key. If an image is passed. |
175+
| errorStyle | object | Yes | See PinKeyboard.js | Style applied to popup error. Can set the background colour here. |
176+
| errorTextStyle | object | Yes | See PinKeyboard.js | Style applied to the text inside the popup error. |
172177

173178
#### PinInput
174179

175-
| Prop | Type | Optional | Default | Description |
176-
| --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |
177-
| onRef | any | No | | onRef allows you to call the `shake()` method. |
178-
| numberOfPins | number | Yes | 5 | Number of pins to render. |
179-
| numberOfPinsActive | number | Yes | 0 | Number of active pins. You can pass the `pin.length` here. |
180-
| vibration | bool | Yes | true | Should vibration be enabled on shake? |
181-
| animationShakeCallback | func | Yes | | A callback triggered when the pin shake animation has finished. |
182-
| containerStyle | object | Yes | See PinInput.js | Style applied to PINS container. |
183-
| pinStyle | object | Yes | See PinInput.js | Style applied to each circle PIN. |
184-
| pinActiveStyle | object | Yes | See PinInput.js | Style applied to each circle PIN when it is active. |
180+
| Prop | Type | Optional | Default | Description |
181+
| ---------------------- | ------ | -------- | --------------- | --------------------------------------------------------------- |
182+
| onRef | any | No | | onRef allows you to call the `shake()` method. |
183+
| numberOfPins | number | Yes | 5 | Number of pins to render. |
184+
| numberOfPinsActive | number | Yes | 0 | Number of active pins. You can pass the `pin.length` here. |
185+
| vibration | bool | Yes | true | Should vibration be enabled on shake? |
186+
| animationShakeCallback | func | Yes | | A callback triggered when the pin shake animation has finished. |
187+
| containerStyle | object | Yes | See PinInput.js | Style applied to PINS container. |
188+
| pinStyle | object | Yes | See PinInput.js | Style applied to each circle PIN. |
189+
| pinActiveStyle | object | Yes | See PinInput.js | Style applied to each circle PIN when it is active. |
185190

186191
## Contributing
187192

188193
If you want to issue a PR, go ahead ;)
189194

190195
## Authors
191196

192-
* [**Luke Brandon Farrell**](https://lukebrandonfarrell.com/) - *Author*
193-
* [**Redu**](https://redu.co.uk/) - *Organization*
197+
- [**Luke Brandon Farrell**](https://lukebrandonfarrell.com/) - _Author_
198+
- [**Redu**](https://redu.co.uk/) - _Organization_
194199

195200
## License
196201

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-awesome-pin",
3-
"version": "1.3.0",
3+
"version": "1.3.1",
44
"description": "A highly interactive and customisable PIN code screen for React Native.",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)