search

tanersener / react-native-ffmpeg

FFmpeg for react-native. Not maintained anymore. Superseded by FFmpegKit.
GNU General Public License v3.0
400 stars 51 forks source link

warning`new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method. - RN 0.65 #264

Closed claudiozam closed 3 years ago

claudiozam commented 3 years ago

Description

After calling RNFFmpeg.execute(".........") the lib throws a warning / error related to NativeEventEmitter

Expected behavior

No warning / error after calling RNFFmpeg.execute(".........")

Screenshots

Screenshot_1630670775

Screenshot_1630670782

Logs

WARN new NativeEventEmitter() was called with a non-null argument without the required addListener method. Loading react-native-ffmpeg.

Environment

react: 17.0.2 react Native: 0.65.1 react-native-ffmpeg: 0.5.1 Device: Samsung S10 / Samsung S20 / Android Emulator OS: Android 11

package.json

{
  "name": "XXXXXX",
  "version": "3.3.11",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.1",
    "@react-native-clipboard/clipboard": "^1.6.0",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/audio-toolkit": "^2.0.3",
    "@react-native-community/datetimepicker": "3.5.0",
    "@react-native-community/google-signin": "^5.0.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-firebase/analytics": "^12.1.0",
    "@react-native-firebase/app": "^12.1.0",
    "@react-native-picker/picker": "^1.9.10",
    "@types/uuid": "7.0.4",
    "axios": "^0.21.1",
    "color": "^3.1.3",
    "detox": "^18.9.0",
    "formik": "^2.2.6",
    "fsevents": "2.2.1",
    "hermes-engine": "0.8.1",
    "immutability-helper": "^3.1.1",
    "link-preview-js": "^2.1.3",
    "lodash": "^4.17.20",
    "native-base": "^2.15.2",
    "pretty-bytes": "^5.5.0",
    "randomcolor": "^0.6.2",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-add-calendar-event": "^4.0.0",
    "react-native-autolink": "^4.0.0",
    "react-native-base64": "^0.2.1",
    "react-native-blob-util": "^0.13.12",
    "react-native-calendars": "^1.1129.0",
    "react-native-config": "^1.4.1",
    "react-native-device-info": "^8.0.7",
    "react-native-document-picker": "5.2.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-fbsdk-next": "^4.3.0",
    "react-native-ffmpeg": "^0.5.1",
    "react-native-file-viewer": "^2.1.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-hide-with-keyboard": "^1.2.1",
    "react-native-image-crop-picker": "^0.36.0",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-inappbrowser-reborn": "^3.5.1",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-localize": "^2.1.1",
    "react-native-masked-text": "^1.13.0",
    "react-native-mime-types": "^2.3.0",
    "react-native-modal": "^12.0.1",
    "react-native-modal-datetime-picker": "^10.0.0",
    "react-native-notifications": "^4.0.0",
    "react-native-orientation-locker": "^1.2.0",
    "react-native-permissions": "^3.0.1",
    "react-native-progress": "^5.0.0",
    "react-native-push-notification-popup": "^1.6.0",
    "react-native-rate": "^1.2.4",
    "react-native-reanimated": "^2.2.0",
    "react-native-render-html": "^4.2.5",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^3.5.0",
    "react-native-share": "^7.0.0",
    "react-native-simple-dialogs": "^1.4.0",
    "react-native-simple-toast": "^1.1.3",
    "react-native-spinkit": "^1.5.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.1",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-version": "^4.0.0",
    "react-native-video": "^5.1.1",
    "react-native-webview": "^11.6.4",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-navigation-stack": "^2.10.2",
    "react-redux": "^7.2.3",
    "read-package-json": "^3.0.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "rn-placeholder": "^3.0.3",
    "rollbar-react-native": "^0.9.1",
    "sanitize-filename": "^1.6.3",
    "striptags": "^3.1.1",
    "url": "^0.11.0",
    "yup": "^0.32.8"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "properties-reader": "^2.2.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2",
    "redux-devtools": "3.7.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "detox": {
    "test-runner": "jest",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/XXXXXXXX.app",
        "build": "xcodebuild -workspace ios/XXXXXXXXXX.xcworkspace -scheme XXXXXXXXX -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11"
        }
      }
    }
  }
}
tanersener commented 3 years ago

I don' have a clue what is wrong there. react-native-ffmpeg-test repository uses RN 0.65.1 with no issues.

claudiozam commented 3 years ago

Yes, react-native-ffmpeg-test repository RN 0.65.1 with no issues. Ok, i will review my code again. With RN 0.64.X no problem. Thanks!!!.

claudiozam commented 3 years ago

@tanersener add required stubs for react-native 0.65

RNFFmpegModule.java

    @ReactMethod
    public void addListener(String eventName) {
        // Keep: Required for RN built in Event Emitter Calls.
    }

    @ReactMethod
    public void removeListeners(Integer count) {
        // Keep: Required for RN built in Event Emitter Calls.
    }

These are needed to avoid console warnings about NativeEventEmitter being created without the required native module implementations

tanersener commented 3 years ago

These are needed to avoid console warnings about NativeEventEmitter being created without the required native module implementations

Sorry, but I don't follow. In order to take an action about this issue, first we must agree that something is not right in the current implementation. My tests with RN 0.65 on react-native-test were successful, I don't get those warnings. Therefore I don't see a reason to make a change at the moment. Am I missing something?

claudiozam commented 3 years ago

@tanersener you are 100% right. But your testing app does not interact with external libs like flipper or react-native-image-crop-picker.

Please check this

https://github.com/facebook/react-native/commit/114be1d2170bae2d29da749c07b45acf931e51e2 https://github.com/facebook/flipper/issues/2707

Thanks for your help and your project!!!

claudiozam commented 3 years ago

react-native-ffmpeg+0.5.1.patch

diff --git a/node_modules/react-native-ffmpeg/android/src/main/java/com/arthenica/reactnative/RNFFmpegModule.java b/node_modules/react-native-ffmpeg/android/src/main/java/com/arthenica/reactnative/RNFFmpegModule.java
index a394f46..b71bdd8 100644
--- a/node_modules/react-native-ffmpeg/android/src/main/java/com/arthenica/reactnative/RNFFmpegModule.java
+++ b/node_modules/react-native-ffmpeg/android/src/main/java/com/arthenica/reactnative/RNFFmpegModule.java
@@ -94,6 +94,16 @@ public class RNFFmpegModule extends ReactContextBaseJavaModule {
         return "RNFFmpegModule";
     }

+    @ReactMethod
+    public void addListener(String eventName) {
+        // Keep: Required for RN built in Event Emitter Calls.
+    }
+
+    @ReactMethod
+    public void removeListeners(Integer count) {
+        // Keep: Required for RN built in Event Emitter Calls.
+    }
+
     @ReactMethod
     public void getPlatform(final Promise promise) {
         final String abi = AbiDetect.getAbi();
tanersener commented 3 years ago

So, you say that if an application uses flipper or react-native-image-crop-picker, then all other plugins must implement addListener, removeListener methods to use them under RN 0.65.0. But not flipper or react-native-image-crop-picker themselves. It's fine if they don have addListener, removeListener methods, right? Because they are not implementing them at the moment.

tanersener commented 3 years ago

Anyway, it is fixed in the new release. Hope it will resolve the issues for you.

claudiozam commented 3 years ago

Thanks @tanersener!!!!

jabirabbas commented 2 years ago

@tanersener this issue is not resolved for iOS in react-native 0.65. Request you to kindly check and update the repo.

thanks.

tanersener commented 2 years ago

@jabirabbas Alright, can you provide the steps to reproduce it? I'm using react-native-ffmpeg-test to test and I don't see any errors on 0.65.1.