(Web) setImmediate is not defined

[nandorojo]

Description

GestureDetector breaks on Next.js for using setimmediate. This same thing was fixed on Reanimated by switching to requestAnimationFrame

Steps to reproduce

Use GestureDetector in Next.js causes this. It's an old bug from Reanimated.

The fix is here: https://github.com/software-mansion/react-native-reanimated/pull/1521/files

Snack or a link to a repository

Let me know if this is needed.

Gesture Handler version

2.9.0

React Native version

RNW 0.18

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[nandorojo]

Here's a patch for anyone who needs it:

diff --git a/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js b/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
index baf1ca3..0c9f50b 100644
--- a/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
+++ b/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
@@ -23,6 +23,8 @@ import { RNRenderer } from '../../RNRenderer';
 import { isExperimentalWebImplementationEnabled } from '../../EnableExperimentalWebImplementation';
 const ALLOWED_PROPS = [...baseGestureHandlerWithMonitorProps, ...tapGestureHandlerProps, ...panGestureHandlerProps, ...panGestureHandlerCustomNativeProps, ...longPressGestureHandlerProps, ...forceTouchGestureHandlerProps, ...flingGestureHandlerProps];
 
+const scheduleUpdate = Platform.OS == 'web' ? requestAnimationFrame : setImmediate;
+
 function convertToHandlerTag(ref) {
   if (typeof ref === 'number') {
     return ref;
@@ -84,7 +86,7 @@ function attachHandlers({
   // when it's ran
 
 
-  setImmediate(() => {
+  scheduleUpdate(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -100,7 +102,7 @@ function attachHandlers({
   // when it's ran
 
 
-  setImmediate(() => {
+  scheduleUpdate(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -163,7 +165,7 @@ function updateHandlers(preparedGesture, gestureConfig, gesture, mountedRef) {
   // in case of external relations)
 
 
-  setImmediate(() => {
+  scheduleUpdate(() => {
     if (!mountedRef.current) {
       return;
     }

[j-piasecki]

Thanks for providing the fix ❤️.

[alzalabany]

diff --git a/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js b/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
index baf1ca3..edc3d9a 100644
--- a/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
+++ b/node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
@@ -23,6 +23,8 @@ import { RNRenderer } from '../../RNRenderer';
 import { isExperimentalWebImplementationEnabled } from '../../EnableExperimentalWebImplementation';
 const ALLOWED_PROPS = [...baseGestureHandlerWithMonitorProps, ...tapGestureHandlerProps, ...panGestureHandlerProps, ...panGestureHandlerCustomNativeProps, ...longPressGestureHandlerProps, ...forceTouchGestureHandlerProps, ...flingGestureHandlerProps];
 
+const setImmediate = global.setImmediate || (fn => setTimeout(fn, 0));
+
 function convertToHandlerTag(ref) {
   if (typeof ref === 'number') {
     return ref;

this works for me