Interop layer android crash about react-native-video

[ddiachkov]

No, I've missed it! Great find! Renaming components might be an easier way. Although, RCTEventEmitter was deprecated long time ago.

The modern way to dispatch events is to inherit Event, override getEventData and then use UIManagerHelper.getEventDispatcherForReactTag(...).dispatch(new CustomEvent(...)). Thats how RN native components like TextInput do that.

[ddiachkov]

I have the same issue. However, in my case, it has nothing to do with the end of the video.

Here is the stacktrace:

01-25 14:12:50.649 26629 26629 E AndroidRuntime: com.facebook.react.uimanager.IllegalViewOperationException: Event: you must return a valid, non-null value from `getEventData`, or override `dispatch` and `dispatchModern`. Event: onVideoIdle
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.facebook.react.uimanager.events.Event.dispatch(Event.java:165)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.facebook.react.uimanager.events.Event.dispatchModern(Event.java:212)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.facebook.react.uimanager.events.FabricEventDispatcher.dispatchEvent(FabricEventDispatcher.java:41)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.facebook.react.fabric.interop.InteropEventEmitter.receiveEvent(InteropEventEmitter.java:50)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.brentvatne.common.react.VideoEventEmitter.receiveEvent(VideoEventEmitter.java:452)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.brentvatne.common.react.VideoEventEmitter.idle(VideoEventEmitter.java:330)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.brentvatne.exoplayer.ReactExoplayerView.onEvents(ReactExoplayerView.java:1092)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at androidx.media3.exoplayer.ExoPlayerImpl.lambda$new$0$androidx-media3-exoplayer-ExoPlayerImpl(ExoPlayerImpl.java:281)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at androidx.media3.exoplayer.ExoPlayerImpl$$ExternalSyntheticLambda12.invoke(Unknown Source:4)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at androidx.media3.common.util.ListenerSet$ListenerHolder.iterationFinished(ListenerSet.java:350)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at androidx.media3.common.util.ListenerSet.handleMessage(ListenerSet.java:294)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at androidx.media3.common.util.ListenerSet.$r8$lambda$bio3pd12v5B_9b5UeFaPn9XBQ90(Unknown Source:0)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at androidx.media3.common.util.ListenerSet$$ExternalSyntheticLambda0.handleMessage(Unknown Source:2)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at android.os.Handler.dispatchMessage(Handler.java:102)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at android.os.Looper.loop(Looper.java:193)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at android.app.ActivityThread.main(ActivityThread.java:6669)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at java.lang.reflect.Method.invoke(Native Method)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
01-25 14:12:50.649 26629 26629 E AndroidRuntime:        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

Here is the patch that fixes it:

patches/react-native-video+6.0.0-beta.4.patch

diff --git a/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/react/VideoEventEmitter.java b/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/react/VideoEventEmitter.java
index 31cbc27..a9267de 100644
--- a/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/react/VideoEventEmitter.java
+++ b/node_modules/react-native-video/android/src/main/java/com/brentvatne/common/react/VideoEventEmitter.java
@@ -9,9 +9,11 @@ import com.brentvatne.common.api.Track;
 import com.brentvatne.common.api.VideoTrack;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.UIManager;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.common.ViewUtil;
 import com.google.ads.interactivemedia.v3.api.AdError;
 
 import java.io.PrintWriter;
@@ -23,12 +25,12 @@ import java.util.Map;
 
 public class VideoEventEmitter {
 
-    private final RCTEventEmitter eventEmitter;
+    private final ReactContext reactContext;
 
     private int viewId = View.NO_ID;
 
     public VideoEventEmitter(ReactContext reactContext) {
-        this.eventEmitter = reactContext.getJSModule(RCTEventEmitter.class);
+        this.reactContext = reactContext;
     }
 
     private static final String EVENT_LOAD_START = "onVideoLoadStart";
@@ -449,6 +451,10 @@ public class VideoEventEmitter {
     }
 
     private void receiveEvent(@VideoEvents String type, WritableMap event) {
-        eventEmitter.receiveEvent(viewId, type, event);
+        UIManager uiManager = UIManagerHelper.getUIManager(reactContext, ViewUtil.getUIManagerType(viewId));
+
+        if (uiManager != null) {
+            uiManager.receiveEvent(UIManagerHelper.getSurfaceId(reactContext), viewId, type, event);
+        }
     }
 }

1. I haven't had a chance to test this properly. It looks like it is working fine and this is a typical issue for the old react-native libraries.
2. It might be a good idea to cache uiManager, but I am not 100% comfortable with that due to the dynamic nature of RN.

[KrzysztofMoch]

@ddiachkov we discuss with @freeboub and we will apply your patch to update android event emitter 🙌

[freeboub]

Doc is for the v6 version which is still beta.
Regarding fabric this is not yet supported, another ticket exist to follow that point

[fractalscape13]

This isn't about Fabric, I am using the interop layer to ignore the package. Please reopen.

[fractalscape13]

(see new renderer interop layer info: reactwg/react-native-new-architecture#135)

[freeboub]

Maybe I am wrong, but unstable_reactLegacyComponentNames enables the interoperability layer. In the past I tested it also with react native fast image unsuccessfully. My conclusion was that this layer doesn't correctly support callbacks.

[fractalscape13]

It allows react-native-video to work in a project with fabric enabled. I have used it for a few other packages that don't support fabric either.

[freeboub]

Did you see comments in following thread reactwg/react-native-new-architecture#135

A guy made it work on the 5.2 version by doing some renaming!

(Notice that the patch proposed looks good to me)

[KrzysztofMoch]

Yeah, we should update this one day 😅

btw @ddiachkov I think there is one line fix for current RCTEventEmitter implementation

just do in receiveEvent method and it should also work

- eventEmitter.receiveEvent(viewId, type, event);
+ eventEmitter.receiveEvent(viewId, type, event == null ? Arguments.createMap() : event);

[ddiachkov]

One-liner is better than my patch. I'll test it later today.