react-native-reanimated 3.9.0-rc.0 → 3.9.0

package/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -8,7 +8,7 @@ import type {
 } from 'react';
 import React from 'react';
 import { findNodeHandle, Platform } from 'react-native';
-import WorkletEventHandler from '../reanimated2/WorkletEventHandler';
+import { WorkletEventHandler } from '../reanimated2/WorkletEventHandler';
 import '../reanimated2/layoutReanimation/animationsManager';
 import invariant from 'invariant';
 import { adaptViewConfig } from '../ConfigHelper';
@@ -143,6 +143,7 @@ export function createAnimatedComponent(
     }
 
     componentDidMount() {
+      this._viewTag = this._getViewInfo().viewTag as number;
       this._attachNativeEvents();
       this._jsPropsUpdater.addOnJSPropsChangeListener(this);
       this._attachAnimatedStyles();
@@ -189,6 +190,7 @@ export function createAnimatedComponent(
       const exiting = this.props.exiting;
       if (
         IS_WEB &&
+        this._component &&
         this.props.exiting &&
         !getReducedMotionFromConfig(this.props.exiting as CustomConfig)
       ) {
@@ -228,21 +230,13 @@ export function createAnimatedComponent(
     }
 
     _attachNativeEvents() {
-      const node = this._getEventViewRef() as AnimatedComponentRef;
-      let viewTag = null; // We set it only if needed
-
       for (const key in this.props) {
         const prop = this.props[key];
         if (
           has('workletEventHandler', prop) &&
           prop.workletEventHandler instanceof WorkletEventHandler
         ) {
-          if (viewTag === null) {
-            viewTag = IS_WEB
-              ? this._component
-              : findNodeHandle(options?.setNativeProps ? this : node);
-          }
-          prop.workletEventHandler.registerForEvents(viewTag as number, key);
+          prop.workletEventHandler.registerForEvents(this._viewTag, key);
         }
       }
     }
@@ -254,7 +248,7 @@ export function createAnimatedComponent(
           has('workletEventHandler', prop) &&
           prop.workletEventHandler instanceof WorkletEventHandler
         ) {
-          prop.workletEventHandler.unregisterFromEvents();
+          prop.workletEventHandler.unregisterFromEvents(this._viewTag);
         }
       }
     }
@@ -277,38 +271,40 @@ export function createAnimatedComponent(
       }
     }
 
-    _reattachNativeEvents(
+    _updateNativeEvents(
       prevProps: AnimatedComponentProps<InitialComponentProps>
     ) {
       for (const key in prevProps) {
-        const prop = this.props[key];
+        const prevProp = prevProps[key];
         if (
-          has('workletEventHandler', prop) &&
-          prop.workletEventHandler instanceof WorkletEventHandler &&
-          prop.workletEventHandler.reattachNeeded
+          has('workletEventHandler', prevProp) &&
+          prevProp.workletEventHandler instanceof WorkletEventHandler
         ) {
-          prop.workletEventHandler.unregisterFromEvents();
+          const newProp = this.props[key];
+          if (!newProp) {
+            // Prop got deleted
+            prevProp.workletEventHandler.unregisterFromEvents(this._viewTag);
+          } else if (
+            has('workletEventHandler', newProp) &&
+            newProp.workletEventHandler instanceof WorkletEventHandler &&
+            newProp.workletEventHandler !== prevProp.workletEventHandler
+          ) {
+            // Prop got changed
+            prevProp.workletEventHandler.unregisterFromEvents(this._viewTag);
+            newProp.workletEventHandler.registerForEvents(this._viewTag);
+          }
         }
       }
 
-      let viewTag = null;
-
       for (const key in this.props) {
-        const prop = this.props[key];
+        const newProp = this.props[key];
         if (
-          has('workletEventHandler', prop) &&
-          prop.workletEventHandler instanceof WorkletEventHandler &&
-          prop.workletEventHandler.reattachNeeded
+          has('workletEventHandler', newProp) &&
+          newProp.workletEventHandler instanceof WorkletEventHandler &&
+          !prevProps[key]
         ) {
-          if (viewTag === null) {
-            const node = this._getEventViewRef() as AnimatedComponentRef;
-
-            viewTag = IS_WEB
-              ? this._component
-              : findNodeHandle(options?.setNativeProps ? this : node);
-          }
-          prop.workletEventHandler.registerForEvents(viewTag as number, key);
-          prop.workletEventHandler.reattachNeeded = false;
+          // Prop got added
+          newProp.workletEventHandler.registerForEvents(this._viewTag);
         }
       }
     }
@@ -460,7 +456,7 @@ export function createAnimatedComponent(
       ) {
         this._configureSharedTransition();
       }
-      this._reattachNativeEvents(prevProps);
+      this._updateNativeEvents(prevProps);
       this._attachAnimatedStyles();
       this._InlinePropManager.attachInlineProps(this, this._getViewInfo());
 

package/src/reanimated2/WorkletEventHandler.ts

@@ -1,7 +1,11 @@
 'use strict';
 import type { NativeSyntheticEvent } from 'react-native';
 import { registerEventHandler, unregisterEventHandler } from './core';
-import type { EventPayload, ReanimatedEvent } from './hook/commonTypes';
+import type {
+  EventPayload,
+  ReanimatedEvent,
+  IWorkletEventHandler,
+} from './hook/commonTypes';
 import { shouldBeUseWeb } from './PlatformChecker';
 
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
@@ -20,64 +24,119 @@ function jsListener<Event extends object>(
   };
 }
 
-export default class WorkletEventHandler<Event extends object> {
+class WorkletEventHandlerNative<Event extends object>
+  implements IWorkletEventHandler<Event>
+{
+  eventNames: string[];
   worklet: (event: ReanimatedEvent<Event>) => void;
+  #viewTags: Set<number>;
+  #registrations: Map<number, number[]>; // keys are viewTags, values are arrays of registration ID's for each viewTag
+  constructor(
+    worklet: (event: ReanimatedEvent<Event>) => void,
+    eventNames: string[]
+  ) {
+    this.worklet = worklet;
+    this.eventNames = eventNames;
+    this.#viewTags = new Set<number>();
+    this.#registrations = new Map<number, number[]>();
+  }
+
+  updateEventHandler(
+    newWorklet: (event: ReanimatedEvent<Event>) => void,
+    newEvents: string[]
+  ): void {
+    // Update worklet and event names
+    this.worklet = newWorklet;
+    this.eventNames = newEvents;
+
+    // Detach all events
+    this.#registrations.forEach((registrationIDs) => {
+      registrationIDs.forEach((id) => unregisterEventHandler(id));
+      // No need to remove registrationIDs from map, since it gets overwritten when attaching
+    });
+
+    // Attach new events with new worklet
+    Array.from(this.#viewTags).forEach((tag) => {
+      const newRegistrations = this.eventNames.map((eventName) =>
+        registerEventHandler(this.worklet, eventName, tag)
+      );
+      this.#registrations.set(tag, newRegistrations);
+    });
+  }
+
+  registerForEvents(viewTag: number, fallbackEventName?: string): void {
+    this.#viewTags.add(viewTag);
+
+    const newRegistrations = this.eventNames.map((eventName) =>
+      registerEventHandler(this.worklet, eventName, viewTag)
+    );
+    this.#registrations.set(viewTag, newRegistrations);
+
+    if (this.eventNames.length === 0 && fallbackEventName) {
+      const newRegistration = registerEventHandler(
+        this.worklet,
+        fallbackEventName,
+        viewTag
+      );
+      this.#registrations.set(viewTag, [newRegistration]);
+    }
+  }
+
+  unregisterFromEvents(viewTag: number): void {
+    this.#viewTags.delete(viewTag);
+    this.#registrations.get(viewTag)?.forEach((id) => {
+      unregisterEventHandler(id);
+    });
+    this.#registrations.delete(viewTag);
+  }
+}
+
+class WorkletEventHandlerWeb<Event extends object>
+  implements IWorkletEventHandler<Event>
+{
   eventNames: string[];
-  reattachNeeded: boolean;
   listeners:
     | Record<string, (event: ReanimatedEvent<ReanimatedEvent<Event>>) => void>
     | Record<string, (event: JSEvent<Event>) => void>;
 
-  viewTag: number | undefined;
-  registrations: number[];
+  worklet: (event: ReanimatedEvent<Event>) => void;
+
   constructor(
     worklet: (event: ReanimatedEvent<Event>) => void,
     eventNames: string[] = []
   ) {
     this.worklet = worklet;
     this.eventNames = eventNames;
-    this.reattachNeeded = false;
     this.listeners = {};
-    this.viewTag = undefined;
-    this.registrations = [];
-
-    if (SHOULD_BE_USE_WEB) {
-      this.listeners = eventNames.reduce(
-        (
-          acc: Record<string, (event: JSEvent<Event>) => void>,
-          eventName: string
-        ) => {
-          acc[eventName] = jsListener(eventName, worklet);
-          return acc;
-        },
-        {}
-      );
-    }
+    this.setupWebListeners();
   }
 
-  updateWorklet(newWorklet: (event: ReanimatedEvent<Event>) => void): void {
-    this.worklet = newWorklet;
-    this.reattachNeeded = true;
+  setupWebListeners() {
+    this.listeners = {};
+    this.eventNames.forEach((eventName) => {
+      this.listeners[eventName] = jsListener(eventName, this.worklet);
+    });
   }
 
-  registerForEvents(viewTag: number, fallbackEventName?: string): void {
-    this.viewTag = viewTag;
-    this.registrations = this.eventNames.map((eventName) =>
-      registerEventHandler(this.worklet, eventName, viewTag)
-    );
-    if (this.registrations.length === 0 && fallbackEventName) {
-      this.registrations.push(
-        registerEventHandler(this.worklet, fallbackEventName, viewTag)
-      );
-    }
+  updateEventHandler(
+    newWorklet: (event: ReanimatedEvent<Event>) => void,
+    newEvents: string[]
+  ): void {
+    // Update worklet and event names
+    this.worklet = newWorklet;
+    this.eventNames = newEvents;
+    this.setupWebListeners();
   }
 
-  registerForEventByName(eventName: string) {
-    this.registrations.push(registerEventHandler(this.worklet, eventName));
+  registerForEvents(_viewTag: number, _fallbackEventName?: string): void {
+    // noop
   }
 
-  unregisterFromEvents(): void {
-    this.registrations.forEach((id) => unregisterEventHandler(id));
-    this.registrations = [];
+  unregisterFromEvents(_viewTag: number): void {
+    // noop
   }
 }
+
+export const WorkletEventHandler = SHOULD_BE_USE_WEB
+  ? WorkletEventHandlerWeb
+  : WorkletEventHandlerNative;

package/src/reanimated2/animation/styleAnimation.ts

@@ -125,16 +125,18 @@ export function withStyleAnimation(
             stillGoing = true;
           }
 
-          if (ColorProperties.includes(currentEntry.path[0] as string)) {
-            currentStyleAnimation.current = processColor(
-              currentStyleAnimation.current
-            ) as number;
-          }
+          // When working with animations changing colors, we need to make sure that each one of them begins with a rgba, not a processed number.
+          // Thus, we only set the path to a processed color, but currentStyleAnimation.current stays as rgba.
+          const isAnimatingColorProp = ColorProperties.includes(
+            currentEntry.path[0] as string
+          );
 
           setPath(
             animation.current,
             currentEntry.path,
-            currentStyleAnimation.current
+            isAnimatingColorProp
+              ? processColor(currentStyleAnimation.current)
+              : currentStyleAnimation.current
           );
         }
       }

package/src/reanimated2/hook/commonTypes.ts

@@ -79,6 +79,15 @@ export type RNNativeScrollEvent = NativeSyntheticEvent<NativeScrollEvent>;
 
 export type ReanimatedScrollEvent = ReanimatedEvent<RNNativeScrollEvent>;
 
+export interface IWorkletEventHandler<Event extends object> {
+  updateEventHandler: (
+    newWorklet: (event: ReanimatedEvent<Event>) => void,
+    newEvents: string[]
+  ) => void;
+  registerForEvents: (viewTag: number, fallbackEventName?: string) => void;
+  unregisterFromEvents: (viewTag: number) => void;
+}
+
 export interface AnimatedStyleHandle<
   Style extends DefaultStyle = DefaultStyle
 > {

package/src/reanimated2/hook/useEvent.ts

@@ -1,7 +1,7 @@
 'use strict';
 import { useRef } from 'react';
-import WorkletEventHandler from '../WorkletEventHandler';
-import type { ReanimatedEvent } from './commonTypes';
+import { WorkletEventHandler } from '../WorkletEventHandler';
+import type { IWorkletEventHandler, ReanimatedEvent } from './commonTypes';
 
 /**
  * Worklet to provide as an argument to `useEvent` hook.
@@ -17,7 +17,7 @@ export type EventHandlerProcessed<
 > = (event: Event, context?: Context) => void;
 
 export type EventHandlerInternal<Event extends object> = {
-  workletEventHandler: WorkletEventHandler<Event>;
+  workletEventHandler: IWorkletEventHandler<Event>;
 };
 
 /**
@@ -57,7 +57,7 @@ export function useEvent<Event extends object, Context = never>(
     initRef.current = { workletEventHandler };
   } else if (rebuild) {
     const workletEventHandler = initRef.current.workletEventHandler;
-    workletEventHandler.updateWorklet(handler);
+    workletEventHandler.updateEventHandler(handler, eventNames);
     initRef.current = { workletEventHandler };
   }
 

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -73,6 +73,7 @@ function useScrollViewOffsetNative(
   const internalOffset = useSharedValue(0);
   const offset = useRef(providedOffset ?? internalOffset).current;
   const scrollRef = useRef<AnimatedScrollView | null>(null);
+  const scrollRefTag = useRef<number | null>(null);
 
   const eventHandler = useEvent<RNNativeScrollEvent>(
     (event: ReanimatedScrollEvent) => {
@@ -89,15 +90,30 @@ function useScrollViewOffsetNative(
 
   useEffect(() => {
     // We need to make sure that listener for old animatedRef value is removed
-    if (scrollRef.current !== null) {
-      eventHandler.workletEventHandler.unregisterFromEvents();
+    if (scrollRef.current !== null && scrollRefTag.current !== null) {
+      eventHandler.workletEventHandler.unregisterFromEvents(
+        scrollRefTag.current
+      );
     }
+
+    // Store the ref and viewTag for future cleanup
     scrollRef.current = animatedRef.current;
+    scrollRefTag.current = animatedRef.getTag();
+
+    if (scrollRefTag === null) {
+      console.warn(
+        '[Reanimated] ScrollViewOffset failed to resolve the view tag from animated ref. Did you forget to attach the ref to a component?'
+      );
+    } else {
+      eventHandler.workletEventHandler.registerForEvents(scrollRefTag.current);
+    }
 
-    const viewTag = animatedRef.getTag();
-    eventHandler.workletEventHandler.registerForEvents(viewTag);
     return () => {
-      eventHandler.workletEventHandler.unregisterFromEvents();
+      if (scrollRefTag.current !== null) {
+        eventHandler.workletEventHandler.unregisterFromEvents(
+          scrollRefTag.current
+        );
+      }
     };
     // React here has a problem with `animatedRef.current` since a Ref .current
     // field shouldn't be used as a dependency. However, in this case we have

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -55,12 +55,15 @@ export default class JSReanimated {
     _eventName: string,
     _emitterReactTag: number
   ): number {
-    // noop
-    return -1;
+    throw new Error(
+      '[Reanimated] registerEventHandler is not available in JSReanimated.'
+    );
   }
 
   unregisterEventHandler(_: number): void {
-    // noop
+    throw new Error(
+      '[Reanimated] unregisterEventHandler is not available in JSReanimated.'
+    );
   }
 
   enableLayoutAnimations() {

package/src/reanimated2/layoutReanimation/web/animationsManager.ts

@@ -48,7 +48,7 @@ function checkUndefinedAnimationFail(
   }
 
   console.warn(
-    "[Reanimated] Couldn't load entering/exiting animation. Current version supports only predefined animations with modifiers: duration, delay, easing, randomizeDelay, wtihCallback, reducedMotion."
+    "[Reanimated] Couldn't load entering/exiting animation. Current version supports only predefined animations with modifiers: duration, delay, easing, randomizeDelay, withCallback, reducedMotion."
   );
 
   return true;

package/src/reanimated2/layoutReanimation/web/componentStyle.ts

@@ -78,5 +78,7 @@ export function setDummyPosition(
   dummy.style.height = `${snapshot.height}px`;
   dummy.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary
 
-  fixElementPosition(dummy, dummy.parentElement!, snapshot);
+  if (dummy.parentElement) {
+    fixElementPosition(dummy, dummy.parentElement, snapshot);
+  }
 }

package/src/reanimated2/layoutReanimation/web/componentUtils.ts

@@ -276,7 +276,7 @@ export function handleExitingAnimation(
 
   const scrollOffsets = getElementScrollValue(element);
 
-  // Scroll does not trigger snapshoting, therefore if we start exiting animation after
+  // Scroll does not trigger snapshotting, therefore if we start exiting animation after
   // scrolling through parent component, dummy will end up in wrong place. In order to fix that
   // we keep last known scroll position in snapshot and then adjust dummy position based on
   // last known scroll offset and current scroll offset

package/src/reanimated2/layoutReanimation/web/createAnimation.ts

@@ -14,7 +14,7 @@ import { FadingTransition } from './transition/Fading.web';
 import { insertWebAnimation } from './domUtils';
 
 // Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically
-// convert it to `px`. Therefore if we want to keep exisitng transform we have to add 'px' suffix to each of translate values
+// convert it to `px`. Therefore if we want to keep existing transform we have to add 'px' suffix to each of translate values
 // that are present inside transform.
 function addPxToTranslate(
   existingTransform: NonNullable<TransformsStyle['transform']>
@@ -43,7 +43,7 @@ function addPxToTranslate(
   return newTransform;
 }
 
-// In order to keep exisitng transform throughout animation, we have to add it to each of keyframe step.
+// In order to keep existing transform throughout animation, we have to add it to each of keyframe step.
 function addExistingTransform(
   newAnimationData: AnimationData,
   newTransform: ReanimatedWebTransformProperties[]

package/src/reanimated2/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * with the version used to build the native part of the library in runtime.
  * Remember to keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '3.9.0-rc.0';
+export const jsVersion = '3.9.0';

package/src/reanimated2/platformFunctions/getRelativeCoords.ts

@@ -31,7 +31,7 @@ export function getRelativeCoords(
     return null;
   }
   return {
-    x: absoluteX - parentCoords.x,
-    y: absoluteY - parentCoords.y,
+    x: absoluteX - parentCoords.pageX,
+    y: absoluteY - parentCoords.pageY,
   };
 }