react-native-reanimated 2.8.0 → 3.0.0-rc.0

package/lib/createAnimatedComponent.js

@@ -1,14 +1,5 @@
 import React from 'react';
 import { findNodeHandle, Platform, StyleSheet } from 'react-native';
-import ReanimatedEventEmitter from './ReanimatedEventEmitter';
-// @ts-ignore JS file
-import AnimatedEvent from './reanimated1/core/AnimatedEvent';
-// @ts-ignore JS file
-import AnimatedNode from './reanimated1/core/AnimatedNode';
-// @ts-ignore JS file
-import AnimatedValue from './reanimated1/core/AnimatedValue';
-// @ts-ignore JS file
-import { createOrReusePropsNode } from './reanimated1/core/AnimatedProps';
 import WorkletEventHandler from './reanimated2/WorkletEventHandler';
 import setAndForwardRef from './setAndForwardRef';
 import './reanimated2/layoutReanimation/LayoutAnimationRepository';
@@ -19,27 +10,11 @@ import { makeMutable, runOnUI, enableLayoutAnimations, } from './reanimated2/cor
 import { DefaultEntering, DefaultExiting, DefaultLayout, } from './reanimated2/layoutReanimation/defaultAnimations/Default';
 import { isJest, isChromeDebugger, shouldBeUseWeb, } from './reanimated2/PlatformChecker';
 import { initialUpdaterRun } from './reanimated2/animation';
-const NODE_MAPPING = new Map();
-function listener(data) {
-    const component = NODE_MAPPING.get(data.viewTag);
-    component && component._updateFromNative(data.props);
-}
+import { getShadowNodeWrapperFromRef } from './reanimated2/fabricUtils';
 function dummyListener() {
     // empty listener we use to assign to listener properties for which animated
     // event is used.
 }
-function hasAnimatedNodes(value) {
-    if (value instanceof AnimatedNode) {
-        return true;
-    }
-    if (Array.isArray(value)) {
-        return value.some((item) => hasAnimatedNodes(item));
-    }
-    if (value && typeof value === 'object') {
-        return Object.keys(value).some((key) => hasAnimatedNodes(value[key]));
-    }
-    return false;
-}
 function flattenArray(array) {
     if (!Array.isArray(array)) {
         return [array];
@@ -85,35 +60,12 @@ export default function createAnimatedComponent(Component, options) {
     class AnimatedComponent extends React.Component {
         constructor(props) {
             super(props);
-            this._invokeAnimatedPropsCallbackOnMount = false;
             this._styles = null;
             this._viewTag = -1;
             this._isFirstRender = true;
             this.animatedStyle = { value: {} };
             this.initialStyle = {};
             this._component = null;
-            // The system is best designed when setNativeProps is implemented. It is
-            // able to avoid re-rendering and directly set the attributes that changed.
-            // However, setNativeProps can only be implemented on native components
-            // If you want to animate a composite component, you need to re-render it.
-            // In this case, we have a fallback that uses forceUpdate.
-            this._animatedPropsCallback = () => {
-                if (this._component == null) {
-                    // AnimatedProps is created in will-mount because it's used in render.
-                    // But this callback may be invoked before mount in async mode,
-                    // In which case we should defer the setNativeProps() call.
-                    // React may throw away uncommitted work in async mode,
-                    // So a deferred call won't always be invoked.
-                    this._invokeAnimatedPropsCallbackOnMount = true;
-                }
-                else if (typeof this._component.setNativeProps !== 'function') {
-                    this.forceUpdate();
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    this._component.setNativeProps(this._propsAnimated.__getValue());
-                }
-            };
             this._setComponentRef = setAndForwardRef({
                 getForwardedRef: () => this.props.forwardedRef,
                 setLocalRef: (ref) => {
@@ -156,60 +108,34 @@ export default function createAnimatedComponent(Component, options) {
                     }
                 },
             });
-            this._attachProps(this.props);
             if (isJest()) {
                 this.animatedStyle = { value: {} };
             }
             this.sv = makeMutable({});
         }
         componentWillUnmount() {
-            this._detachPropUpdater();
-            this._propsAnimated && this._propsAnimated.__detach();
             this._detachNativeEvents();
             this._detachStyles();
             this.sv = null;
         }
         componentDidMount() {
-            if (this._invokeAnimatedPropsCallbackOnMount) {
-                this._invokeAnimatedPropsCallbackOnMount = false;
-                this._animatedPropsCallback();
-            }
-            this._propsAnimated &&
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this._propsAnimated.setNativeView(this._component);
             this._attachNativeEvents();
-            this._attachPropUpdater();
             this._attachAnimatedStyles();
         }
-        _getEventViewRef() {
-            var _a;
-            // Make sure to get the scrollable node for components that implement
-            // `ScrollResponder.Mixin`.
-            return ((_a = this._component) === null || _a === void 0 ? void 0 : _a.getScrollableNode) ? this._component.getScrollableNode()
-                : this._component;
-        }
         _attachNativeEvents() {
-            const node = this._getEventViewRef();
-            const viewTag = findNodeHandle((options === null || options === void 0 ? void 0 : options.setNativeProps) ? this : node);
+            const viewTag = findNodeHandle(this);
             for (const key in this.props) {
                 const prop = this.props[key];
-                if (prop instanceof AnimatedEvent) {
-                    prop.attachEvent(node, key);
-                }
-                else if (has('current', prop) &&
+                if (has('current', prop) &&
                     prop.current instanceof WorkletEventHandler) {
                     prop.current.registerForEvents(viewTag, key);
                 }
             }
         }
         _detachNativeEvents() {
-            const node = this._getEventViewRef();
             for (const key in this.props) {
                 const prop = this.props[key];
-                if (prop instanceof AnimatedEvent) {
-                    prop.detachEvent(node, key);
-                }
-                else if (has('current', prop) &&
+                if (has('current', prop) &&
                     prop.current instanceof WorkletEventHandler) {
                     prop.current.unregisterFromEvents();
                 }
@@ -231,19 +157,20 @@ export default function createAnimatedComponent(Component, options) {
                 if ((_a = this.props.animatedProps) === null || _a === void 0 ? void 0 : _a.viewDescriptors) {
                     this.props.animatedProps.viewDescriptors.remove(this._viewTag);
                 }
+                if (global._IS_FABRIC) {
+                    const shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+                    runOnUI(() => {
+                        'worklet';
+                        _removeShadowNodeFromRegistry(shadowNodeWrapper);
+                    })();
+                }
             }
         }
         _reattachNativeEvents(prevProps) {
-            const node = this._getEventViewRef();
-            const attached = new Set();
-            const nextEvts = new Set();
             let viewTag;
             for (const key in this.props) {
                 const prop = this.props[key];
-                if (prop instanceof AnimatedEvent) {
-                    nextEvts.add(prop.__nodeID);
-                }
-                else if (has('current', prop) &&
+                if (has('current', prop) &&
                     prop.current instanceof WorkletEventHandler) {
                     if (viewTag === undefined) {
                         viewTag = prop.current.viewTag;
@@ -252,17 +179,7 @@ export default function createAnimatedComponent(Component, options) {
             }
             for (const key in prevProps) {
                 const prop = this.props[key];
-                if (prop instanceof AnimatedEvent) {
-                    if (!nextEvts.has(prop.__nodeID)) {
-                        // event was in prev props but not in current props, we detach
-                        prop.detachEvent(node, key);
-                    }
-                    else {
-                        // event was in prev and is still in current props
-                        attached.add(prop.__nodeID);
-                    }
-                }
-                else if (has('current', prop) &&
+                if (has('current', prop) &&
                     prop.current instanceof WorkletEventHandler &&
                     prop.current.reattachNeeded) {
                     prop.current.unregisterFromEvents();
@@ -270,12 +187,7 @@ export default function createAnimatedComponent(Component, options) {
             }
             for (const key in this.props) {
                 const prop = this.props[key];
-                if (prop instanceof AnimatedEvent &&
-                    !attached.has(prop.__nodeID)) {
-                    // not yet attached
-                    prop.attachEvent(node, key);
-                }
-                else if (has('current', prop) &&
+                if (has('current', prop) &&
                     prop.current instanceof WorkletEventHandler &&
                     prop.current.reattachNeeded) {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -284,22 +196,6 @@ export default function createAnimatedComponent(Component, options) {
                 }
             }
         }
-        _attachProps(nextProps) {
-            const oldPropsAnimated = this._propsAnimated;
-            this._propsAnimated = createOrReusePropsNode(nextProps, this._animatedPropsCallback, oldPropsAnimated);
-            // If prop node has been reused we don't need to call into "__detach"
-            if (oldPropsAnimated !== this._propsAnimated) {
-                // When you call detach, it removes the element from the parent list
-                // of children. If it goes to 0, then the parent also detaches itself
-                // and so on.
-                // An optimization is to attach the new elements and THEN detach the old
-                // ones instead of detaching and THEN attaching.
-                // This way the intermediate state isn't to go to 0 and trigger
-                // this expensive recursive detaching to then re-attach everything on
-                // the very next operation.
-                oldPropsAnimated && oldPropsAnimated.__detach();
-            }
-        }
         _updateFromNative(props) {
             var _a, _b;
             if (options === null || options === void 0 ? void 0 : options.setNativeProps) {
@@ -311,13 +207,6 @@ export default function createAnimatedComponent(Component, options) {
                 (_b = (_a = this._component) === null || _a === void 0 ? void 0 : _a.setNativeProps) === null || _b === void 0 ? void 0 : _b.call(_a, props);
             }
         }
-        _attachPropUpdater() {
-            const viewTag = findNodeHandle(this);
-            NODE_MAPPING.set(viewTag, this);
-            if (NODE_MAPPING.size === 1) {
-                ReanimatedEventEmitter.addListener('onReanimatedPropsChange', listener);
-            }
-        }
         _attachAnimatedStyles() {
             var _a, _b, _c;
             const styles = this.props.style
@@ -329,9 +218,11 @@ export default function createAnimatedComponent(Component, options) {
             this._animatedProps = this.props.animatedProps;
             let viewTag;
             let viewName;
+            let shadowNodeWrapper = null;
             if (Platform.OS === 'web') {
                 viewTag = findNodeHandle(this);
                 viewName = null;
+                shadowNodeWrapper = null;
             }
             else {
                 // hostInstance can be null for a component that doesn't render anything (render function returns null). Example: svg Stop: https://github.com/react-native-svg/react-native-svg/blob/develop/src/elements/Stop.tsx
@@ -351,6 +242,9 @@ export default function createAnimatedComponent(Component, options) {
                 if (hasReanimated2Props && (hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance.viewConfig)) {
                     adaptViewConfig(hostInstance.viewConfig);
                 }
+                if (global._IS_FABRIC) {
+                    shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+                }
             }
             this._viewTag = viewTag;
             // remove old styles
@@ -370,7 +264,11 @@ export default function createAnimatedComponent(Component, options) {
                 }
             }
             styles.forEach((style) => {
-                style.viewDescriptors.add({ tag: viewTag, name: viewName });
+                style.viewDescriptors.add({
+                    tag: viewTag,
+                    name: viewName,
+                    shadowNodeWrapper,
+                });
                 if (isJest()) {
                     /**
                      * We need to connect Jest's TestObject instance whose contains just props object
@@ -394,39 +292,15 @@ export default function createAnimatedComponent(Component, options) {
                     tag: viewTag,
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     name: viewName,
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    shadowNodeWrapper: shadowNodeWrapper,
                 });
             }
         }
-        _detachPropUpdater() {
-            const viewTag = findNodeHandle(this);
-            NODE_MAPPING.delete(viewTag);
-            if (NODE_MAPPING.size === 0) {
-                ReanimatedEventEmitter.removeAllListeners('onReanimatedPropsChange');
-            }
-        }
         componentDidUpdate(prevProps) {
-            this._attachProps(this.props);
             this._reattachNativeEvents(prevProps);
-            this._propsAnimated &&
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this._propsAnimated.setNativeView(this._component);
             this._attachAnimatedStyles();
         }
-        _filterNonAnimatedStyle(inputStyle) {
-            const style = {};
-            for (const key in inputStyle) {
-                const value = inputStyle[key];
-                if (!hasAnimatedNodes(value)) {
-                    style[key] = value;
-                }
-                else if (value instanceof AnimatedValue) {
-                    // if any style in animated component is set directly to the `Value` we set those styles to the first value of `Value` node in order
-                    // to avoid flash of default styles when `Value` is being asynchrounously sent via bridge and initialized in the native side.
-                    style[key] = value._startingValue;
-                }
-            }
-            return style;
-        }
         _filterNonAnimatedProps(inputProps) {
             const props = {};
             for (const key in inputProps) {
@@ -447,7 +321,7 @@ export default function createAnimatedComponent(Component, options) {
                             return style;
                         }
                     });
-                    props[key] = this._filterNonAnimatedStyle(StyleSheet.flatten(processedStyle));
+                    props[key] = StyleSheet.flatten(processedStyle);
                 }
                 else if (key === 'animatedProps') {
                     const animatedProp = inputProps.animatedProps;
@@ -459,13 +333,6 @@ export default function createAnimatedComponent(Component, options) {
                         });
                     }
                 }
-                else if (value instanceof AnimatedEvent) {
-                    // we cannot filter out event listeners completely as some components
-                    // rely on having a callback registered in order to generate events
-                    // alltogether. Therefore we provide a dummy callback here to allow
-                    // native event dispatcher to hijack events.
-                    props[key] = dummyListener;
-                }
                 else if (has('current', value) &&
                     value.current instanceof WorkletEventHandler) {
                     if (value.current.eventNames.length > 0) {
@@ -479,15 +346,9 @@ export default function createAnimatedComponent(Component, options) {
                         props[key] = dummyListener;
                     }
                 }
-                else if (!(value instanceof AnimatedNode)) {
-                    if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
-                        props[key] = value;
-                    }
-                }
-                else if (value instanceof AnimatedValue) {
-                    // if any prop in animated component is set directly to the `Value` we set those props to the first value of `Value` node in order
-                    // to avoid default values for a short moment when `Value` is being asynchrounously sent via bridge and initialized in the native side.
-                    props[key] = value._startingValue;
+                else if (key !== 'onGestureHandlerStateChange' ||
+                    !isChromeDebugger()) {
+                    props[key] = value;
                 }
             }
             return props;

package/lib/index.js

@@ -3,7 +3,6 @@ import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
-import * as reanimated1 from './reanimated1';
 import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
@@ -13,10 +12,7 @@ const Animated = {
   // configuration
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
-  // reanimated 1
-  ...reanimated1,
 };
 
 export * from './reanimated2';
-export * from './reanimated1';
 export default Animated;

package/lib/reanimated2/Easing.js

@@ -1,9 +1,3 @@
-// spread and rest parameters can't be used in worklets right now
-/* eslint-disable prefer-rest-params */
-/* eslint-disable prefer-spread */
-/* global _WORKLET */
-// @ts-ignore reanimated1/Easing is JS file
-import EasingNode from '../reanimated1/Easing';
 import { Bezier } from './Bezier';
 /**
  * A linear function, `f(t) = t`. Position correlates to elapsed time one to
@@ -209,40 +203,4 @@ const EasingObject = {
     out,
     inOut,
 };
-// TODO type worklets
-function createChecker(worklet, workletName, prevArgs) {
-    /* should return Animated.Value or worklet */
-    function checkIfReaOne() {
-        'worklet';
-        if (arguments && !_WORKLET) {
-            for (let i = 0; i < arguments.length; i++) {
-                const arg = arguments[i];
-                if (arg && arg.__nodeID) {
-                    console.warn(`Easing was renamed to EasingNode in Reanimated 2. Please use EasingNode instead`);
-                    if (prevArgs) {
-                        return EasingNode[workletName]
-                            .apply(undefined, prevArgs)
-                            .apply(undefined, arguments);
-                    }
-                    return EasingNode[workletName].apply(undefined, arguments);
-                }
-            }
-        }
-        // @ts-ignore this is implicitly any - TODO
-        const res = worklet.apply(this, arguments);
-        if (!_WORKLET && res && typeof res === 'function' && res.__workletHash) {
-            return createChecker(res, workletName, arguments);
-        }
-        return res;
-    }
-    // use original worklet on UI side
-    checkIfReaOne._closure = worklet._closure;
-    checkIfReaOne.asString = worklet.asString;
-    checkIfReaOne.__workletHash = worklet.__workletHash;
-    checkIfReaOne.__location = worklet.__location;
-    return checkIfReaOne;
-}
-Object.keys(EasingObject).forEach((key) => {
-    EasingObject[key] = createChecker(EasingObject[key], key);
-});
 export const Easing = EasingObject;

package/lib/reanimated2/NativeMethods.js

@@ -24,13 +24,30 @@ export function measure(animatedRef) {
     }
     return result;
 }
-export function scrollTo(animatedRef, x, y, animated) {
+export function dispatchCommand(animatedRef, commandName, args) {
     'worklet';
     if (!_WORKLET || isNativeIndefined) {
         return;
     }
-    const viewTag = animatedRef();
-    _scrollTo(viewTag, x, y, animated);
+    const shadowNodeWrapper = animatedRef();
+    _dispatchCommand(shadowNodeWrapper, commandName, args);
+}
+export let scrollTo;
+if (global._IS_FABRIC) {
+    scrollTo = (animatedRef, x, y, animated) => {
+        'worklet';
+        dispatchCommand(animatedRef, 'scrollTo', [x, y, animated]);
+    };
+}
+else {
+    scrollTo = (animatedRef, x, y, animated) => {
+        'worklet';
+        if (!_WORKLET || isNativeIndefined) {
+            return;
+        }
+        const viewTag = animatedRef();
+        _scrollTo(viewTag, x, y, animated);
+    };
 }
 export function setGestureState(handlerTag, newState) {
     'worklet';

package/lib/reanimated2/UpdateProps.js

@@ -32,17 +32,32 @@ if (shouldBeUseWeb()) {
     };
 }
 else {
-    updatePropsByPlatform = (viewDescriptors, updates, _) => {
-        'worklet';
-        for (const key in updates) {
-            if (ColorProperties.indexOf(key) !== -1) {
-                updates[key] = processColor(updates[key]);
+    if (global._IS_FABRIC) {
+        updatePropsByPlatform = (viewDescriptors, updates, _) => {
+            'worklet';
+            for (const key in updates) {
+                if (ColorProperties.indexOf(key) !== -1) {
+                    updates[key] = processColor(updates[key]);
+                }
             }
-        }
-        viewDescriptors.value.forEach((viewDescriptor) => {
-            _updateProps(viewDescriptor.tag, viewDescriptor.name || 'RCTView', updates);
-        });
-    };
+            viewDescriptors.value.forEach((viewDescriptor) => {
+                _updatePropsFabric(viewDescriptor.shadowNodeWrapper, updates);
+            });
+        };
+    }
+    else {
+        updatePropsByPlatform = (viewDescriptors, updates, _) => {
+            'worklet';
+            for (const key in updates) {
+                if (ColorProperties.indexOf(key) !== -1) {
+                    updates[key] = processColor(updates[key]);
+                }
+            }
+            viewDescriptors.value.forEach((viewDescriptor) => {
+                _updatePropsPaper(viewDescriptor.tag, viewDescriptor.name || 'RCTView', updates);
+            });
+        };
+    }
 }
 export const updateProps = updatePropsByPlatform;
 export const updatePropsJestWrapper = (viewDescriptors, updates, maybeViewRef, animatedStyle, adapters) => {

package/lib/reanimated2/core.js

@@ -1,4 +1,4 @@
-/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
+/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
 import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
@@ -52,6 +52,9 @@ export function makeShareable(value) {
     return NativeReanimatedModule.makeShareable(value);
 }
 export function getViewProp(viewTag, propName) {
+    if (global._IS_FABRIC) {
+        throw new Error('[react-native-reanimated] `getViewProp` is not supported on Fabric yet');
+    }
     return new Promise((resolve, reject) => {
         return NativeReanimatedModule.getViewProp(viewTag, propName, (result) => {
             if (typeof result === 'string' && result.substr(0, 6) === 'error:') {

package/lib/reanimated2/fabricUtils.js

@@ -0,0 +1,18 @@
+/* eslint-disable camelcase */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let findHostInstance_DEPRECATED = (_ref) => null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    findHostInstance_DEPRECATED =
+        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+}
+catch (e) {
+    // do nothing
+}
+export function getShadowNodeWrapperFromHostInstance(hostInstance) {
+    // @ts-ignore Fabric
+    return hostInstance._internalInstanceHandle.stateNode.node;
+}
+export function getShadowNodeWrapperFromRef(ref) {
+    return getShadowNodeWrapperFromHostInstance(findHostInstance_DEPRECATED(ref));
+}

package/lib/reanimated2/globals.d.ts

@@ -1,9 +1,11 @@
 import { AnimatedStyle, StyleProps } from './commonTypes';
 import { ReanimatedConsole } from './core';
+import { ShadowNodeWrapper } from './hook/commonTypes';
 import { MeasuredDimensions } from './NativeMethods';
 import { NativeReanimated } from './NativeReanimated/NativeReanimated';
 declare global {
   const _WORKLET: boolean;
+  const _IS_FABRIC: boolean;
   const _frameTimestamp: number;
   const _eventTimestamp: number;
   const _setGlobalConsole: (console?: ReanimatedConsole) => void;
@@ -14,11 +16,18 @@ declare global {
     flag: { value: boolean; _value: boolean }
   ) => void;
   const _setGestureState: (handlerTag: number, newState: number) => void;
-  const _updateProps: (
+  const _updatePropsPaper: (
     tag: number,
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
+  const _updatePropsFabric: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    props: StyleProps | AnimatedStyle
+  ) => void;
+  const _removeShadowNodeFromRegistry: (
+    shadowNodeWrapper: ShadowNodeWrapper
+  ) => void;
   const _measure: (viewTag: number) => MeasuredDimensions;
   const _scrollTo: (
     viewTag: number,
@@ -26,6 +35,11 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _dispatchCommand: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    commandName: string,
+    args: Array<unknown>
+  ) => void;
   const _chronoNow: () => number;
   const ReanimatedDataMock: {
     now: () => number;
@@ -36,10 +50,12 @@ declare global {
       _log: (s: string) => void;
       _setGestureState: () => void;
       _WORKLET: boolean;
+      _IS_FABRIC: boolean;
       __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;
       _measure: () => MeasuredDimensions;
       _scrollTo: () => void;
+      _dispatchCommand: () => void;
       _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationRepository: {

package/lib/reanimated2/hook/useAnimatedRef.js

@@ -1,15 +1,19 @@
 import { useRef } from 'react';
-import { getTag } from '../NativeMethods';
 import { useSharedValue } from './useSharedValue';
+import { getTag } from '../NativeMethods';
+import { getShadowNodeWrapperFromHostInstance } from '../fabricUtils';
 export function useAnimatedRef() {
     const tag = useSharedValue(-1);
     const ref = useRef();
+    const isFabric = global._IS_FABRIC;
     if (!ref.current) {
         const fun = ((component) => {
             'worklet';
             // enters when ref is set by attaching to a component
             if (component) {
-                tag.value = getTag(component);
+                tag.value = isFabric
+                    ? getShadowNodeWrapperFromHostInstance(component)
+                    : getTag(component);
                 fun.current = component;
             }
             return tag.value;

package/lib/reanimated2/hook/utils.js

@@ -12,11 +12,6 @@ export function useEvent(handler, eventNames = [], rebuild = false) {
     else if (rebuild) {
         initRef.current.updateWorklet(handler);
     }
-    useEffect(() => {
-        return () => {
-            initRef.current = null;
-        };
-    }, []);
     return initRef;
 }
 export function useHandler(handlers, dependencies) {

package/lib/reanimated2/interpolateColor.js

@@ -1,9 +1,12 @@
 import { hsvToColor, RGBtoHSV, rgbaColor, processColor, red, green, blue, opacity, } from './Colors';
 import { makeMutable } from './core';
 import { interpolate } from './interpolation';
-// @ts-ignore JS file
-import { Extrapolate } from '../reanimated1/derived';
 import { useSharedValue } from './hook/useSharedValue';
+export const Extrapolate = {
+    EXTEND: 'extend',
+    CLAMP: 'clamp',
+    IDENTITY: 'identity',
+};
 const interpolateColorsHSV = (value, inputRange, colors) => {
     'worklet';
     const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);