1.0.0 • Published 6 years ago

react-native-sms-verifycode-fix v1.0.0

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

中文版

Screen Capture

this is copy react-native-sms-verifycode(https://github.com/shixiaoquan/react-native-sms-verifycode/blob/master/README-zh.md) and fixed, If there is infringement contact deletion

Support for entering passwords, compatible with iOS and Android

androidiOSPassword
on Androidon iOSuse Password

The design idea is probably like this, showing an excellent hand drawing 🙈 🙈 🙈

design

Installation

$ npm install react-native-sms-verifycode --save

Usage

Basic Usage

Set the callback function when the input is complete, you can get the content input by the user.

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  ref={ref => (this.verifycode = ref)}
  onInputCompleted={this.onInputCompleted}
  containerPaddingHorizontal={30}
/>

onInputCompleted = (text) => {
	Alert.alert(
	  text,
	  '本次输入的验证码',
	  [
	  	{
	      text: '确定',
	    },
	  ]
	)
}

reset = () => {
	this.verifycode.reset()
	this.setState({codeText: ''})
}
...        
androidiOSall

Advanced Usage

Set the length of the verification code

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={4} // Set any number as needed, type must be number
/>
androidiOSiOS

Set Container's style

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={5}
  containerPaddingVertical={10}
  containerPaddingHorizontal={50}
  containerBackgroundColor={'#8DC647'}
/>
...        
androidandroidiOS

Set code view style

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={6}
  containerPaddingVertical={10}
  containerPaddingHorizontal={50}
  containerBackgroundColor="#8DC647"
  codeViewBorderColor="#000000"
  focusedCodeViewBorderColor="#0000FF"
  codeViewBorderWidth={3}
  codeViewBorderRadius={16}
/>
...        
androidiOSiOS

Set code style

import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
  verifyCodeLength={5}
  codeFontSize={26}
  // codeColor={'#89C047'}
/>
...        
androidiOSiOS

Properties

PropPropTypeDefault ValueisRequiredDescription
autoFocusboolfalseNOWhether to automatically get the focus by default
verifyCodeLengthnumber6NOlength of the verification code
containerStyleobjectnullNOset container style
containerPaddingVerticalnumber0NOcontainer's paddingVertical
containerPaddingLeftnumber0NOset container paddingLeft
containerPaddingRightnumber0NOset container paddingRight
containerPaddingHorizontalnumberAutomatic calculation based on the length of the verification codeNOcontainer's paddingHorizontal
containerPaddingLeftnumber0NOset container paddingLeft
containerPaddingRightnumber0NOset container paddingRight
containerBackgroundColorstring#FDFFFDNOcontainer's backgroundColor
codeViewStyleobjectnullNOset code view style
codeViewWidthnumberAutomatic calculation based on the length of the verification codeNOwidth of code view
codeViewBorderColorstringgreyNOcolor of code view border
focusedCodeViewBorderColorstring#1192F6NOThe color of the currently focused text box
codeViewBorderWidthnumber1NOwidth of code view border
codeViewBorderRadiusnumber5NOradius of code view border
codeViewBackgroundColorstringdefaultNOcode view background color
codeFontSizenumberdefaultNOcode font size
codeColorstring#222222NOcolor of code
secureTextEntrybooleanfalseNOSet to true when entering a password,default is false
coverStyleobjectnullNOcover style
coverRadiusnumbercodeFontSize / 2NOcover radius
coverColorstringblackNOcover color
warningTitlestringblackNOWhen the input content is not a number, the title of the prompt box
warningContentstringblackNOWhen the input content is not a number, the content of the prompt box
warningButtonTextstringblackNOWhen the input content is not a number, the button text of the prompt box

APIs

NameisRequiredDescription
onInputCompletedNOCallback method when input is complete
resetNOClear the input and set the focus to the first input box, call using ref
blurNOHide the keyboard, call using ref
focusNODisplay keyboard, call using ref