react-native-otp-input - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

index.js

@@ -112,3 +112,14 @@ import React, { Component } from 'react'
         } else {
-            newdigits[index] = text.split("").pop()
+            if (text.length === 0) {
+                if (newdigits.length > 0) {
+                    newdigits = newdigits.slice(0, newdigits.length-1)
+                }
+            } else {
+                text.split("").forEach((value) => {
+                    newdigits[index] = value
+                    index += 1
+                })
+                index -= 1
+            }
+
             this.setState({ digits: newdigits })
@@ -115,0 +126,0 @@ }

package.json

 {
   "name": "react-native-otp-input",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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.",
@@ -19,4 +19,4 @@ "main": "index.js",
   ],
-  "author": "[e-mail]",
+  "author": "Anson Yao, Felipe Pena",
   "license": "MIT"
 }

README.md

 ![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 inputs. We provide default UI but you can customize the appearance as you like. 
+**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.
 
-<a href="https://github.com/ansonyao/react-native-opt-input-anson/blob/master/example/demo.gif"><img src="https://github.com/ansonyao/react-native-opt-input-anson/blob/master/example/demo.gif" title="Demo.gif"/></a>
+![demo.gif](https://github.com/Twotalltotems/react-native-otp-input/blob/master/example/demo.gif)
 
 ## Installation
+`npm install --save react-native-otp-input`
+or
 `yarn add react-native-otp-input`
@@ -21,12 +23,25 @@
 <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!`)
-          })}
-        />
+  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",
+  },
+});
+
 ```
@@ -36,9 +51,9 @@
 
-| Parameter   | Description |
-|-------------|-------------|
-| code        | 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    | Number of digits you want |
-| codeInputFieldStyle  | The style of the input field which is NOT focused |
-| codeInputHighlightStyle | The style of the input field which is focused |
-| onCodeFilled | callback when the code is done |
+| 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 |
 
@@ -52,2 +67,6 @@ ## Notes
 * [ ] 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. 
+
+![ttt-logo.png](https://github.com/Twotalltotems/react-native-otp-input/blob/master/example/ttt-logo.png)

No alert changes

Improved metrics

Total package byte prevSize

217227

increased by2562.1%

Number of package files

10

increased by150%

Lines of code

160

increased by10.34%

Number of lines in readme file

69

increased by38%

No dependency changes