Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-otp-input
Advanced tools
react-native-otp-input - npm Package Compare versions
Comparing version 1.0.10 to 1.0.11
32
index.js
@@ -31,8 +31,14 @@ import React, { Component } from 'react' | ||
| componentDidMount() { | ||
| const focusIndex = this.props.code.length ? this.props.code.length - 1 : 0 | ||
| this.setState({ | ||
| digits: this.props.code.split(""), | ||
| }, () => { | ||
| this._focusField(0) | ||
| if (focusIndex === 0) { | ||
| this._focusField(focusIndex) | ||
| } | ||
| }) | ||
| this.checkPinCodeFromClipBoard() | ||
| this._timer = setInterval(() => { | ||
| this.checkPinCodeFromClipBoard() | ||
| }, 400) | ||
| } | ||
@@ -46,12 +52,16 @@ | ||
| checkPinCodeFromClipBoard = () => { | ||
| this._timer = setInterval(() => { | ||
| Clipboard.getString().then(code => { | ||
| if (code.length === this.props.pinCount && (this._code !== code)) { | ||
| this.setState({ digits: code.split("") }) | ||
| } | ||
| this._code = code | ||
| }).catch(e => { | ||
| }) | ||
| }, 1000) | ||
| Clipboard.getString().then(code => { | ||
| if (this._hasCheckedCode && code.length === this.props.pinCount && (this._code !== code)) { | ||
| this.setState({ | ||
| digits: code.split(""), | ||
| }, () => { | ||
| this._blurAllFields() | ||
| }) | ||
| } | ||
| this._code = code | ||
| this._hasCheckedCode = true | ||
| }).catch(e => { | ||
| }) | ||
| } | ||
@@ -95,3 +105,3 @@ | ||
| return ( | ||
| <View pointerEvents="none"> | ||
| <View pointerEvents="none" key={index + "view"}> | ||
| <TextInput | ||
@@ -98,0 +108,0 @@ underlineColorAndroid='rgba(0,0,0,0)' |
| { | ||
| "name": "react-native-otp-input", | ||
| "version": "1.0.10", | ||
| "version": "1.0.11", | ||
| "description": "A tiny JS library which provides an elegant UI for user to input one time passcode (OTP). It features robust checks to handle edge cases for the highly volatile user inputs. We provide default UI but you can customize the appearance as you like.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -1,69 +0,3 @@ | ||
| ![react-native-otp-input] | ||
| # react-native-otp-input | ||
| **react-native-otp-input** is a tiny JS library which provides an elegant UI for user to input one time passcode (OTP). It features robust checks to handle edge cases for the highly volatile user gestures. We provide default UI but you can customize the appearance as you like. | ||
|  | ||
| ## Installation | ||
| `npm install --save react-native-otp-input` | ||
| or | ||
| `yarn add react-native-otp-input` | ||
| ## Dependencies | ||
| It does not have dependencies. | ||
| ## Basic Usage | ||
| ``` | ||
| import OTPInputView from 'react-native-otp-input' | ||
| <OTPInputView | ||
| style={{width: '80%', height: 200}} | ||
| pinCount={4} | ||
| code={this.state.code} | ||
| codeInputFieldStyle={styles.underlineStyleBase} | ||
| codeInputHighlightStyle={styles.underlineStyleHighLighted} | ||
| onCodeFilled = {(code => { | ||
| alert(`Code is ${code}, you are good to go!`) | ||
| })} | ||
| /> | ||
| const styles = StyleSheet.create({ | ||
| underlineStyleBase: { | ||
| width: 30, | ||
| height: 45, | ||
| borderWidth: 0, | ||
| borderBottomWidth: 1, | ||
| }, | ||
| underlineStyleHighLighted: { | ||
| borderColor: "#03DAC6", | ||
| }, | ||
| }); | ||
| ``` | ||
| ## Parameters | ||
| | Parameter | required | Description | | ||
| |-------------|----------|-------------| | ||
| | code | NO | The value to be passed to the component. Besides providing an initial value, changing this value will override the user input and reset the focus | | ||
| | pinCount | YES | Number of digits you want | | ||
| | codeInputFieldStyle | NO | The style of the input field which is NOT focused | | ||
| | codeInputHighlightStyle | NO | The style of the input field which is focused | | ||
| | onCodeFilled | NO | callback when the code is done | | ||
| ## Notes | ||
| Although this library is an effort to make pin code input more efficient, it should be noted that the phone verification on mobile OS can be achieved without any text input. On iOS, it can be a single tap on a pin code which the operating system suggests. On Android, the system can validate the code without any user interaction (Automatic SMS Verification). The user input of pin code verification should be considered as the last resort. | ||
| This library already supports the pin code input suggestion on iOS, and it will be functional with React Native 0.58+. For Android, I would suggest to take a look at @Faizal's repo React-Native-OTP-Verify (https://github.com/faizalshap/react-native-otp-verify). It should be straight-forward to use this library along with @Faizal's library, in order to support automatic code verification on Android. | ||
| ## RoadMap | ||
| * [ ] Add some tests | ||
| ## Developers | ||
| The library is developed by TTT stuido. TTT studio is a web and mobile development service provider, proudly operating in Canada. | ||
|  | ||
| I have moved this npm package to TTT studio. If you want to check out new versions. Please go to @TwotallTotems/react-native-otp-input. The github link is [here](https://github.com/Twotalltotems/react-native-otp-input) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by27.27%
14
- Lines of code
- increased by5.08%
186
Worsened metrics
- Total package byte prevSize
- decreased by-8.78%
38982
- Number of lines in readme file
- decreased by-95.65%
3
No dependency changes