feat: update to use expo clipboard

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.

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<InputProps, OTPInputViewState> {
@@ -91,23 +91,38 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
     }
 
     checkPinCodeFromClipBoard = () => {
-        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

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 <becky.wu@ttt.studio> (https://github.com/BeckyWu220)",
-    "Felipe Peña <felipe@penya.cl> (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"
   }
 }

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"