diff --git a/README.md b/README.md index c4d3eae..4fff466 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ # React Native OTP Input +Fork from: TTT Studio (https://ttt.studio) + ![Tests](https://github.com/Twotalltotems/react-native-otp-input/workflows/Tests/badge.svg) **@twotalltotems/react-native-otp-input** is a tiny Javascript library which provides an elegant UI for the end user to input one time passcode (OTP). It handles the input suggestion on iOS when the OTP SMS is received. For Android, it will autofill when the user presses the copy button on the SMS notification bar. It also features a carefully crafted flow to handle edge cases for volatile user gestures. We provide default UI, but you can always customize the appearance as you like. diff --git a/index.tsx b/index.tsx index 6c56ef8..56a08da 100644 --- a/index.tsx +++ b/index.tsx @@ -2,9 +2,9 @@ import { InputProps, OTPInputViewState } from '@twotalltotems/react-native-otp-input'; import React, { Component } from 'react' import { View, TextInput, TouchableWithoutFeedback, Keyboard, Platform, I18nManager, EmitterSubscription, } from 'react-native' -import Clipboard from '@react-native-community/clipboard'; import styles from './styles' import { isAutoFillSupported } from './helpers/device' +import * as Clipboard from 'expo-clipboard'; import { codeToArray } from './helpers/codeToArray' export default class OTPInputView extends Component { @@ -91,23 +91,38 @@ export default class OTPInputView extends Component { - const { pinCount, onCodeFilled } = this.props - const regexp = new RegExp(`^\\d{${pinCount}}$`) - Clipboard.getString().then(code => { - if (this.hasCheckedClipBoard && regexp.test(code) && (this.clipBoardCode !== code)) { - this.setState({ - digits: code.split(""), - }, () => { - this.blurAllFields() - this.notifyCodeChanged() - onCodeFilled && onCodeFilled(code) - }) - } - this.clipBoardCode = code - this.hasCheckedClipBoard = true - }).catch(() => { - }) - } + const { pinCount, onCodeFilled } = this.props; + const regexp = new RegExp(`^\\d{${pinCount}}$`); + + Clipboard.getStringAsync() + .then(code => { + if (!code) { + console.log('Clipboard is empty or not accessible'); + return; + } + + if (this.hasCheckedClipBoard && regexp.test(code) && (this.clipBoardCode !== code)) { + this.setState( + { + digits: code.split(""), + }, + () => { + this.blurAllFields(); + this.notifyCodeChanged(); + if (onCodeFilled) { + onCodeFilled(code); + } + } + ); + } + + this.clipBoardCode = code; + this.hasCheckedClipBoard = true; + }) + .catch(error => { + console.error('Error accessing clipboard:', error); + }); + }; private handleChangeText = (index: number, text: string) => { const { onCodeFilled, pinCount } = this.props diff --git a/package.json b/package.json index 00fb01e..a588200 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@twotalltotems/react-native-otp-input", + "name": "@vinipachecov/react-native-otp-input", "version": "1.3.11", "description": "is a tiny JS library for one time passcode (OTP). Supports smart input suggestion on iOS and code autofill on Android (it will be filled when you press the copy button on the SMS notification bar)", "main": "./dist/index.js", @@ -31,7 +31,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/Twotalltotems/react-native-otp-input.git" + "url": "git+https://github.com/vinipachecov/react-native-otp-input.git" }, "keywords": [ "react-native", @@ -47,9 +47,8 @@ "verification" ], "author": "TTT Studio (https://ttt.studio)", - "contributors": [ - "Becky Wu (https://github.com/BeckyWu220)", - "Felipe Peña (http://felipe.penya.cl)" + "contributors": [ + "Vinicius Vieira" ], "license": "MIT", "devDependencies": { @@ -70,6 +69,6 @@ "typescript": "^3.8.3" }, "dependencies": { - "@react-native-community/clipboard": "^1.2.2" + "expo-clipboard": "^6.0.3" } } diff --git a/yarn.lock b/yarn.lock index f826a0c..ceb0f1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2685,6 +2685,11 @@ expect@^25.1.0: jest-message-util "^25.1.0" jest-regex-util "^25.1.0" +expo-clipboard@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/expo-clipboard/-/expo-clipboard-6.0.3.tgz#dfea74d4a004dce59ecefd063d6fb9f1c356a03f" + integrity sha512-RIKDsuHkYfaspifbFpVC8sBVFKR05L7Pj7mU2/XkbrW9m01OBNvdpGraXEMsTFCx97xMGsZpEw9pPquL4j4xVg== + extend-shallow@^1.1.2: version "1.1.4" resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"