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

package/plugin.js

@@ -65,12 +65,15 @@ const globals = new Set([
   'Map',
   'Set',
   '_log',
-  '_updateProps',
+  '_updatePropsPaper',
+  '_updatePropsFabric',
+  '_removeShadowNodeFromRegistry',
   'RegExp',
   'Error',
   'global',
   '_measure',
   '_scrollTo',
+  '_dispatchCommand',
   '_setGestureState',
   '_getCurrentTime',
   '_eventTimestamp',
@@ -331,7 +334,7 @@ function makeWorkletName(t, fun) {
   return '_f'; // fallback for ArrowFunctionExpression and unnamed FunctionExpression
 }
 
-function makeWorklet(t, fun, fileName) {
+function makeWorklet(t, fun, state) {
   // Returns a new FunctionExpression which is a workletized version of provided
   // FunctionDeclaration, FunctionExpression, ArrowFunctionExpression or ObjectMethod.
 
@@ -358,7 +361,7 @@ function makeWorklet(t, fun, fileName) {
     '\n(' + (t.isObjectMethod(fun) ? 'function ' : '') + fun.toString() + '\n)';
 
   const transformed = transformSync(code, {
-    filename: fileName,
+    filename: state.file.opts.filename,
     presets: ['@babel/preset-typescript'],
     plugins: [
       '@babel/plugin-transform-shorthand-properties',
@@ -445,11 +448,17 @@ function makeWorklet(t, fun, fileName) {
   );
   const workletHash = hash(funString);
 
+  let location = state.file.opts.filename;
+  if (state.opts.relativeSourceLocation) {
+    const path = require('path');
+    location = path.relative(state.cwd, location);
+  }
+
   const loc = fun && fun.node && fun.node.loc && fun.node.loc.start;
   if (loc) {
     const { line, column } = loc;
     if (typeof line === 'number' && typeof column === 'number') {
-      fileName = `${fileName} (${line}:${column})`;
+      location = `${location} (${line}:${column})`;
     }
   }
 
@@ -490,7 +499,7 @@ function makeWorklet(t, fun, fileName) {
           t.identifier('__location'),
           false
         ),
-        t.stringLiteral(fileName)
+        t.stringLiteral(location)
       )
     ),
   ];
@@ -511,18 +520,6 @@ function makeWorklet(t, fun, fileName) {
     );
   }
 
-  statements.push(
-    t.expressionStatement(
-      t.callExpression(
-        t.memberExpression(
-          t.identifier('global'),
-          t.identifier('__reanimatedWorkletInit'),
-          false
-        ),
-        [privateFunctionId]
-      )
-    )
-  );
   statements.push(t.returnStatement(privateFunctionId));
 
   const newFun = t.functionExpression(fun.id, [], t.blockStatement(statements));
@@ -530,7 +527,7 @@ function makeWorklet(t, fun, fileName) {
   return newFun;
 }
 
-function processWorkletFunction(t, fun, fileName) {
+function processWorkletFunction(t, fun, state) {
   // Replaces FunctionDeclaration, FunctionExpression or ArrowFunctionExpression
   // with a workletized version of itself.
 
@@ -538,7 +535,7 @@ function processWorkletFunction(t, fun, fileName) {
     return;
   }
 
-  const newFun = makeWorklet(t, fun, fileName);
+  const newFun = makeWorklet(t, fun, state);
 
   const replacement = t.callExpression(newFun, []);
 
@@ -558,14 +555,14 @@ function processWorkletFunction(t, fun, fileName) {
   );
 }
 
-function processWorkletObjectMethod(t, path, fileName) {
+function processWorkletObjectMethod(t, path, state) {
   // Replaces ObjectMethod with a workletized version of itself.
 
   if (!t.isFunctionParent(path)) {
     return;
   }
 
-  const newFun = makeWorklet(t, path, fileName);
+  const newFun = makeWorklet(t, path, state);
 
   const replacement = t.objectProperty(
     t.identifier(path.node.key.name),
@@ -575,7 +572,7 @@ function processWorkletObjectMethod(t, path, fileName) {
   path.replaceWith(replacement);
 }
 
-function processIfWorkletNode(t, fun, fileName) {
+function processIfWorkletNode(t, fun, state) {
   fun.traverse({
     DirectiveLiteral(path) {
       const value = path.node.value;
@@ -593,14 +590,14 @@ function processIfWorkletNode(t, fun, fileName) {
               directive.value.value === 'worklet'
           )
         ) {
-          processWorkletFunction(t, fun, fileName);
+          processWorkletFunction(t, fun, state);
         }
       }
     },
   });
 }
 
-function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
+function processIfGestureHandlerEventCallbackFunctionNode(t, fun, state) {
   // Auto-workletizes React Native Gesture Handler callback functions.
   // Detects `Gesture.Tap().onEnd(<fun>)` or similar, but skips `something.onEnd(<fun>)`.
   // Supports method chaining as well, e.g. `Gesture.Tap().onStart(<fun1>).onUpdate(<fun2>).onEnd(<fun3>)`.
@@ -653,7 +650,7 @@ function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
     t.isCallExpression(fun.parent) &&
     isGestureObjectEventCallbackMethod(t, fun.parent.callee)
   ) {
-    processWorkletFunction(t, fun, fileName);
+    processWorkletFunction(t, fun, state);
   }
 }
 
@@ -709,7 +706,7 @@ function isGestureObject(t, node) {
   );
 }
 
-function processWorklets(t, path, fileName) {
+function processWorklets(t, path, state) {
   const name =
     path.node.callee.type === 'MemberExpression'
       ? path.node.callee.property.name
@@ -721,17 +718,17 @@ function processWorklets(t, path, fileName) {
     const properties = path.get('arguments.0.properties');
     for (const property of properties) {
       if (t.isObjectMethod(property)) {
-        processWorkletObjectMethod(t, property, fileName);
+        processWorkletObjectMethod(t, property, state);
       } else {
         const value = property.get('value');
-        processWorkletFunction(t, value, fileName);
+        processWorkletFunction(t, value, state);
       }
     }
   } else {
     const indexes = functionArgsToWorkletize.get(name);
     if (Array.isArray(indexes)) {
       indexes.forEach((index) => {
-        processWorkletFunction(t, path.get(`arguments.${index}`), fileName);
+        processWorkletFunction(t, path.get(`arguments.${index}`), state);
       });
     }
   }
@@ -776,14 +773,13 @@ module.exports = function ({ types: t }) {
     visitor: {
       CallExpression: {
         enter(path, state) {
-          processWorklets(t, path, state.file.opts.filename);
+          processWorklets(t, path, state);
         },
       },
       'FunctionDeclaration|FunctionExpression|ArrowFunctionExpression': {
         enter(path, state) {
-          const fileName = state.file.opts.filename;
-          processIfWorkletNode(t, path, fileName);
-          processIfGestureHandlerEventCallbackFunctionNode(t, path, fileName);
+          processIfWorkletNode(t, path, state);
+          processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
     },

package/react-native-reanimated.d.ts

@@ -498,10 +498,17 @@ declare module 'react-native-reanimated' {
     interval: number;
   };
 
+  export type AnimatedSensor = {
+    sensor: SensorValue3D | SensorValueRotation | null;
+    unregister: () => void;
+    isAvailable: boolean;
+    config: SensorConfig;
+  };
+
   export function useAnimatedSensor(
     sensorType: SensorType,
     userConfig?: SensorConfig
-  );
+  ): AnimatedSensor;
 
   export interface ExitAnimationsValues {
     currentOriginX: number;
@@ -614,14 +621,19 @@ declare module 'react-native-reanimated' {
     callback?: AnimationCallback
   ): number;
   export function cancelAnimation<T>(sharedValue: SharedValue<T>): void;
-  export function withDelay<T extends AnimatableValue>(delayMS: number, delayedAnimation: T): T;
+  export function withDelay<T extends AnimatableValue>(
+    delayMS: number,
+    delayedAnimation: T
+  ): T;
   export function withRepeat<T extends AnimatableValue>(
     animation: T,
     numberOfReps?: number,
     reverse?: boolean,
     callback?: AnimationCallback
   ): T;
-  export function withSequence<T extends AnimatableValue>(...animations: [T, ...T[]]): T;
+  export function withSequence<T extends AnimatableValue>(
+    ...animations: [T, ...T[]]
+  ): T;
 
   // reanimated2 functions
   export function runOnUI<A extends any[], R>(

package/src/Animated.js

@@ -1,10 +1,8 @@
-import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
-import * as reanimated1 from './reanimated1';
 import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
@@ -14,18 +12,7 @@ const Animated = {
   // configuration
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
-  // reanimated 1
-  ...reanimated1,
 };
 
 export * from './reanimated2';
-export * from './reanimated1';
 export default Animated;
-
-// I think we can ignore this message as long as Gesture Handler doesn't
-// try to load the Reanimated module. I figured it should be here instead of
-// RNGH because this prevents the message from being displayed for all
-// versions of RNGH.
-LogBox.ignoreLogs([
-  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
-]);

package/src/ConfigHelper.ts

@@ -78,7 +78,6 @@ let NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean> = {
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
-  opacity: true,
   elevation: true,
   fontSize: true,
   lineHeight: true,

package/src/createAnimatedComponent.tsx

@@ -1,19 +1,8 @@
 import React, { Component, ComponentType, MutableRefObject, Ref } 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';
-
 import invariant from 'invariant';
 import { adaptViewConfig } from './ConfigHelper';
 import { RNRenderer } from './reanimated2/platform-specific/RNRenderer';
@@ -38,44 +27,22 @@ import {
   EntryExitAnimationFunction,
   ILayoutAnimationBuilder,
 } from './reanimated2/layoutReanimation';
-import { SharedValue, StyleProps } from './reanimated2/commonTypes';
+import {
+  SharedValue,
+  StyleProps,
+  ShadowNodeWrapper,
+} from './reanimated2/commonTypes';
 import {
   ViewDescriptorsSet,
   ViewRefSet,
 } from './reanimated2/ViewDescriptorsSet';
-
-const NODE_MAPPING = new Map();
-
-interface ListenerData {
-  viewTag: number;
-  props: StyleProps;
-}
-
-function listener(data: ListenerData) {
-  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: unknown): boolean {
-  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 as Record<string, unknown>)[key])
-    );
-  }
-  return false;
-}
-
 type NestedArray<T> = T | NestedArray<T>[];
 function flattenArray<T>(array: NestedArray<T>): T[] {
   if (!Array.isArray(array)) {
@@ -166,14 +133,6 @@ export interface InitialComponentProps extends Record<string, unknown> {
   collapsable?: boolean;
 }
 
-interface PropsAnimated {
-  __onEvaluate: () => StyleProps;
-  __detach: () => void;
-  __getValue: () => StyleProps;
-  update: () => void;
-  setNativeView: (view: Component) => void;
-}
-
 export default function createAnimatedComponent(
   Component: ComponentType<InitialComponentProps>,
   options?: Options<InitialComponentProps>
@@ -188,7 +147,6 @@ export default function createAnimatedComponent(
   class AnimatedComponent extends React.Component<
     AnimatedComponentProps<InitialComponentProps>
   > {
-    _invokeAnimatedPropsCallbackOnMount = false;
     _styles: StyleProps[] | null = null;
     _animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
     _viewTag = -1;
@@ -196,13 +154,11 @@ export default function createAnimatedComponent(
     animatedStyle: { value: StyleProps } = { value: {} };
     initialStyle = {};
     sv: SharedValue<null | Record<string, unknown>> | null;
-    _propsAnimated?: PropsAnimated;
     _component: ComponentRef | null = null;
     static displayName: string;
 
     constructor(props: AnimatedComponentProps<InitialComponentProps>) {
       super(props);
-      this._attachProps(this.props);
       if (isJest()) {
         this.animatedStyle = { value: {} };
       }
@@ -210,43 +166,21 @@ export default function createAnimatedComponent(
     }
 
     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() {
-      // Make sure to get the scrollable node for components that implement
-      // `ScrollResponder.Mixin`.
-      return this._component?.getScrollableNode
-        ? this._component.getScrollableNode()
-        : this._component;
-    }
-
     _attachNativeEvents() {
-      const node = this._getEventViewRef();
-      const viewTag = findNodeHandle(options?.setNativeProps ? this : node);
+      const viewTag = findNodeHandle(this);
       for (const key in this.props) {
         const prop = this.props[key];
-        if (prop instanceof AnimatedEvent) {
-          (prop as AnimatedEvent).attachEvent(node, key);
-        } else if (
+        if (
           has('current', prop) &&
           prop.current instanceof WorkletEventHandler
         ) {
@@ -256,13 +190,9 @@ export default function createAnimatedComponent(
     }
 
     _detachNativeEvents() {
-      const node = this._getEventViewRef();
-
       for (const key in this.props) {
         const prop = this.props[key];
-        if (prop instanceof AnimatedEvent) {
-          (prop as AnimatedEvent).detachEvent(node, key);
-        } else if (
+        if (
           has('current', prop) &&
           prop.current instanceof WorkletEventHandler
         ) {
@@ -285,22 +215,24 @@ export default function createAnimatedComponent(
         if (this.props.animatedProps?.viewDescriptors) {
           this.props.animatedProps.viewDescriptors.remove(this._viewTag);
         }
+        if (global._IS_FABRIC) {
+          const shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+          runOnUI(() => {
+            'worklet';
+            _removeShadowNodeFromRegistry(shadowNodeWrapper);
+          })();
+        }
       }
     }
 
     _reattachNativeEvents(
       prevProps: AnimatedComponentProps<InitialComponentProps>
     ) {
-      const node = this._getEventViewRef();
-      const attached = new Set();
-      const nextEvts = new Set();
       let viewTag: number | undefined;
 
       for (const key in this.props) {
         const prop = this.props[key];
-        if (prop instanceof AnimatedEvent) {
-          nextEvts.add((prop as AnimatedEvent).__nodeID);
-        } else if (
+        if (
           has('current', prop) &&
           prop.current instanceof WorkletEventHandler
         ) {
@@ -311,15 +243,7 @@ export default function createAnimatedComponent(
       }
       for (const key in prevProps) {
         const prop = this.props[key];
-        if (prop instanceof AnimatedEvent) {
-          if (!nextEvts.has((prop as AnimatedEvent).__nodeID)) {
-            // event was in prev props but not in current props, we detach
-            (prop as AnimatedEvent).detachEvent(node, key);
-          } else {
-            // event was in prev and is still in current props
-            attached.add((prop as AnimatedEvent).__nodeID);
-          }
-        } else if (
+        if (
           has('current', prop) &&
           prop.current instanceof WorkletEventHandler &&
           prop.current.reattachNeeded
@@ -331,12 +255,6 @@ export default function createAnimatedComponent(
       for (const key in this.props) {
         const prop = this.props[key];
         if (
-          prop instanceof AnimatedEvent &&
-          !attached.has((prop as AnimatedEvent).__nodeID)
-        ) {
-          // not yet attached
-          (prop as AnimatedEvent).attachEvent(node, key);
-        } else if (
           has('current', prop) &&
           prop.current instanceof WorkletEventHandler &&
           prop.current.reattachNeeded
@@ -348,49 +266,6 @@ export default function createAnimatedComponent(
       }
     }
 
-    // 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.
-    _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());
-      }
-    };
-
-    _attachProps(nextProps: StyleProps) {
-      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: StyleProps) {
       if (options?.setNativeProps) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -401,14 +276,6 @@ export default function createAnimatedComponent(
       }
     }
 
-    _attachPropUpdater() {
-      const viewTag = findNodeHandle(this);
-      NODE_MAPPING.set(viewTag, this);
-      if (NODE_MAPPING.size === 1) {
-        ReanimatedEventEmitter.addListener('onReanimatedPropsChange', listener);
-      }
-    }
-
     _attachAnimatedStyles() {
       const styles = this.props.style
         ? onlyAnimatedStyles(flattenArray<StyleProps>(this.props.style))
@@ -421,9 +288,11 @@ export default function createAnimatedComponent(
 
       let viewTag: number | null;
       let viewName: string | null;
+      let shadowNodeWrapper: ShadowNodeWrapper | null = 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
         const hostInstance = RNRenderer.findHostInstance_DEPRECATED(this);
@@ -445,6 +314,10 @@ export default function createAnimatedComponent(
         if (hasReanimated2Props && hostInstance?.viewConfig) {
           adaptViewConfig(hostInstance.viewConfig);
         }
+
+        if (global._IS_FABRIC) {
+          shadowNodeWrapper = getShadowNodeWrapperFromRef(this);
+        }
       }
       this._viewTag = viewTag as number;
 
@@ -470,7 +343,11 @@ export default function createAnimatedComponent(
       }
 
       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
@@ -501,27 +378,16 @@ export default function createAnimatedComponent(
           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: AnimatedComponentProps<InitialComponentProps>
     ) {
-      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();
     }
 
@@ -578,21 +444,6 @@ export default function createAnimatedComponent(
       },
     });
 
-    _filterNonAnimatedStyle(inputStyle: StyleProps) {
-      const style: StyleProps = {};
-      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: AnimatedComponentProps<InitialComponentProps>
     ): Record<string, unknown> {
@@ -617,9 +468,7 @@ export default function createAnimatedComponent(
               return style;
             }
           });
-          props[key] = this._filterNonAnimatedStyle(
-            StyleSheet.flatten(processedStyle)
-          );
+          props[key] = StyleSheet.flatten(processedStyle);
         } else if (key === 'animatedProps') {
           const animatedProp = inputProps.animatedProps as Partial<
             AnimatedComponentProps<AnimatedProps>
@@ -630,12 +479,6 @@ export default function createAnimatedComponent(
               animatedProp.viewsRef?.add(this);
             });
           }
-        } 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
@@ -651,14 +494,11 @@ export default function createAnimatedComponent(
           } else {
             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 as AnimatedValue)._startingValue;
+        } else if (
+          key !== 'onGestureHandlerStateChange' ||
+          !isChromeDebugger()
+        ) {
+          props[key] = value;
         }
       }
       return props;