Skip to content

FoundationTV/react-native-on-screen-keyboard

Repository files navigation

React Native On-screen Keyboard

A React Native component onscreen keyboard for React Native that displays an onscreen keyboard and puts the input into a `TextInput` component.

Installation

npm i @junctiontv/react-native-on-screen-keyboard

Usage

import Keyboard from "@junctiontv/react-native-on-screen-keyboard";
...

<Keyboard
  title={title}
  textInput={textInputRef}
  onInput={this.handleInput}
  inputType={inputType}
  keyboardContainerStyle={styles.keyboardContainer}
  keyboardTitleStyle={styles.keyboardTitle}
  keyboardButtonContainerStyle={styles.keyboardButtonContainer}
  keyboardButtonTextStyle={styles.keyboardButtonText}
  keyboardButtonTextPressStyle={styles.keyboardButtonTextPress}
  keyboardButtonStyle={styles.keyboardButton}
  keyboardButtonPressStyle={styles.keyboardButtonPress}
  keyboardButtonWidthMultiplier={{ "2": 2.05, "3": 3.1, "4": 4.15 }}
/>
Prop Type Optional Description
title String ✔️ sets the title of the keyboard
textInput React Ref the reference of the TextInput which is to be attached
onInput Function callback to set the value of the text from the keyboard
inputType String sets the input type of the keyboard. Currently only textEmailAddress, textPassword and textSearch are supported
keyboardContainerStyle Object ✔️ style to set the style for the keyboard container
keyboardTitleStyle Object ✔️ style to set the style for the keyboard title
keyboardButtonContainerStyle Object ✔️ style to set the style for the keyboard buttons container
keyboardButtonTextStyle Object ✔️ style to set the style for the keyboard buttons text in unpressed state
keyboardButtonTextPressStyle Object ✔️ style to set the style for the keyboard buttons text in pressed state
keyboardButtonStyle Object ✔️ style to set the style for the keyboard buttons in unpressed state
keyboardButtonPressStyle Object ✔️ style to set the style for the keyboard buttons in pressed state
keyboardButtonWidthMultiplier Object ✔️ sets the amount of multiplier of the keys with the longer widths

Contributing

All contributions including new features, requests, bug fixes are open to everyone. Feel free to open a PR!

License

React Native On-screen Keyboard is MIT licensed.