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

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;

package/src/reanimated2/Easing.ts

@@ -1,11 +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';
 
 /**
@@ -291,49 +283,4 @@ const EasingObject = {
   inOut,
 };
 
-// TODO type worklets
-function createChecker(
-  worklet: any,
-  workletName: string,
-  prevArgs?: unknown
-): any {
-  /* should return Animated.Value or worklet */
-  function checkIfReaOne(): any {
-    '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;
-}
-
-type EasingObjT = Array<keyof typeof EasingObject>;
-(Object.keys(EasingObject) as EasingObjT).forEach((key) => {
-  EasingObject[key] = createChecker(EasingObject[key], key);
-});
-
 export const Easing = EasingObject;

package/src/reanimated2/NativeMethods.ts

@@ -1,4 +1,4 @@
-/* global _WORKLET _measure _scrollTo _setGestureState */
+/* global _WORKLET _measure _scrollTo _dispatchCommand _setGestureState */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { Component } from 'react';
@@ -48,18 +48,50 @@ export function measure(
   return result;
 }
 
-export function scrollTo(
+export function dispatchCommand(
   animatedRef: RefObjectFunction<Component>,
-  x: number,
-  y: number,
-  animated: boolean
+  commandName: string,
+  args: Array<unknown>
 ): void {
   'worklet';
   if (!_WORKLET || isNativeIndefined) {
     return;
   }
-  const viewTag = animatedRef();
-  _scrollTo(viewTag, x, y, animated);
+  const shadowNodeWrapper = animatedRef();
+  _dispatchCommand(shadowNodeWrapper, commandName, args);
+}
+
+export let scrollTo: (
+  animatedRef: RefObjectFunction<Component>,
+  x: number,
+  y: number,
+  animated: boolean
+) => void;
+
+if (global._IS_FABRIC) {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    dispatchCommand(animatedRef, 'scrollTo', [x, y, animated]);
+  };
+} else {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    if (!_WORKLET || isNativeIndefined) {
+      return;
+    }
+    const viewTag = animatedRef();
+    _scrollTo(viewTag, x, y, animated);
+  };
 }
 
 export function setGestureState(handlerTag: number, newState: number): void {

package/src/reanimated2/UpdateProps.ts

@@ -1,4 +1,4 @@
-/* global _updateProps */
+/* global _updatePropsPaper _updatePropsFabric */
 import { MutableRefObject } from 'react';
 import { processColor } from './Colors';
 import { AnimatedStyle, SharedValue, StyleProps } from './commonTypes';
@@ -43,27 +43,46 @@ if (shouldBeUseWeb()) {
     }
   };
 } else {
-  updatePropsByPlatform = (
-    viewDescriptors: SharedValue<Descriptor[]>,
-    updates: StyleProps | AnimatedStyle,
-    _: ViewRefSet<any> | undefined
-  ): void => {
-    'worklet';
+  if (global._IS_FABRIC) {
+    updatePropsByPlatform = (
+      viewDescriptors: SharedValue<Descriptor[]>,
+      updates: StyleProps | AnimatedStyle,
+      _: ViewRefSet<any> | undefined
+    ): void => {
+      'worklet';
 
-    for (const key in updates) {
-      if (ColorProperties.indexOf(key) !== -1) {
-        updates[key] = processColor(updates[key]);
+      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: SharedValue<Descriptor[]>,
+      updates: StyleProps | AnimatedStyle,
+      _: ViewRefSet<any> | undefined
+    ): void => {
+      '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: (

package/src/reanimated2/commonTypes.ts

@@ -15,7 +15,6 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Context } from './hook/commonTypes';
 
 export type TransformProperty =
   | PerpectiveTransform
@@ -47,6 +46,8 @@ export interface SharedValue<T> {
   value: T;
 }
 
+export type Context = Record<string, unknown>;
+
 export interface WorkletFunction {
   _closure?: Context;
   __workletHash?: number;
@@ -145,3 +146,5 @@ export type ValueRotation = {
 };
 
 export type SensorValueRotation = SharedValue<ValueRotation>;
+
+export type ShadowNodeWrapper = object;

package/src/reanimated2/component/FlatList.tsx

@@ -6,15 +6,18 @@ import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/c
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
+interface AnimatedFlatListProps {
+  onLayout: (event: LayoutChangeEvent) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children: React.ReactNode;
+}
+
 const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
-  const cellRenderer: React.FC<{
-    onLayout: (event: LayoutChangeEvent) => void;
-  }> = (props) => {
+  const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
       <WrappedComponents.View
         layout={itemLayoutAnimation}
-        onLayout={props.onLayout}
-      >
+        onLayout={props.onLayout}>
         {props.children}
       </WrappedComponents.View>
     );

package/src/reanimated2/core.ts

@@ -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';
@@ -99,6 +99,12 @@ export function makeShareable<T>(value: T): T {
 }
 
 export function getViewProp<T>(viewTag: string, propName: string): Promise<T> {
+  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,