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

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { SecurityKeyboardInput } from 'react-native-supervons-custom-keyboard';

export default class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
        <View style={{ height: 150 }}>
          <SecurityKeyboardInput
            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 })}
          />
          <Button title={'outPut'} onPress={() => alert(this.state.inputValue)} />
        </View>
      </View>
    );
  }
}

Multiple password Input

Please add property： keyName, it's unique .

<SecurityKeyboardInput
 keyName={'password'}/>
<SecurityKeyboardInput
 keyName={'confirmPassword'}/>

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