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?