Skip to content

Issue with depreceated '@react-native-community/clipboard' package #237

@shuklaharshit

Description

@shuklaharshit

Hi! 👋

Firstly, thanks for your work on this project! 🙂

The package used depreceated import Clipboard from '@react-native-community/clipboard';

Here is the diff that solved my problem:

Note : Test IDs are not required to fix this issue its optional

diff --git a/node_modules/@twotalltotems/react-native-otp-input/dist/index.js b/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
index 71580b8..788bcdf 100644
--- a/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
+++ b/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { View, TextInput, TouchableWithoutFeedback, Keyboard, Platform, I18nManager, } from 'react-native';
-import Clipboard from '@react-native-community/clipboard';
+import Clipboard from '@react-native-clipboard/clipboard';
 import styles from './styles';
 import { isAutoFillSupported } from './helpers/device';
 import { codeToArray } from './helpers/codeToArray';
@@ -125,13 +125,14 @@ export default class OTPInputView extends Component {
             }
         };
         this.renderOneInputField = (_, index) => {
+            const { testID } = this.props;
             const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props;
             const { defaultTextFieldStyle } = styles;
             const { selectedIndex, digits } = this.state;
             const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props;
             const { color: defaultPlaceholderTextColor } = { ...defaultTextFieldStyle, ...codeInputFieldStyle };
             return (<View pointerEvents="none" key={index + "view"} testID="inputSlotView">
-                <TextInput testID="textInput" underlineColorAndroid='rgba(0,0,0,0)' style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [defaultTextFieldStyle, codeInputFieldStyle]} ref={ref => { this.fields[index] = ref; }} onChangeText={text => {
+                <TextInput testID={`${testID??"OTP_Input"}_${index}}`} accessibilityLabel={`${testID??"OTP_Input"}_${index}}`} underlineColorAndroid='rgba(0,0,0,0)' style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [defaultTextFieldStyle, codeInputFieldStyle]} ref={ref => { this.fields[index] = ref; }} onChangeText={text => {
                 this.handleChangeText(index, text);
             }} onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key); }} value={!clearInputs ? digits[index] : ""} keyboardAppearance={keyboardAppearance} keyboardType={keyboardType} textContentType={isAutoFillSupported ? "oneTimeCode" : "none"} key={index} selectionColor={selectionColor} secureTextEntry={secureTextEntry} editable={editable} placeholder={placeholderCharacter} placeholderTextColor={placeholderTextColor || defaultPlaceholderTextColor}/>
             </View>);
diff --git a/node_modules/@twotalltotems/react-native-otp-input/index.d.ts b/node_modules/@twotalltotems/react-native-otp-input/index.d.ts
index aec5d5b..d8af8de 100644
--- a/node_modules/@twotalltotems/react-native-otp-input/index.d.ts
+++ b/node_modules/@twotalltotems/react-native-otp-input/index.d.ts
@@ -19,6 +19,10 @@ declare module '@twotalltotems/react-native-otp-input' {
      * Digits of pins in the OTP
      */
     pinCount: number;
+    /**
+     * Test Id for OTP Input field
+     */
+    testID?: string;
     /**
      * Style of the input fields
      */

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions