react-native-supervons-custom-keyboard


English 简体中文

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 (


keyName={'password'}
style={{ width: width * 0.96, borderBottomColor: '#939DA6', borderBottomWidth: 1 }}
secureTextEntry={true}
random={true}
valueStyle={{ fontSize: 18, left: 1 }}
secureTextStyle={{ fontSize: 10 }}
keyboardType={'string'}
placeholder={'密码'}
placeholderTextColor={'#CACACB'}
onChangeText={text => this.setState({ inputValue: text })}
/>
alert(this.state.inputValue)} />


);
}
}
`

$3

Please add property： keyName, it's unique .
`jsx
keyName={'password'}/>
keyName={'confirmPassword'}/>
`

$3

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

$3

| 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