react-native-filament/lib/commonjs/hooks/useSyncSharedValue.js

A real-time physically based 3D rendering engine for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSyncSharedValue = useSyncSharedValue;
var _reactNativeWorkletsCore = require("react-native-worklets-core");
var _useFilamentContext = require("./useFilamentContext");
var _react = require("react");
var _ReanimatedProxy = require("../dependencies/ReanimatedProxy");
/**
 * react-native-filament uses react-native-worklets-core for creating shared values, which works very similar to
 * react-native-reanimated's shared values. However, you can't pass a reanimated shared value to a worklets core shared value directly.
 * This hook allows you to sync a reanimated shared value with a worklets core shared value.
 *
 * @example
 * ```tsx
 * const reanimatedSharedValue = useSharedValue(0)
 * const workletsCoreSharedValue = useSyncSharedValue(reanimatedSharedValue)
 *
 * // animate reanimatedSharedValue
 *
 * return <ModelInstance index={0} rotate={workletsCoreSharedValue} />
 * ```
 */
function useSyncSharedValue(reanimatedSharedValue) {
  const workletsCoreSharedValue = (0, _reactNativeWorkletsCore.useSharedValue)(reanimatedSharedValue.value);
  const {
    workletContext
  } = (0, _useFilamentContext.useFilamentContext)();

  // Attach a listener to the reanimated value that runs on the UI thread and updates the worklets core shared value
  (0, _react.useEffect)(() => {
    const id = Math.floor(Math.random() * 1000000);
    const callback = workletContext.createRunAsync(value => {
      'worklet';

      workletsCoreSharedValue.value = value;
    });
    _ReanimatedProxy.ReanimatedProxy.runOnUI(() => {
      'worklet';

      reanimatedSharedValue.addListener(id, callback);
    })();
    return () => {
      _ReanimatedProxy.ReanimatedProxy.runOnUI(() => {
        'worklet';

        reanimatedSharedValue.removeListener(id);
      })();
    };
  }, [reanimatedSharedValue, workletContext, workletsCoreSharedValue]);
  return workletsCoreSharedValue;
}
//# sourceMappingURL=useSyncSharedValue.js.map