Clarification on calling external functions inside workletized callbacks

[map32]

Description

I have a gesture handler that needs to call some external functions. However I discovered that the external functions must be defined above the workletized callback function, otherwise the app crashes when trying to execute the callback.

For example:

const moveLeft = () => {
        "worklet";
        //stuff goes here
}
const moveRight = () => {
        "worklet";
        //stuff goes here
}
const gesture = Gesture.Pan()
    .onUpdate((e) => {
       //some stuff here
    })
    .onEnd((e) => {
        if ("some condition") {
            if ("some other condition")
            {
                moveRight();
            } else {
                moveLeft();
            }
        }
    });

This works, but

const gesture = Gesture.Pan()
    .onUpdate((e) => {
       //some stuff here
    })
    .onEnd((e) => {
        if ("some condition") {
            if ("some other condition")
            {
                moveRight();
            } else {
                moveLeft();
            }
        }
    });
const moveLeft = () => {
        "worklet";
        //stuff goes here
}
const moveRight = () => {
        "worklet";
        //stuff goes here
}

This crashes the Expo Go app on my iPhone.

If this is a bug i hope it gets fixed, if it is intended then you should clarify this!

Steps to reproduce

1. make a react native gesture with callbacks like onUpdate or onEnd
2. within the callback function, call any external function(s) which are defined below the callback function in the file
3. the app crashes when that callback is called

Snack or a link to a repository

no repo, code is in the description

Reanimated version

3.17.4

React Native version

0.79.4

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Host machine

Windows

Device model

iphone 13

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?

[map32]

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?

No minimal reproduction but the what I wrote should suffice

[MatiPl01]

Hey @map32!

This is a known behavior and worklets require all other worklet functions used within them to be declared before being used. I think that we cannot currently do anything with it.

If this is a bug i hope it gets fixed, if it is intended then you should clarify this!

I can definitely agree with you that this behavior should be described somewhere. We probably should add a note in the worklets documentation page.

cc @tjzel

[tjzel]

Hi @map32. This is documented in Reanimated docs, although it might be quite hard to find https://docs.swmansion.com/react-native-reanimated/docs/reanimated-babel-plugin/about/#hoisting-worklets.