https://github.com/supervons/react-native-supervons-custom-keyboard

An RN keyboard written in JS, including uppercase and lowercase letters, numbers, and some symbols. Standing on the shoulders of giants.一个用JS写的RN键盘，包含大小写字母，数字以及部分符号。站在巨人的肩膀上。
https://github.com/supervons/react-native-supervons-custom-keyboard

react-native react-native-keyboard rnkeyboard

Last synced: 19 days ago
JSON representation

An RN keyboard written in JS, including uppercase and lowercase letters, numbers, and some symbols. Standing on the shoulders of giants.一个用JS写的RN键盘，包含大小写字母，数字以及部分符号。站在巨人的肩膀上。

• Host: GitHub
• URL: https://github.com/supervons/react-native-supervons-custom-keyboard
• Owner: supervons
• Created: 2020-03-20T07:52:39.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-07T08:00:23.000Z (about 1 year ago)
• Last Synced: 2024-10-12T10:18:34.277Z (about 1 month ago)
• Topics: react-native, react-native-keyboard, rnkeyboard
• Language: JavaScript
• Homepage:
• Size: 806 KB
• Stars: 42
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# react-native-supervons-custom-keyboard

[![NPM Version](https://img.shields.io/npm/v/react-native-supervons-custom-keyboard.svg?style=flat)](https://www.npmjs.com/package/react-native-supervons-custom-keyboard)

[![NPM Version](https://img.shields.io/npm/dm/react-native-supervons-custom-keyboard.svg?style=flat)](https://www.npmjs.com/package/react-native-supervons-custom-keyboard)

English  [简体中文](/README_CN.md "中文介绍")

# github（welcome star━(*｀∀´*)ノ亻!）

https://github.com/supervons/react-native-supervons-custom-keyboard

## Summary

```

Developed based on react-native-security-keyboard,add：

1. Uppercase and lowercase letters

2. Character

3. Key response

4. Switch keyboard type

5. Randomly arrange the keyboard

Thanks yanzhandong source sharing

```

## Preview gif



## Preview



## DEMO

https://github.com/supervons/ExploreRN/blob/master/src/screens/login/index.js

## Getting started

`$ npm install react-native-supervons-custom-keyboard --save`

## Usage

```js

import React, { Component } from 'react';

import { View, Button } from 'react-native';

import { SecurityKeyboardInput } from 'react-native-supervons-custom-keyboard';

```

```jsx

export default class MainPage extends Component {

  constructor(props) {

    super(props);

    this.state = {

      inputValue: ''

    };

  }

  render() {

    return (

      

        

           this.setState({ inputValue: text })}

          />

           alert(this.state.inputValue)} />

        

      

    );

  }

}

```

### Multiple password Input

Please add property： keyName, it's unique .

```jsx

```

### Props

| **Prop** | **Type** | **Description** |

|----------|----------|-----------------|

| `keyName`              | `String` | Keep the keyboard unique, required. |

| `disabled` | `Boolean` | prohibit input, The default is false. |

| `random` | `Boolean` | random keyboard layout, The default is false. |

| `caretHidden` | `Boolean` | hide cursor, The default is false. |

| `secureTextEntry` | `String` |password modal, The default is false.. |

| `placeholderTextColor` | `String` | The color of the text displayed by the placeholder string. |

| `style` | `Object` | custom TextInput external style Style, does not support font Style. |

| `valueStyle` | `Object` | Text content style.|

| `keyboardHeader` | `element` | Customizing the top of the keyboard.|

| `regs` | `Func(value)` | value check, need to return the check after the value out. |

| `onChangeText` | `Func(value)` | Value modified callback. |

| `onFocus` | `Func` | The callback function of the focus. |

| `onBlur` | `Func` | A callback function that loses focus |

### Methods

| **Method** | **Parameter** | **Description** |

|------------|---------------|-----------------|

| `clear` | none | Clear all the content |

| `isFocused` | none |The return value indicates whether the current input box has got the focus. |

| `blur` | none | Lose focus. |

| `focus` | none | Get the focus. |

# TODO-LIST

- [ ] Support typescript

- [ ] Change to hooks