Nebulous Puffy Marshmallows

    react-native-sms-verifycode

    2.4.3 • Public • Published

    中文版

    Screen Capture

    Support for entering passwords, compatible with iOS and Android

    android iOS Password
    on Android on iOS use 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: ''})
    }
    ...        
    android iOS all

    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
    />
    android iOS iOS

    Set Container's style

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

    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}
    />
    ...        
    android iOS iOS

    Set code style

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

    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

    Install

    npm i react-native-sms-verifycode

    DownloadsWeekly Downloads

    248

    Version

    2.4.3

    License

    MIT

    Unpacked Size

    41.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • shixiaoquan