react-native-screen-keyboard - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

package.json

 {
   "name": "react-native-screen-keyboard",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "On-screen keyboard with customisable keys and tactile / UI feedback 📱",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-screen-keyboard
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -55,6 +55,7 @@
 | --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |
-| onRef           | any           | No        |                      | onRef allows you to call the `throwError(message)` method.                              |
+| onRef           | any           | Yes        |                      | onRef allows you to call the `throwError(message)` method.                              |
 | onKeyDown         | function      | Yes        |                      | Callback function triggered when a key is pressed. Returns the key value.               |
 | onChange         | function      | Yes        |                      | Callback function triggered when a key is pressed. Returns the full string.               |
 | onCustomKey         | function      | Yes        |                      | Callback function triggered when custom left button is pressed, use with `onChange`               |
+| onPressFunction | string        | Yes       | onPressIn            | Determines which function to call when the user pressed a key. Could be one of the following three functions: `onPress`, `onPressIn` or `onPressOut`. For an explanation how the functions work take a look at the GitHub page from the [react-native-material-ripple](https://github.com/n4kz/react-native-material-ripple#properties) project.
 | keyboard        | array         | Yes       | See VirtualKeyboard.js   | 4 x 3 matrix containing the value for each key. See VirtualKeyboard.js.                     |
@@ -90,10 +91,12 @@ | keyboardFunc    | array         | Yes       | See VirtualKeyboard.js   | 4 x 3 matrix containing custom functions for each key. Pass null for no function.       |
   <tr>
-    <td align="center"><a href="http://www.lukebrandonfarrell.com"><img src="https://avatars3.githubusercontent.com/u/18139277?v=4" width="100px;" alt=""/><br /><sub><b>Luke Brandon Farrell</b></sub></a><br /><a href="https://github.com/aspect-apps/react-native-screen-keyboard/commits?author=lukebrandonfarrell" title="Code">💻</a> <a href="https://github.com/aspect-apps/react-native-screen-keyboard/commits?author=lukebrandonfarrell" title="Documentation">📖</a> <a href="#infra-lukebrandonfarrell" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="http://www.lukebrandonfarrell.com"><img src="https://avatars3.githubusercontent.com/u/18139277?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luke Brandon Farrell</b></sub></a><br /><a href="https://github.com/aspect-apps/react-native-screen-keyboard/commits?author=lukebrandonfarrell" title="Code">💻</a> <a href="https://github.com/aspect-apps/react-native-screen-keyboard/commits?author=lukebrandonfarrell" title="Documentation">📖</a> <a href="#infra-lukebrandonfarrell" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/aikewoody"><img src="https://avatars.githubusercontent.com/u/17004429?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aike van den Brink</b></sub></a><br /><a href="#data-aikewoody" title="Data">🔣</a> <a href="https://github.com/aspect-apps/react-native-screen-keyboard/commits?author=aikewoody" title="Code">💻</a> <a href="https://github.com/aspect-apps/react-native-screen-keyboard/commits?author=aikewoody" title="Documentation">📖</a></td>
   </tr>
 </table>
 
-<!-- markdownlint-enable -->
+<!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

VirtualKeyboard.js

@@ -7,3 +7,3 @@ /**
 import React, { Component } from "react";
-import { View, Image, Text, StyleSheet, Platform, Vibration } from "react-native";
+import { View, Image, Text, StyleSheet, Platform, Vibration, ViewPropTypes } from "react-native";
 import Ripple from "react-native-material-ripple";
@@ -39,3 +39,5 @@ import PropTypes from "prop-types";
   componentDidMount() {
-    this.props.onRef(this);
+    if(this.props.onRef) {
+      this.props.onRef(this);
+    }
   }
@@ -49,3 +51,5 @@
   componentWillUnmount() {
-    this.props.onRef(undefined);
+    if(this.props.onRef) {
+      this.props.onRef(undefined);
+    }
   }
@@ -160,2 +164,3 @@
       onChange,
+      onPressFunction,
       // Style Props
@@ -199,2 +204,7 @@ keyStyle,
     if (!disabled) {
+      const onPress = () => {
+        if(vibration) Vibration.vibrate(50);
+
+        keyboardFuncSet[row][column] ? keyboardFuncSet[row][column]() : keyDown(entity)
+      };
       return (
@@ -205,7 +215,5 @@ <Ripple
               key={column}
-              onPressIn={() => {
-                if(vibration) Vibration.vibrate(50);
-
-                keyboardFuncSet[row][column] ? keyboardFuncSet[row][column]() : keyDown(entity)
-              }}
+              onPress={onPressFunction === 'onPress' ? onPress : undefined}
+              onPressIn={!onPressFunction || onPressFunction === 'onPressIn' ? onPress : undefined}
+              onPressOut={onPressFunction === 'onPressOut' ? onPress : undefined}
               style={[keyContainerStyle, keyDefaultStyle, keyStyle]}
@@ -299,6 +307,7 @@ >
 VirtualKeyboard.propTypes = {
-  onRef: PropTypes.any.isRequired,
+  onRef: PropTypes.any,
   onKeyDown: PropTypes.func,
   onChange: PropTypes.func,
   onCustomKey: PropTypes.func,
+  onPressFunction: PropTypes.oneOf(['onPress', 'onPressIn', 'onPressOut']),
   keyboard: PropTypes.array,
@@ -310,9 +319,9 @@ keyboardFunc: PropTypes.array,
   // Style props
-  keyboardStyle: PropTypes.object,
-  keyboardDisabledStyle: PropTypes.object,
-  keyStyle: PropTypes.object,
-  keyTextStyle: PropTypes.object,
-  keyImageStyle: PropTypes.object,
-  messageStyle: PropTypes.object,
-  messageTextStyle: PropTypes.object
+  keyboardStyle: ViewPropTypes.style,
+  keyboardDisabledStyle: ViewPropTypes.style,
+  keyStyle: ViewPropTypes.style,
+  keyTextStyle: ViewPropTypes.style,
+  keyImageStyle: ViewPropTypes.style,
+  messageStyle: ViewPropTypes.style,
+  messageTextStyle: ViewPropTypes.style
 };
@@ -326,2 +335,3 @@
   keyboardMessageDisplayTime: 3000,
+  onPressFunction: 'onPressIn',
   vibration: false,
@@ -328,0 +338,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

19938

increased by9.07%

Lines of code

381

increased by2.7%

Number of lines in readme file

100

increased by3.09%

No dependency changes