Functions are a great construct for our needs because you can communicate with the code they run by passing arguments. Each worklet function can be run either on the main React Native thread if you just call that function in your code, or you can execute it on the UI thread using
runOnUI. Note that UI execution is asynchronous from the caller’s perspective. When you pass arguments, they will be copied to the UI JS context.
In addition to arguments, functions also capture the context where they are defined. So when you have a variable that is defined outside of the worklet scope but is used inside a worklet, it will also be copied along with the arguments and you’d be able to use it (we refer to it as capturing given params):
Worklets can capture (or take as arguments) from other worklets, in which case when called, they will execute synchronously on the UI thread:
And hey – this works for regular methods too. In fact, console.log is not defined in the UI JS context, but is a reference to a method that the React Native JS context provides. So when we used
console.log in the previous examples it was actually executed on the React Native thread.
In practice, when writing animations and interactions with Reanimated, you will rarely need to create worklets using
'worklet' directive (just take a look at
Example/ folder to see we don't have that many occurences of the directive).
What you will be using most of the time instead, are worklets that can be constructed by one of the hooks from Reanimated API, e.g.
When using one of the hooks listed in the Reanimated API Reference, we automatically detect that the provided method is a worklet and do not require the directive to be specified.
The method provided to the hook will be turned into a worklet and executed on the UI thread automatically.