i'm using @twotalltotems/react-native-otp-input library. but i'm getting this error. Cannot read property 'getString' of null. have you resolved this error earlier?

[RishiSetpal777]

Describe the bug
i'm using @twotalltotems/react-native-otp-input library. but I'm getting this error. Cannot read property 'getString' of null.

Detailed Error

Details

info A dev server is already running for this project on port 8081.
info Installing the app...

Configure project :react-native-reanimated
Android gradle plugin: 8.1.1
Gradle: 8.3

Task :react-native-community_clipboard:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.3/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.
111 actionable tasks: 5 executed, 106 up-to-date

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor

/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:14: error: cannot find symbol
import com.facebook.react.bridge.ContextBaseJavaModule;
^
symbol: class ContextBaseJavaModule
location: package com.facebook.react.bridge
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:23: error: cannot find symbol
public class ClipboardModule extends ContextBaseJavaModule {
^
symbol: class ContextBaseJavaModule
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardPackage.java:23: error: incompatible types: ClipboardModule cannot be converted to NativeModule
modules.add(new ClipboardModule(reactContext));
^
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:31: error: method does not override or implement a method from a supertype
@OverRide
^
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:37: error: cannot find symbol
return (ClipboardManager) getContext().getSystemService(getContext().CLIPBOARD_SERVICE);
^
symbol: method getContext()
location: class ClipboardModule
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:37: error: cannot find symbol
return (ClipboardManager) getContext().getSystemService(getContext().CLIPBOARD_SERVICE);
^
symbol: method getContext()
location: class ClipboardModule
Note: /Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
6 errors

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-community_clipboard:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

• Try:

Run with --info option to get more log output.
Run with --scan to get full insights.

BUILD FAILED in 7s
error Failed to install the app. Command failed with exit code 1: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:14: error: cannot find symbol
import com.facebook.react.bridge.ContextBaseJavaModule; ^ symbol: class ContextBaseJavaModule location: package com.facebook.react.bridge
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:23: error: cannot find symbol
public class ClipboardModule extends ContextBaseJavaModule { ^ symbol: class ContextBaseJavaModule
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardPackage.java:23: error: incompatible types: ClipboardModule cannot be converted to NativeModule modules.add(new ClipboardModule(reactContext)); ^
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:31: error: method does not override or implement a method from a supertype @OverRide ^
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:37: error: cannot find symbol return (ClipboardManager) getContext().getSystemService(getContext().CLIPBOARD_SERVICE); ^ symbol: method getContext() location: class ClipboardModule
/Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java:37: error: cannot find symbol return (ClipboardManager) getContext().getSystemService(getContext().CLIPBOARD_SERVICE); ^ symbol: method getContext() location: class ClipboardModule
Note: /Users/admin/projectname/projectname/node_modules/@react-native-community/clipboard/android/src/main/java/com/reactnativecommunity/clipboard/ClipboardModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
6 errors FAILURE: Build failed with an exception. * What went wrong:
Execution failed for task ':react-native-community_clipboard:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details. * Try:
Run with --info option to get more log output.
Run with --scan to get full insights. BUILD FAILED in 7s.

To Reproduce
Steps to reproduce the behaviour:

1. npm install @twotalltotems/react-native-otp-input
2. npx react-native run-android
3. See error

Smartphone (please complete the following information):

• Device: pixel 3a emulator
• OS: Android API 34
• Host Machine Mac

Additional context
Packages that are already installed

  "name": "****",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.22.2",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-navigation/native": "^6.1.12",
    "@react-navigation/native-stack": "^6.9.20",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "formik": "^2.4.5",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-background-timer": "^2.4.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal-dropdown": "^1.0.2",
    "react-native-otp-verify": "^1.1.8",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "^3.7.1",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-native-simple-toast": "^3.3.0",
    "react-native-status-bar-height": "^2.6.0",
    "react-native-svg": "^15.0.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-webview": "^11.26.1",
    "react-redux": "^9.1.0",
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^3.1.0",
    "yup": "^1.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

[chaitanya71998]

@RishiSetpal777 is this issue got fixed ?

[BuqiLiao]

After checking, I think this happens because of the use of Clipboard from '@react-native-community/clipboard' whose internal build has been deprecated in the newest Android build.

The error derives from /dist/index.js:44 :

Clipboard.getString().then(code => {
   ...
}

An easy but temporary way is to use patch-package to disable the function call:

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..499bee5 100644
--- a/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
+++ b/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
@@ -105,7 +105,7 @@ export default class OTPInputView extends Component {
             }
         };
         this.focusField = (index) => {
-            if (index < this.fields.length) {
+            if (index < this.fields.length && this.fields[index]) {
                 this.fields[index].focus();
                 this.setState({
                     selectedIndex: index
@@ -154,8 +154,10 @@ export default class OTPInputView extends Component {
         }
     }
     componentDidMount() {
-        this.copyCodeFromClipBoardOnAndroid();
-        this.bringUpKeyBoardIfNeeded();
+        // this.copyCodeFromClipBoardOnAndroid();
+        setTimeout(()=>{
+            this.bringUpKeyBoardIfNeeded();
+        },800)
         this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide);
     }
     componentWillUnmount() {

Notice: You should only need // this.copyCodeFromClipBoardOnAndroid(); as other fixes are not relevant to this issue.
Also, this library is not actively maintained anymore, try to folk this project or choose another library would be a good choice.

[riyapa401]

I had the same issue, tried downgrading package helped!
remove package if you have installed in your project:
"@react-native-community/clipboard"
and downgrade the version to '1.3.5'.
"@twotalltotems/react-native-otp-input": "^1.3.5"

[mindelias]

i had the same issue, what i did to fix it,

1. install npm i @react-native-community/clipboard

After installing this you will likely get an error,
then next fix
go to this file.
node_modules@react-native-community\clipboard\android\src\main\java\com\reactnativecommunity\clipboard\ClipboardModule.java
import this : import com.facebook.react.bridge.ReactApplicationContext;
convert extended package from ContextBaseJavaModule to ReactContextBaseJavaModule everywhere in file(maybe used at two places)
convert this :
from:
public ClipboardModule(Context context) {
super(context);
}
private ClipboardManager getClipboardService() {
return (ClipboardManager) getcontext().getSystemService(getcontext().CLIPBOARD_SERVICE);
}
to:
public ClipboardModule(Context context) {
super(new ReactApplicationContext(context));
}

your new code should be looking like
`public ClipboardModule(Context context) {
super(new ReactApplicationContext(context));
}

public static final String NAME = "RNCClipboard";

@OverRide
public String getName() {
return ClipboardModule.NAME;
}

private ClipboardManager getClipboardService() {
return (ClipboardManager) getReactApplicationContext().getSystemService(getReactApplicationContext().CLIPBOARD_SERVICE);
}`