### [中文版](https://github.com/shixiaoquan/react-native-sms-verifycode/blob/master/README-zh.md) ## Screen Capture ### Support for entering passwords, compatible with iOS and Android |![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/react-native-sms-verifycode-android.gif)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/react-native-sms-verifycode-ios.gif)|![Password](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/react-native-sms-verifycode-password.gif)| |:-:|:-:|:-:| | on Android | on iOS | use Password | ## The design idea is probably like this, showing an excellent hand drawing 🙈 🙈 🙈 ![design](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/design.png) ## Installation ```bash $ 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. ```javascript import SMSVerifyCode from 'react-native-sms-verifycode' ... (this.verifycode = ref)} onInputCompleted={this.onInputCompleted} containerPaddingHorizontal={30} /> onInputCompleted = (text) => { Alert.alert( text, '本次输入的验证码', [ { text: '确定', }, ] ) } reset = () => { this.verifycode.reset() this.setState({codeText: ''}) } ... ``` |![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/normal-android.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/normal-ios.png)|![all](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/normal-all.gif)| |:-:|:-:|:-:| ### Advanced Usage #### Set the length of the verification code ```javascript import SMSVerifyCode from 'react-native-sms-verifycode' ... ``` |![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-number-4.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-number-5.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-number-6.png)| |:-:|:-:|:-:| #### Set Container's style ```javascript import SMSVerifyCode from 'react-native-sms-verifycode' ... ... ``` |![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-container-3.png)|![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-container-1.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-container-2.png)| |:-:|:-:|:-:| #### Set code view style ```javascript import SMSVerifyCode from 'react-native-sms-verifycode' ... ... ``` |![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-border-1.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-border-3.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-border-2.png)| |:-:|:-:|:-:| #### Set code style ```javascript import SMSVerifyCode from 'react-native-sms-verifycode' ... ... ``` |![android](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-textstyle-1.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-textstyle-2.png)|![iOS](https://raw.githubusercontent.com/shixiaoquan/react-native-sms-verifycode/master/screencaptures/change-textstyle-3.png)| |:-:|:-:|:-:| ## **Properties** | Prop | PropType | Default Value |isRequired| Description | |:-:|:-:|:-:|:-:|:-:| | autoFocus | bool | false | NO | Whether to automatically get the focus by default | | verifyCodeLength | number | 6 | NO | length of the verification code | | initialCodes | array | 6 | NO | The default is empty, if set, it will be automatically populated | | containerStyle | object | null | NO | set container style | | containerPaddingVertical | number | 0 | NO | container's paddingVertical | | containerPaddingLeft | number | 0 | NO | set container paddingLeft | | containerPaddingRight | number | 0 | NO | set container paddingRight | | containerPaddingHorizontal | number | Automatic calculation based on the length of the verification code | NO | container's paddingHorizontal | | containerPaddingLeft | number | 0 | NO | set container paddingLeft | | containerPaddingRight | number | 0 | NO | set container paddingRight | | containerBackgroundColor | string | #FDFFFD | NO | container's backgroundColor | | codeViewStyle | object | null | NO | set code view style | | codeViewWidth | number | Automatic calculation based on the length of the verification code | NO | width of code view | | codeViewBorderColor | string | grey | NO | color of code view border | | focusedCodeViewBorderColor | string | #1192F6 | NO | The color of the currently focused text box | | codeViewBorderWidth | number | 1 | NO | width of code view border | | codeViewBorderRadius | number | 5 | NO | radius of code view border | | codeViewBackgroundColor | string | default | NO | code view background color | | codeFontSize | number | default | NO | code font size | | codeColor | string | #222222 | NO | color of code | | secureTextEntry | boolean | false | NO | Set to true when entering a password，default is false | | coverStyle | object | null | NO | cover style | | coverRadius | number | codeFontSize / 2 | NO | cover radius | | coverColor | string | black | NO | cover color | | warningTitle | string | black | NO | When the input content is not a number, the title of the prompt box | | warningContent | string | black | NO | When the input content is not a number, the content of the prompt box | | warningButtonText | string | black | NO | When the input content is not a number, the button text of the prompt box | ## **APIs** | Name | isRequired | Description | |:-:|:-:|:-:| | onInputChangeText | NO | When the text in the input box changes, the method is called, and the latest value is returned. | | onInputCompleted | NO | Callback method when input is complete | | reset | NO | Clear the input and set the focus to the first input box, **call using ref** | | blur | NO | Hide the keyboard, **call using ref** | | focus | NO | Display keyboard, **call using ref** |