Merge pull request #18 from gtsaousidis/changeKeyboardValues

Change keyboard values

Author: Luke Brandon Farrell

PinKeyboard.js

@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { View, Image, Text, StyleSheet, Platform } from "react-native";
+import { View, Image, Text, StyleSheet, Platform, TouchableOpacity } from "react-native";
 import Ripple from "react-native-material-ripple";
 import PropTypes from "prop-types";
 
@@ -131,6 +131,7 @@ class PinKeyboard extends Component {
     } = styles;
     /** Props */
     const {
+      disableRippleEffect,
       keyDown,
       keyboardFunc,
       keyboardDisabledStyle,
@@ -161,19 +162,22 @@ class PinKeyboard extends Component {
 
     // We want to block keyboard interactions if it has been disabled.
     if (!disabled) {
+      const KeyComponent = disableRippleEffect ? TouchableOpacity : Ripple;
+      const keyProps = {
+        [disableRippleEffect ? 'onPress' : 'onPressIn'] : () =>
+        keyboardFuncSet[row][column]
+          ? keyboardFuncSet[row][column]()
+          : keyDown(entity)
+      }
       return (
-        <Ripple
+        <KeyComponent
           rippleColor={"#000"}
           key={column}
-          onPressIn={() =>
-            keyboardFuncSet[row][column]
-              ? keyboardFuncSet[row][column]()
-              : keyDown(entity)
-          }
+          {...keyProps}
           style={[keyContainerStyle, keyDefaultStyle, keyStyle]}
         >
           {keyJsx}
-        </Ripple>
+        </KeyComponent>
       );
     } else {
       return (
@@ -242,7 +246,8 @@ PinKeyboard.propTypes = {
   keyTextStyle: PropTypes.object,
   keyImageStyle: PropTypes.object,
   errorStyle: PropTypes.object,
-  errorTextStyle: PropTypes.object
+  errorTextStyle: PropTypes.object,
+  disableRippleEffect: PropTypes.bool
 };
 
 PinKeyboard.defaultProps = {

PinScreen.js

@@ -100,7 +100,9 @@ class PinScreen extends Component {
       keyTextStyle,
       keyImageStyle,
       errorStyle,
-      errorTextStyle
+      errorTextStyle,
+      keyboard,
+      disableRippleEffect
     } = this.props;
     /** State */
     const { pin } = this.state;
@@ -151,6 +153,8 @@ class PinScreen extends Component {
             keyImageStyle={keyImageStyle}
             errorStyle={errorStyle}
             errorTextStyle={errorTextStyle}
+            keyboard={keyboard}
+            disableRippleEffect={disableRippleEffect}
           />
           {this.props.ItemFooter}
         </SafeAreaView>
@@ -246,6 +250,8 @@ PinScreen.propTypes = {
   headerBackgroundColor: PropTypes.string,
   footerBackgroundColor: PropTypes.string,
   ItemFooter: PropTypes.element,
+  keyboard: PropTypes.array,
+  disableRippleEffect: PropTypes.bool,
 
   // Style props
   containerStyle: PropTypes.object,

README.md

@@ -148,11 +148,14 @@ The `<PinScreen />` is a great plug and play solution for a PIN screen.
 | containerStyle        | object  | Yes      | See PinScreen.js   | Style applied to the container. Background colour can be set here.                |
 | logoStyle             | object  | Yes      |                    | Style applied to your logo.                                                       |
 | taglineStyle          | object  | Yes      | See PinScreen.js   | Style applied to the tagline.                                                     |
+| pin                   | string  | Yes      |                    | The pin value.                                                                    |
 | pinContainerStyle     | object  | Yes      | See PinInput.js    | Style applied to PINS container.                                                  |
 | pinStyle              | object  | Yes      | See PinInput.js    | Style applied to each circle PIN.                                                 |
 | pinActiveStyle        | object  | Yes      | See PinInput.js    | Style applied to each circle PIN when it is active.                               |
+| keyboard              | array   | Yes      | See PinKeyboard.js | 4 x 3 matrix containing the value for each key. Image or text.                    |
 | keyboardStyle         | object  | Yes      | See PinKeyboard.js | Style applied to the keyboard.                                                    |
 | keyboardDisabledStyle | object  | Yes      | See PinKeyboard.js | Style applied when the keyboard is disabled.                                      |
+| disableRippleEffect   | bool    | Yes      | false              | Disables the ripple effect from the keys.                                         |
 | keyStyle              | object  | Yes      | See PinKeyboard.js | Style applied to each key on the keyboard.                                        |
 | keyTextStyle          | object  | Yes      | See PinKeyboard.js | Style applied to the text inside each key.                                        |
 | keyImageStyle         | object  | Yes      | See PinKeyboard.js | Style applied to image in a key. If an image is passed.                           |
@@ -172,6 +175,7 @@ in the future.
 | keyboardFunc          | array  | Yes      | See PinKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. |
 | keyboardStyle         | object | Yes      | See PinKeyboard.js | Style applied to the keyboard.                                                    |
 | keyboardDisabledStyle | object | Yes      | See PinKeyboard.js | Style applied when the keyboard is disabled.                                      |
+| disableRippleEffect   | bool   | Yes      | false              | Disables the ripple effect from the keys.                                         |
 | keyStyle              | object | Yes      | See PinKeyboard.js | Style applied to each key on the keyboard.                                        |
 | keyTextStyle          | object | Yes      | See PinKeyboard.js | Style applied to the text inside each key.                                        |
 | keyImageStyle         | object | Yes      | See PinKeyboard.js | Style applied to image in a key. If an image is passed.                           |
@@ -218,4 +222,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!