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)
$ npm install react-native-sms-verifycode --save
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: ''})
}
...
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
/>
import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
verifyCodeLength={5}
containerPaddingVertical={10}
containerPaddingHorizontal={50}
containerBackgroundColor={'#8DC647'}
/>
...
import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
verifyCodeLength={6}
containerPaddingVertical={10}
containerPaddingHorizontal={50}
containerBackgroundColor="#8DC647"
codeViewBorderColor="#000000"
focusedCodeViewBorderColor="#0000FF"
codeViewBorderWidth={3}
codeViewBorderRadius={16}
/>
...
import SMSVerifyCode from 'react-native-sms-verifycode'
...
<SMSVerifyCode
verifyCodeLength={5}
codeFontSize={26}
// codeColor={'#89C047'}
/>
...
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 |
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 |