@muyoui/react-native-supervons-custom-keyboard v1.4.5

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

Methods