Add another ways to mark function as worklet.

plugin.js

@@ -15,6 +15,8 @@ const functionHooks = new Map([
   ['useDerivedValue', [0]],
   ['useAnimatedScrollHandler', [0]],
   ['useAnimatedReaction', [0, 1]],
+  ['useWorkletCallback', [0]],
+  ['createWorklet', [0]],
 ]);
 
 const objectHooks = new Set([

react-native-reanimated-tests.tsx

@@ -22,6 +22,9 @@ import Animated, {
   repeat,
   sequence,
   withDecay,
+  useWorkletCallback,
+  createWorklet,
+  runOnUI,
 } from 'react-native-reanimated';
 
 const styles = StyleSheet.create({
@@ -360,3 +363,33 @@ function WithDecayTest() {
     </PanGestureHandler>
   );
 }
+
+// useWorkletCallback
+function UseWorkletCallbackTest() {
+  const callback = useWorkletCallback((a: number, b: number) => {
+    return a + b;
+  }, []);
+
+  runOnUI(() => {
+    const res = callback(1, 1);
+
+    console.log(res);
+  })();
+
+  return <Animated.View style={styles.container} />;
+}
+
+// createWorklet
+function CreateWorkletTest() {
+  const callback = createWorklet((a: number, b: number) => {
+    return a + b;
+  });
+
+  runOnUI(() => {
+    const res = callback(1, 1);
+
+    console.log(res);
+  })();
+
+  return <Animated.View style={styles.container} />;
+}

react-native-reanimated.d.ts

@@ -445,6 +445,9 @@ declare module 'react-native-reanimated' {
       fn: (...args: A) => R
     ): (...args: Parameters<typeof fn>) => void;
     export function processColor(color: number | string): number;
+    export function createWorklet<A extends any[], R>(
+      fn: (...args: A) => R
+    ): (...args: Parameters<typeof fn>) => R;
 
     type DependencyList = ReadonlyArray<any>;
 
@@ -480,6 +483,10 @@ declare module 'react-native-reanimated' {
       handlers: ScrollHandlers<TContext>,
       deps?: DependencyList
     ): OnScroll;
+    export function useWorkletCallback<A extends any[], R>(
+      fn: (...args: A) => R,
+      deps?: DependencyList
+    ): (...args: Parameters<typeof fn>) => R;
 
     export function useAnimatedRef<T extends Component>(): RefObject<T>;
     export function measure<T extends Component>(
@@ -706,6 +713,8 @@ declare module 'react-native-reanimated' {
   export const useAnimatedStyle: typeof Animated.useAnimatedStyle;
   export const useAnimatedProps: typeof Animated.useAnimatedProps;
   export const useDerivedValue: typeof Animated.useDerivedValue;
+  export const useWorkletCallback: typeof Animated.useWorkletCallback;
+  export const createWorklet: typeof Animated.createWorklet;
   export const useAnimatedGestureHandler: typeof Animated.useAnimatedGestureHandler;
   export const useAnimatedScrollHandler: typeof Animated.useAnimatedScrollHandler;
   export const useAnimatedRef: typeof Animated.useAnimatedRef;

src/reanimated2/Hooks.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 
 import WorkletEventHandler from './WorkletEventHandler';
 import {
@@ -594,3 +594,11 @@ export function useAnimatedReaction(prepare, react) {
     };
   }, inputs);
 }
+
+export function useWorkletCallback(fun, deps) {
+  return useCallback(fun, deps);
+}
+
+export function createWorklet(fun) {
+  return fun;
+}