Console Error on [react-native-gesture-handler] when view a video attachment in a report

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.57-3
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @hoangzinh
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Go to any chat
2. Send a video attachment
3. Tap on video attachment in the report

Expected Result:

No console error

Actual Result:

Console error: [react-native-gesture-handler] Some of the callbacks in the gesture are worklets and some are not

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2024-11-05.at.07.04.10.mov

View all open jobs on GitHub

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mkzie2]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Console Error on [react-native-gesture-handler] when view a video attachment in a report

What is the root cause of that problem?

The issue arises from this gesture callback:

App/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx

Lines 47 to 63 in 5a2602c

	const pan = Gesture.Pan()
	.onBegin((event) => {
	runOnJS(setIsSliderPressed)(true);
	runOnJS(checkVideoPlaying)(onCheckVideoPlaying);
	runOnJS(pauseVideo)();
	runOnJS(progressBarInteraction)(event);
	})
	.onChange((event) => {
	runOnJS(progressBarInteraction)(event);
	})
	.onFinalize(() => {
	runOnJS(setIsSliderPressed)(false);
	if (!wasVideoPlayingOnCheck.value) {
	return;
	}
	runOnJS(playVideo)();
	});

In progressBarInteraction, we update a shared value progressWidth which runs in Reanimated context >> progressBarInteraction gets automatically "workletized" (runs in UI thread) then onBegin and onChange callbacks consequently. Only onFinalize does not because it contains plain JS logic.

So we have 2 workletized and 1 non-workletized callbacks within the same gesture callbacks chain, causing react-native-gesture-handler throwing the error.

What changes do you think we should make in order to solve the problem?

Explicitly mark onFinalize callback as worklet by adding 'worklet'; directive at the beginning.

[melvin-bot]

Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[mkzie2]

@m-natarajan This has not been assigned any one to take care of.

[hoangzinh]

@mkzie2 do you still reproduce this console error on latest main branch?

[mkzie2]

@hoangzinh No longer after #51783. We can close this.

[hoangzinh]

Thanks for confirmation @mkzie2

cc @m-natarajan

[melvin-bot]

10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

12 days overdue. Walking. Toward. The. Light...