Skip to content

Commit f67a019

Browse files
leonardoballandleonardoballand
authored
feat(keyboard): Add back key customization feature (#35)
* feat: add new prop keyboardCustomBackKey to handle custom <Element />, fix TextInputPropTypes style prop for keyTextStyle * feat: add doc for new prop keyboardCustomBackKey
1 parent 8db9246 commit f67a019

2 files changed

Lines changed: 144 additions & 99 deletions

File tree

‎README.md‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -31,50 +31,51 @@ Then add it to your code:
3131
/>
3232

3333
// Callback function which receives the key pressed
34-
keyDown(key){
35-
// Key pressed
34+
keyDown(key) {
35+
// Key pressed
3636
}
3737
```
3838

39-
The back and custom key will pass a sting, either `"back"` or `"custom"` to the keyDown callback.
39+
The back and custom key will pass a string, either `"back"` or `"custom"` to the keyDown callback.
4040

4141
The `<VirtualKeyboard />` also has a number of functions which can be triggered through refs.
42-
43-
- `back()` this will execute the back action to delete one character.
44-
- `setText(text)` this will set the keyboard text to the given value.
45-
- `displayMessage(message)` this will create a popup above the
46-
keyboard displaying the given a message. The style of the popup can be customized through props.
47-
- `clearMessage()` this will clear the keyboard message dialog.
48-
- `enable()` this will enable the keyboard for input.
49-
- `disable()` this will disable the keyboard.
42+
43+
- `back()` this will execute the back action to delete one character.
44+
- `setText(text)` this will set the keyboard text to the given value.
45+
- `displayMessage(message)` this will create a popup above the
46+
keyboard displaying the given a message. The style of the popup can be customized through props.
47+
- `clearMessage()` this will clear the keyboard message dialog.
48+
- `enable()` this will enable the keyboard for input.
49+
- `disable()` this will disable the keyboard.
5050

5151
#### VirtualKeyboard
5252

5353
The `<VirtualKeyboard />` uses two arrays to allow you to set keys and define custom functions for each key.
5454

55-
| Prop | Type | Optional | Default | Description |
56-
| --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |
57-
| onRef | any | Yes | | onRef allows you to call the `throwError(message)` method. |
58-
| onKeyDown | function | Yes | | Callback function triggered when a key is pressed. Returns the key value. |
59-
| onChange | function | Yes | | Callback function triggered when a key is pressed. Returns the full string. |
60-
| onCustomKey | function | Yes | | Callback function triggered when custom left button is pressed, use with `onChange` |
61-
| 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.
62-
| keyboard | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the value for each key. See VirtualKeyboard.js. |
63-
| keyboardFunc | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. |
64-
| keyboardCustomKeyImage | number | Yes | null | Image for the custom key (bottom left key) |
65-
| keyDisabled | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the disabled value for each key. See VirtualKeyboard.js. |
66-
| keyboardMessageDisplayTime | number | Yes | 3000 | Time in milliseconds for the message dialog to automatically clear. |
67-
| vibration | bool | Yes | false | Key / Tactile vibration enabled |
68-
| keyboardStyle | object | Yes | See VirtualKeyboard.js | Style applied to the keyboard. |
69-
| keyboardDisabledStyle | object | Yes | See VirtualKeyboard.js | Style applied when the keyboard is disabled. |
70-
| keyCustomStyle | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing a custom style for each key. Pass null for default style or to use keyStyle as an override. |
71-
| keyStyle | object | Yes | See VirtualKeyboard.js | Style applied to each key on the keyboard. |
72-
| keyTextStyle | object | Yes | See VirtualKeyboard.js | Style applied to the text inside each key. |
73-
| keyImageStyle | object | Yes | See VirtualKeyboard.js | Style applied to image in a key. If an image is passed. |
74-
| messageStyle | object | Yes | See VirtualKeyboard.js | Style applied to popup error. Can set the background colour here. |
75-
| messageTextStyle| object | Yes | See VirtualKeyboard.js | Style applied to the text inside the popup error.
76-
| messageTestID| string | Yes | "MessageContainer" | TestID belonging to the view component of the popup error.
77-
| messageTextTestID| string | Yes | "Message" | TestID belonging to the text component inside the popup error.
55+
| Prop | Type | Optional | Default | Description |
56+
|----------------------------|----------|----------|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
57+
| onRef | any | Yes | | onRef allows you to call the `throwError(message)` method. |
58+
| onKeyDown | function | Yes | | Callback function triggered when a key is pressed. Returns the key value. |
59+
| onChange | function | Yes | | Callback function triggered when a key is pressed. Returns the full string. |
60+
| onCustomKey | function | Yes | | Callback function triggered when custom left button is pressed, use with `onChange` |
61+
| 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. |
62+
| keyboard | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the value for each key. See VirtualKeyboard.js. |
63+
| keyboardFunc | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing custom functions for each key. Pass null for no function. |
64+
| keyboardCustomKeyImage | number | Yes | null | Image for the custom key (bottom left key) |
65+
| keyboardCustomBackKey | element | Yes | backAsset | Element for the back key (bottom right key) |
66+
| keyDisabled | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing the disabled value for each key. See VirtualKeyboard.js. |
67+
| keyboardMessageDisplayTime | number | Yes | 3000 | Time in milliseconds for the message dialog to automatically clear. |
68+
| vibration | bool | Yes | false | Key / Tactile vibration enabled |
69+
| keyboardStyle | object | Yes | See VirtualKeyboard.js | Style applied to the keyboard. |
70+
| keyboardDisabledStyle | object | Yes | See VirtualKeyboard.js | Style applied when the keyboard is disabled. |
71+
| keyCustomStyle | array | Yes | See VirtualKeyboard.js | 4 x 3 matrix containing a custom style for each key. Pass null for default style or to use keyStyle as an override. |
72+
| keyStyle | object | Yes | See VirtualKeyboard.js | Style applied to each key on the keyboard. |
73+
| keyTextStyle | object | Yes | See VirtualKeyboard.js | Style applied to the text inside each key. |
74+
| keyImageStyle | object | Yes | See VirtualKeyboard.js | Style applied to image in a key. If an image is passed. |
75+
| messageStyle | object | Yes | See VirtualKeyboard.js | Style applied to popup error. Can set the background colour here. |
76+
| messageTextStyle | object | Yes | See VirtualKeyboard.js | Style applied to the text inside the popup error. |
77+
| messageTestID | string | Yes | "MessageContainer" | TestID belonging to the view component of the popup error. |
78+
| messageTextTestID | string | Yes | "Message" | TestID belonging to the text component inside the popup error. |
7879

7980
## Contributing
8081

@@ -108,4 +109,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
108109

109110
<!-- ALL-CONTRIBUTORS-LIST:END -->
110111

111-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
112+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

0 commit comments

Comments
 (0)