Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bunlong/react-native-custom-keyboard-kit
React Native Custom Keyboard - Use your own custom keyboard instead of the system keyboard with React Native Custom Keyboard Kit. Its working on Android and iOS.
https://github.com/bunlong/react-native-custom-keyboard-kit
android custom-keyboard ios keyboard keyboard-component keyboard-input react-native react-native-custom-keyboard
Last synced: about 16 hours ago
JSON representation
React Native Custom Keyboard - Use your own custom keyboard instead of the system keyboard with React Native Custom Keyboard Kit. Its working on Android and iOS.
- Host: GitHub
- URL: https://github.com/bunlong/react-native-custom-keyboard-kit
- Owner: Bunlong
- License: mit
- Created: 2018-10-16T08:23:30.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T19:14:41.000Z (almost 2 years ago)
- Last Synced: 2024-09-30T07:17:34.573Z (2 days ago)
- Topics: android, custom-keyboard, ios, keyboard, keyboard-component, keyboard-input, react-native, react-native-custom-keyboard
- Language: Java
- Homepage:
- Size: 677 KB
- Stars: 91
- Watchers: 6
- Forks: 32
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-custom-keyboard-kit
React Native Custom Keyboard - Use your own custom keyboard instead of the system keyboard with React Native Custom Keyboard Kit. [](https://www.npmjs.com/package/react-native-custom-keyboard-kit) [](https://www.npmjs.com/package/react-native-custom-keyboard-kit) [](http://opensource.org/licenses/MIT).
## Getting started
`$ npm install react-native-custom-keyboard-kit --save`
### Mostly automatic installation
`$ react-native link react-native-custom-keyboard-kit`
### Manual installation
#### Android
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
- Add `import com.reactlibrary.RNCustomKeyboardKitPackage;` to the imports at the top of the file
- Add `new RNCustomKeyboardKitPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':react-native-custom-keyboard-kit'
project(':react-native-custom-keyboard-kit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-custom-keyboard-kit/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
compile project(':react-native-custom-keyboard-kit')
```
#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-custom-keyboard-kit` and add `RNCustomKeyboardKit.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNCustomKeyboardKit.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
## Usage
Register a component as a custom keyboard kit:
```
class MyKeyboard extends Component {
onPress1 = () => {
insertText(this.props.tag, '1');
}
onPress2 = () => {
insertText(this.props.tag, '2');
}
onPress3 = () => {
insertText(this.props.tag, '3');
}
onPress4 = () => {
insertText(this.props.tag, '4');
}
onPress5 = () => {
insertText(this.props.tag, '5');
}
onPress6 = () => {
insertText(this.props.tag, '6');
}
onPress7 = () => {
insertText(this.props.tag, '7');
}
onPress8 = () => {
insertText(this.props.tag, '8');
}
onPress9 = () => {
insertText(this.props.tag, '9');
}
onPressBackSpace = () => {
backSpace(this.props.tag);
}
onPress0= () => {
insertText(this.props.tag, '0');
}
onPressHideKeyboard = () => {
hideKeyboard(this.props.tag);
}
render() {
return (
1
2
3
4
5
6
7
8
9
←
0
↵
);
}
}
register('price', () => MyKeyboard);
```
Use `CustomTextInput` instead of `TextInput`:
```
export default class App extends Component {
state = {
value: ''
}
onChangeText = text => {
this.setState({value: text});
}
render() {
return (
);
}
}
```
### Full usage code
```
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
NativeModules,
TouchableOpacity,
Keyboard,
} from 'react-native';
import {
CustomTextInput,
register,
insertText,
backSpace,
uninstall,
hideKeyboard,
} from 'react-native-custom-keyboard-kit';
class MyKeyboard extends Component {
onPress1 = () => {
insertText(this.props.tag, '1');
}
onPress2 = () => {
insertText(this.props.tag, '2');
}
onPress3 = () => {
insertText(this.props.tag, '3');
}
onPress4 = () => {
insertText(this.props.tag, '4');
}
onPress5 = () => {
insertText(this.props.tag, '5');
}
onPress6 = () => {
insertText(this.props.tag, '6');
}
onPress7 = () => {
insertText(this.props.tag, '7');
}
onPress8 = () => {
insertText(this.props.tag, '8');
}
onPress9 = () => {
insertText(this.props.tag, '9');
}
onPressBackSpace = () => {
backSpace(this.props.tag);
}
onPress0= () => {
insertText(this.props.tag, '0');
}
onPressHideKeyboard = () => {
hideKeyboard(this.props.tag);
}
render() {
return (
1
2
3
4
5
6
7
8
9
←
0
↵
);
}
}
register('price', () => MyKeyboard);
type Props = {};
export default class App extends Component {
state = {
value: ''
}
onChangeText = text => {
this.setState({value: text});
}
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
input: {
backgroundColor: "#ffffff",
borderWidth: 1,
borderColor: "grey",
width: 270,
fontSize: 19,
},
buttonLabel: {
borderWidth: 0.5,
borderColor: "#d6d7da",
padding: 10,
textAlign: "center",
justifyContent: 'center',
alignItems: 'center',
paddingTop: 13,
paddingBottom: 13,
fontSize: 20,
},
button: {
width: "33.333333333%",
},
});
```
You can find the source code [here](./examples/CustomKeyboardKitBasic).
## API
| Function | Description |
|:----------|:----------|
| register(type, type) | Register a custom keyboard type. |
| install(tag, type) | Install custom keyboard to a `TextInput`. Generally you can use CustomTextInput instead of this. But you can use this API to install/change custom keyboard dynamically. |
| uninstall(tag) | Uninstall custom keyboard from a `TextInput` dynamically. |
| insertText(tag, text) | Use in a custom keyboard, insert text to `TextInput`. |
| backSpace(tag) | Use in a custom keyboard, delete selected text or the charactor before cursor. |
| doDelete(tag) | Use in a custom keyboard, delete selected text or the charactor after cursor. |
| moveLeft(tag) | Use in a custom keyboard, move cursor to selection start or move cursor left. |
| moveRight(tag) | Use in a custom keyboard, move cursor to selection end or move cursor right. |
| hideKeyboard(tag) | Hide a custom keyboard. |
| switchSystemKeyboard(tag) | Use in a custom keyboard. Switch to system keyboard. Next time user press or focus on the `TextInput`, custom keyboard will appear again. To keep using system keyboard, call `uninstall` instead. |
| CustomTextInput | Use instead of `TextInput`, this component support all properties of `TextInput`. |
| prop: customKeyboardType: string | Use a registered custom keyboard. |
## Wrap Up
If you think any of the `react-native-custom-keyboard-kit` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
## Contribution
We'd love to have your helping hand on contributions to `react-native-custom-keyboard-kit` by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
## License
The MIT License [](https://opensource.org/licenses/MIT)