bunlong / react-native-custom-keyboard-kit Goto Github PK

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.

License: MIT License

Java 66.04% JavaScript 9.99% Objective-C 20.56% Ruby 3.41%

react-native keyboard custom-keyboard keyboard-input keyboard-component ios android react-native-custom-keyboard

react-native-custom-keyboard-kit's Introduction

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. .

Getting started

$ npm install react-native-custom-keyboard-kit --save

Mostly automatic installation

$ react-native link react-native-custom-keyboard-kit

Manual installation

Android

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

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')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
compile project(':react-native-custom-keyboard-kit')
```

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-custom-keyboard-kit and add RNCustomKeyboardKit.xcodeproj
In XCode, in the project navigator, select your project. Add libRNCustomKeyboardKit.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

Usage

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 (
      <View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress1}>
              <Text style={styles.buttonLabel}>
                1
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress2}>
              <Text style={styles.buttonLabel}>
                2
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress3}>
              <Text style={styles.buttonLabel}>
                3
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress4}>
              <Text style={styles.buttonLabel}>
                4
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress5}>
              <Text style={styles.buttonLabel}>
                5
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress6}>
              <Text style={styles.buttonLabel}>
                6
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress7}>
              <Text style={styles.buttonLabel}>
                7
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress8}>
              <Text style={styles.buttonLabel}>
                8
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress9}>
              <Text style={styles.buttonLabel}>
                9
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPressBackSpace}>
              <Text style={styles.buttonLabel}>
                &larr;
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress0}>
              <Text style={styles.buttonLabel}>
                0
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPressHideKeyboard}>
              <Text style={styles.buttonLabel}>
                &crarr;
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

register('price', () => MyKeyboard);

Use CustomTextInput instead of TextInput:

export default class App extends Component<Props> {
  state = {
    value: ''
  }

  onChangeText = text => {
    this.setState({value: text});
  }

  render() {
    return (
      <View style={styles.container}>
        <CustomTextInput
          customKeyboardType="price"
          value={this.state.value}
          onChangeText={this.onChangeText}
          style={styles.input}
        />
      </View>
    );
  }
}

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 (
      <View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress1}>
              <Text style={styles.buttonLabel}>
                1
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress2}>
              <Text style={styles.buttonLabel}>
                2
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress3}>
              <Text style={styles.buttonLabel}>
                3
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress4}>
              <Text style={styles.buttonLabel}>
                4
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress5}>
              <Text style={styles.buttonLabel}>
                5
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress6}>
              <Text style={styles.buttonLabel}>
                6
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress7}>
              <Text style={styles.buttonLabel}>
                7
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress8}>
              <Text style={styles.buttonLabel}>
                8
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress9}>
              <Text style={styles.buttonLabel}>
                9
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPressBackSpace}>
              <Text style={styles.buttonLabel}>
                &larr;
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress0}>
              <Text style={styles.buttonLabel}>
                0
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPressHideKeyboard}>
              <Text style={styles.buttonLabel}>
                &crarr;
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

register('price', () => MyKeyboard);

type Props = {};
export default class App extends Component<Props> {
  state = {
    value: ''
  }

  onChangeText = text => {
    this.setState({value: text});
  }

  render() {
    return (
      <View style={styles.container}>
        <CustomTextInput
          customKeyboardType="price"
          value={this.state.value}
          onChangeText={this.onChangeText}
          style={styles.input}
        />
      </View>
    );
  }
}

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.

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

react-native-custom-keyboard-kit's People

Contributors

Stargazers

Watchers

react-native-custom-keyboard-kit's Issues

Custom System Keyboard

Why not use this code to create a Custom System Keyboard? One that can be used in any app?

https://customkeyboarddetails.blogspot.com/2019/02/using-react-native-in-android-custom.html

Can I just ask if this project is dead or active?

Are there any plans for this?

Update README

Task :react-native-custom-keyboard-kit:verifyReleaseResources FAILED

Task :react-native-custom-keyboard-kit:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':react-native-custom-keyboard-kit:verifyReleaseResources'.

A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
Android resource linking failed
/home/bipulroy/.gradle/caches/transforms-2/files-2.1/a4aa75ad6ccbe3ab81ae94031ca63766/appcompat-1.0.2/res/values-v26/values-v26.xml:5:5-8:13: AAPT: error: resource android:attr/colorError not found.

 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/a4aa75ad6ccbe3ab81ae94031ca63766/appcompat-1.0.2/res/values-v26/values-v26.xml:9:5-12:13: AAPT: error: resource android:attr/colorError not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/a4aa75ad6ccbe3ab81ae94031ca63766/appcompat-1.0.2/res/values-v26/values-v26.xml:13:5-16:13: AAPT: error: style attribute 'android:attr/keyboardNavigationCluster' not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/a4aa75ad6ccbe3ab81ae94031ca63766/appcompat-1.0.2/res/values-v28/values-v28.xml:5:5-8:13: AAPT: error: resource android:attr/dialogCornerRadius not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/a4aa75ad6ccbe3ab81ae94031ca63766/appcompat-1.0.2/res/values-v28/values-v28.xml:9:5-12:13: AAPT: error: resource android:attr/dialogCornerRadius not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:57:5-88:25: AAPT: error: resource android:attr/fontStyle not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:57:5-88:25: AAPT: error: resource android:attr/font not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:57:5-88:25: AAPT: error: resource android:attr/fontWeight not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:57:5-88:25: AAPT: error: resource android:attr/fontVariationSettings not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:57:5-88:25: AAPT: error: resource android:attr/ttcIndex not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:89:5-125:25: AAPT: error: resource android:attr/startX not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:89:5-125:25: AAPT: error: resource android:attr/startY not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:89:5-125:25: AAPT: error: resource android:attr/endX not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:89:5-125:25: AAPT: error: resource android:attr/endY not found.
     
 /home/bipulroy/.gradle/caches/transforms-2/files-2.1/99e2c2cf9508116578d0bb5e82ff59c6/core-1.0.1/res/values/values.xml:126:5-132:25: AAPT: error: resource android:attr/offset not found.

I'm getting Error while using install() method!!!!

I've used the install() method like this

install('MyKeyboard', () => MyKeyboard)

I'm getting an Error on Runtime which is

java.lang.String cannot be cast to java.lang.Double

if I'm using the install() method in the wrong way please correct me.

Thank you

@Bunlong

App hang when multiple custom text input is used in single view due to the registering of custom keyboard to the input multiple time.

Module not working

I am using this module and I need custom keyboardf unctionality but when I install thi module and run in ios I am getting the following error.

Can you tell me how to solve this

How to assign enter key?

Custom Keyboard installed but it crashes the application.

Hi,

I installed the custom keyboard successfully but it crashes and not working. I am having RN version 0.48.

Can you please help regarding the same

Regards
Lovedeep Singh

register function app automatically crashes

When trying to register the custom keyboard class app crashes otherwise app working perfectly without register app shows customKeyboardType="price" shows null.

CustomKeyboard does not work well with KeyboardAvoidingView

I use custom keyboard with KeyboardAvoidingView, but KeyboardAvoidingView does not work. If TextInput on the bottom of the screen, keyboard will cover TextInput. Is there any solution with it?

Custom Keyboard not responding to touch events / and triggers default keyboard on iOS

The custom keyboard on ios doesn't response to touch events, once tapped it closes the keyboard. Also, when triggering the keyboard from text field it also brings up the default ios keyboard.

TypeError: null is not an object (evaluating 'CustomKeyboardKit.install')

This happens when I use the example verbatim on Android.

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 (
      <View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress1}>
              <Text style={styles.buttonLabel}>
                1
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress2}>
              <Text style={styles.buttonLabel}>
                2
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress3}>
              <Text style={styles.buttonLabel}>
                3
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress4}>
              <Text style={styles.buttonLabel}>
                4
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress5}>
              <Text style={styles.buttonLabel}>
                5
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress6}>
              <Text style={styles.buttonLabel}>
                6
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress7}>
              <Text style={styles.buttonLabel}>
                7
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress8}>
              <Text style={styles.buttonLabel}>
                8
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress9}>
              <Text style={styles.buttonLabel}>
                9
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{flexDirection: "row"}}>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPressBackSpace}>
              <Text style={styles.buttonLabel}>
                &larr;
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPress0}>
              <Text style={styles.buttonLabel}>
                0
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.button}>
            <TouchableOpacity onPress={this.onPressHideKeyboard}>
              <Text style={styles.buttonLabel}>
                &crarr;
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

register('price', () => MyKeyboard);

type Props = {};
export default class App extends Component<Props> {
  state = {
    value: ''
  }

  onChangeText = text => {
    this.setState({value: text});
  }

  render() {
    return (
      <View style={styles.container}>
        <CustomTextInput
          customKeyboardType="price"
          value={this.state.value}
          onChangeText={this.onChangeText}
          style={styles.input}
        />
      </View>
    );
  }
}

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%",
  },
});

how to custom keyboard's height?

when i set key height, the total height does not changed, as the pic show:

Try new package !!!

It took me a long time to find the solution, so glad if I could help someone

https://github.com/natuanorg/react-native-natuan-custom-keyboard

Given example is too long

Hey. The MyKeyboard component of the given example is too long. Isn't this a lot better:

class MyKeyboard extends Component {
  onKeyPress = txt => {
    insertText(this.props.tag, txt);
  }
  render() {
    return (
      <View>
        {[['1','2','3'],['4','5','6'],['7','8','9'].['&larr;',0,'&crarr']].map(row => (
          <View style={{flexDirection: "row"}}>
            {row.map(item => (
              <View style={styles.button}>
                <TouchableOpacity onPress={() => this.onKeyPress(item)}>
                  <Text style={styles.buttonLabel}>
                    {item}
                  </Text>
                </TouchableOpacity>
              </View>
            ))}
          </View>
        ))}
      </View>
    )
  }
}

White screen

Did everything. Most of the time I get a white screen. And sometimes I get unregistered keyboard error

ios build failed

Hi,

I installed the module and and linked the library and when I run the ios build fails and shows following error