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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions