None of the callbacks in the gesture are worklets.

[trevorpfiz]

Describe the bug Getting this error:

 WARN  [react-native-gesture-handler] None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread. 
    at GestureDetector (http://192.168.4.73:8081/src/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:279727:49)
    at IScrollViewGesture (http://192.168.4.73:8081/src/index.ts.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=src%2Fapp:368982:54)

To Reproduce Steps to reproduce the behavior:

1. "react-native-reanimated-carousel": "4.0.0-alpha.12" in my project https://github.com/trevorpfiz/project-hyper
2. Follow https://reanimated-carousel.dev/usage
3. See error

I created a snack, but can't see the error there: https://snack.expo.dev/@elektrikspark/joyous-violet-kiwi

Expected behavior I would expect no issues with this library and react-native-gesture-handler

Versions (please complete the following information):

• react: v18.3.1
• react-native: v0.74.5
• react-native-reanimated: v3.15.0
• react-native-reanimated-carousel: v4.0.0-alpha.12
• react-native-gesture-handler: v2.18.1

Smartphone (please complete the following information):

• Device: iPhone 14 Pro Max
• OS: iOS 17.5.1

Additional context Let me know if more is needed, thanks!

[dosubot[bot]]

To resolve the warning message, you need to ensure that the functions used within the Reanimated worklets are properly marked as worklets or are wrapped with runOnJS.

Here's an example of how to correctly use runOnJS with react-native-gesture-handler:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-reanimated';

const gesture = Gesture.Pan()
  .onUpdate((event) => {
    'worklet';
    // Your worklet code here
  })
  .onEnd((event) => {
    'worklet';
    runOnJS(onGestureEnd)(event);
  });

const onGestureEnd = (event) => {
  // Your JS thread code here
};

<GestureDetector gesture={gesture}>
  {/* Your carousel component */}
</GestureDetector>

In this example, the onEnd callback is wrapped with runOnJS to ensure it runs on the JS thread. Make sure to apply this pattern to all relevant callbacks in your gesture configuration.

Additionally, ensure that your project is using compatible versions of react-native-reanimated-carousel and react-native-gesture-handler. The react-native-reanimated-carousel has been updated to use the new RNGH API, which requires react-native-gesture-handler version >=2.9.0 ^[1].

If you follow these steps, the warning should be resolved.

To continue talking to Dosu, mention @dosu.

[nmassey]

Does this PR appear to resolve this? 🙏

• #577

[trevorpfiz]

Does this PR appear to resolve this? 🙏

• fix: gesture onStart, onUpdate, and onEnd (et al) should be worklets #577

not totally sure, maybe? how does https://docs.swmansion.com/react-native-gesture-handler/docs/#automatic-workletization-of-gesture-callbacks relate to all this?

[nmassey]

Does this PR appear to resolve this? 🙏

• fix: gesture onStart, onUpdate, and onEnd (et al) should be worklets #577

not totally sure, maybe? how does https://docs.swmansion.com/react-native-gesture-handler/docs/#automatic-workletization-of-gesture-callbacks relate to all this?

yeah! In #577, see "Discussion of the bug" / "But why doesn't the react-native-reanimated/plugin babel plugin automatically workletify these handlers?"

[Estevete]

Same issue here! Is there any workaround for the moment?

[daeuk1011]

+1

[muammertopcu]

+1

[nmassey]

I think this should be fixed with

• #577

which was released in v4.0.0-canary.13 (and included in releases thereafter)

[softwaresean]

I think this should be fixed with

• fix: gesture onStart, onUpdate, and onEnd (et al) should be worklets #577

which was released in v4.0.0-canary.13 (and included in releases thereafter)

+1 to the issue described above. @nmassey, it is certainly possible I did something improper. However, I thought I would share that after installing "^4.0.0-canary.13" of react-native-reanimated-carousel, the onPress callback for <Pagination.Basic ... onPress /> was not firing.

Cheers.

[nmassey]

Hi @softwaresean - there was a bug (#676) introduced in canary.13. It was fixed via #677 which was released with canary.15.

If you update to canary.15 or higher (the latest is 17), does this fix your issue?

[MuskanVerma11]

I am facing the same issue. But I am not using gesture handler anywhere directly. I have installed it for drawer navigation. How to fix this?

[BeratHundurel]

I have the same problem

[MuskanVerma11]

I updated all the packages related to navigation and it solved the issue.

[thomazcapra]

Any news?

[dohooo]

@thomazcapra Have you tried with the latest version? I just released the v4. https://www.npmjs.com/package/react-native-reanimated-carousel?activeTab=versions

[dosubot[bot]]

Hi, @trevorpfiz. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• You reported a warning from react-native-gesture-handler about gesture callbacks not being worklets.
• I suggested solutions, but they received negative feedback.
• PR #577 addressed the worklet issue and was released in v4.0.0-canary.13.
• A bug in canary.13 affecting onPress was fixed in canary.15.
• Updating navigation-related packages and version 4 release resolved similar issues.

Next Steps:

• Please confirm if this issue is still relevant to the latest version of the library by commenting here.
• If no updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!