From 42a7f3be955481e8a2a9315e5f44c31a906aed9d Mon Sep 17 00:00:00 2001 From: Vinicius Vieira Date: Fri, 25 Oct 2024 18:19:30 -0300 Subject: [PATCH 1/2] feat: update to use expo clipboard --- index.tsx | 51 +++++++++++++++++++++++++++++++++------------------ package.json | 2 +- yarn.lock | 5 +++++ 3 files changed, 39 insertions(+), 19 deletions(-) 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..f1497d2 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,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" From 041d0044d5601857f94d328e42ca7898c57692b9 Mon Sep 17 00:00:00 2001 From: Vinicius Vieira Date: Fri, 25 Oct 2024 18:27:35 -0300 Subject: [PATCH 2/2] chore: update lib --- README.md | 2 ++ package.json | 9 ++++----- 2 files changed, 6 insertions(+), 5 deletions(-) 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/package.json b/package.json index f1497d2..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": {