"Exception thrown while executing UI block" error on 0.73.0 version of react native

[Milutin-P]

"Exception thrown while executing UI block" error on 0.73.0 version of react native

Platform

Which player are you experiencing the problem on:

• iOS

Environment info

Library version: 6.0.0-alpha.11, 6.0.0-alpha.7, 6.0.0-alpha.4, 6.0.0-beta.2
Also:

• react-native-screens: 3.27.0 and 3.29.0
• react-native: 0.73.0

Device: iPhone 15, iOS 17

Description

We encountered an issue after upgrading our project from react-native 0.72.7 to 0.73.0. Although react-native-video was functioning correctly on 0.72.7, we started receiving the following errors after tapping on the element that navigates through react-navigation to the screen that has <Video> element:

__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
    RCTUIManager.m:1205
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.207
__RCTExecuteOnMainQueue_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

And after dismissing the error and tapping aging on the pressable element that navigates to a screen:

Exception thrown while executing UI block: 'parentNode' is a required parameter

__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
    RCTUIManager.m:1205
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.207
__RCTExecuteOnMainQueue_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

Interestingly, on the onboarding screen which is presented on the first load of the app, video loaded locally from the assets folder continue to work fine. However, when navigating to a screen that hosts a video from a remote URL, these errors occur. The video does play in the background (as evidenced by the audible sound), but the app is prevented from navigating to the screen with the video player due to these errors.

I would be glad to provide more info, once I get to know what would be useful to know in this situation.

Edit: Android works perfectly fine. No issues there at all.

[KrzysztofMoch]

Hey @Milutin-P, just created 0.73 app with @react-navigation/native-stack and I am not able to reproduce issue. I tested it on iOS 17.0

CleanShot.2023-12-13.at.08.45.08.mp4

Cloud you provide your repro code ?

[Milutin-P]

@KrzysztofMoch
I'll try later.
If it's helpful I'm using bottom stack navigator, and the video is using a remote URL.

[Not-Qualified]

same issue

[gavrichards]

I came across this issue when upgrading to RN 0.73.
In my case, the Video element is wrapped with TouchableWithoutFeedback. Remove that and things work.

It happened with v5.2.1 of react-native-video too, and I hoped that updating to the latest beta of v6 would solve it but sadly not.

[Milutin-P]

@gavrichards I've encountered the same issue.

<TouchableWithoutFeedback
  onPress={() => {
    setPaused(!isPaused);
    setShowThumbnail(false);
  }}
>
  <Video
    source={{
      uri: video.url,
    }}
    controls
    paused={isPaused}
    onEnd={() => function()}
    playWhenInactive={false}
    playInBackground={false}
    preventsDisplaySleepDuringVideoPlayback={true}
    fullscreenAutorotate={true}
    poster={video.poster}
    resizeMode='stretch'
  />
</TouchableWithoutFeedback>

@KrzysztofMoch does this information provide sufficient details?

[Milutin-P]

I can finally confirm that the cause of the issue was nesting <Video> inside <TouchableWithoutFeedback> was the problem. After removing <TouchableWithoutFeedback> everything worked perfectly.

[gavrichards]

I can finally confirm that the cause of the issue was nesting <Video> inside <TouchableWithoutFeedback> was the problem. After removing <TouchableWithoutFeedback> everything worked perfectly.

Yes but there's a legitimate use for that, and it worked fine before RN 0.73.

[freeboub]

I found this issue which may be related facebook/react-native#29889
BTW, it looks like an issue in react native ...
another question, if you remove controls, do you have the issue ?
I search in the code, I don't find any reference to setOnClick ...

[gavrichards]

I found this issue which may be related facebook/react-native#29889 BTW, it looks like an issue in react native ... another question, if you remove controls, do you have the issue ? I search in the code, I don't find any reference to setOnClick ...

That's an issue from 2020 referring to React Native 0.63.2.
This issue wasn't present prior to RN 0.73.

[CalNicklin]

Also facing this issue. I'm not quite sure as to why this occurs, but if I have the video component implemented in a class component the occurrences of this bug are far reduced vs. a functional component....

[JeremyBradshaw7]

I also hit this issue. I needed a <TouchableWithoutFeedback onPress=... > around the video to toggle the play controls on a tap. Changing that outer Touchable to <Pressable style={{flex: 1}} onPress=... > seems to fix it though, so that's an easy workaround until the issue is fixed.

[KrzysztofMoch]

Yes, I can confirm this weird behaviour, but I have no Idea why is this happening... I will try to look into react-native code

[gavrichards]

I can confirm switching from TouchableWithoutFeedback to Pressable solved this for us.

[ivngar]

Hey, got the same error, I've tried to get to the root of the problem but didn't found why it's happening, the main thing is that somehow something is invoking the functionsetOnClick on RCTVideo and the crash happens because that function doesn't exist on RCTVideo, maybe the responder chain or maybe due to RCTEventDispatcher, due to the way TouchableWithoutFeedback is implemented 🤷

@KrzysztofMoch @freeboub Unless you want to get to the root of the problem, If you want to unblock the release due to that, a workaround would be to just set a function named setOnClick on RCTVideo.swift like:

    // this view is acting as responder of setOnClick, without the function it crashes
    @objc
    func setOnClick(_ click:Any) -> Void {
    }

I've tried that and worked, if you want I can create a PR with the workaround

[KrzysztofMoch]

I have applied workaround - will be available in beta.9

[Milutin-P]

Thanks! @KrzysztofMoch