Skip to main content

Glossary of terms

Worklet​

Worklets are short-running JavaScript functions that can be run on the UI thread. They can also be run on a JavaScript thread just as you would run a function in your code.

Most of the time when working with Reanimated the code is automatically workletized and run on the UI thread by default.

const style = useAnimatedStyle(() => {
  console.log('Running on the UI thread');
  return { opacity: 0.5 };
});

You can create your own worklets using the "worklet"; directive at the top of a function.

function myWorklet() {
  'worklet';
  console.log('Running on the UI thread');
}

runOnUI lets you manually run worklets on the UI thread:

function myWorklet(greeting) {
  'worklet';
  console.log(`${greeting} from the UI thread`);
}

function onPress() {
  runOnUI(myWorklet)('Howdy');
}

to workletize​

To convert a JavaScript function into a serializable object which can be copied and run over on UI thread.

Functions marked with "worklet"; directive are automatically picked up and workletized by the Reanimated Babel plugin.

Worker Worklet Runtime - Worker Runtime​

A JavaScript runtime spawned by react-native-worklets. It's pre-configured to be able to execute worklets.

It isn't coupled to any thread, but there might be a thread dedicated to its execution.

You can learn more about different runtime types by reading the Runtime kinds section.

UI Runtime​

A unique Worklet Runtime that is tailored to efficiently offload work from the RN Runtime and to allow for synchronous access to native events and the native rendering layer.

React Native Runtime (RN Runtime)​

A JavaScript runtime that is responsible for executing your app's bundle and where the React part of React Native lives. React Native Runtime uses JavaScript thread and UI thread to execute your code.

You can learn more about it by reading the JavaScript Runtime article in the official React Native docs.

JavaScript thread​

JavaScript thread (or JS thread for short) is responsible for handling JavaScript code execution in the app.

This is the primary place where all the business logic, state management, and event handling occur. It runs the JavaScript code that defines your app’s behavior and manages interactions with the user interface.

UI thread​

UI thread is responsible for handling user interface updates. Also known as Main thread.

You can learn more about it by reading the Threading model article in the official React Native docs.

Animations in inline styling​

Passing shared values directly to style property without the use of useAnimatedStyle.

For example:

function App() {
  const width = useSharedValue(100);

  return <Animated.View style={{ width }} />;
}

Reanimated Babel plugin​

The plugin performs automatic workletization of certain functions used with Reanimated to reduce the amount of boilerplate code.

You can learn the details by reading the Reanimated Babel plugin README.

Serializable​

A Serializable is an object that represents a JavaScript value that can be copied between Worklet Runtimes. JavaScript values cannot be passed to other runtimes without prior serialization.

SerializableRef​

A SerializableRef is a reference to a Serializable object.