tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
521 stars 238 forks source link

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? #227

Closed RishiSetpal777 closed 4 months ago

RishiSetpal777 commented 4 months ago

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):

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 commented 4 months ago

@RishiSetpal777 is this issue got fixed ?

BuqiLiao commented 4 months ago

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 commented 2 months ago

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 commented 2 months ago

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);
}`