Can we run anything inside worklet?

[IslamRustamov98]

Let's say that, for example, I need to do some heavy computations with JS, not related to animation. Can I create a workletized function that does it? Or worklets are allowed to work only with animations.

[tjzel]

You definitely can. Check the following example:

import React from 'react';
import { View, Button, StyleSheet, Text } from 'react-native';

import Animated, {
  runOnJS,
  runOnUI,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

export default function App() {
  const sharedValue = useSharedValue(0);
  let plainValue = 0;

  function assignPlainValue(value: number) {
    plainValue = value;
  }

  function heavyComputation() {
    'worklet';
    for (let i = 0; i < 100000000; i++) {
      // NOOP
    }
    sharedValue.value = sharedValue.value === 0 ? 1 : 0;

    runOnJS(assignPlainValue)(sharedValue.value);
  }

  const style = useAnimatedStyle(() => {
    return {
      opacity: sharedValue.value,
    };
  });

  return (
    <View style={styles.container}>
      <Button title="Compute" onPress={runOnUI(heavyComputation)} />
      <Button
        title="Log plain value"
        onPress={() => {
          console.log('plainValue:', plainValue);
        }}
      />
      <Animated.View style={[styles.box, style]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

What exactly happens here:

1. We create a Shared Value that will hold our result. This is the way we get computation result from UI thread.
2. We create a plain JS value that will be the alternative to the Shared Value, e.g. if you want to compute outside of a Function Component - if its not the case I'd suggest using Shared Value.
3. Assigning to plain JS value has to be done through runOnJS since we compute on the UI thread - plain JS values are just copied on the UI thread and had you made the assignment in body of heavyComputation you would only change its copy on UI thread.
4. We use useAnimatedStyle just to have a visual cue that computation has ended - it triggers an update when one of the Shared Values captured in its closure changes.
5. Calling heavyComputation has to be done via runOnUI since simply calling it from JS would execute it on JS thread.

[hendro-febrian]

However, it will still block the thread and make the UI unresponsive anyway(?) Why would you execute it with Worklets then? or can we utilize Worklets to execute heavy tasks while maintaining the UI responsiveness? 🙏 @tjzel

[tjzel]

@hendro-febrian here's what you need:
createWorkletRuntime

[louis-openspace]

I couldn't allocate three.js matrices in a worklet (crash)

[MatiPl01]

Probably the crash is caused by the fact that the function/class used to allocate the 3D matrix in the three.js is not workletized. Someone would have to rewrite the library to be compatible with reanimated worklets. To run JS function inside a worklet, you need to add the 'worklet' string at the beginning of the function body. This will be information for the reanimated plugin to workletize the function. three.js library very likely doesn't include these worklet directives, thus you are experiencing a crash.

[Glazzes]

I tried once to turn a function to get the color palette from an image into a worklet and run in the UI thread, it didn't turn out well, it blocked the UI thread completely.