react-native-reanimated 4.5.2 → 4.5.4

package/scripts/reanimated_utils.rb

@@ -62,6 +62,13 @@ module ReanimatedUtils
     if ios_sync_ui_props && shared_element_transitions
       raise "[Reanimated] The feature flags `IOS_SYNCHRONOUSLY_UPDATE_UI_PROPS` and `ENABLE_SHARED_ELEMENT_TRANSITIONS` cannot be enabled simultaneously. Please disable one of them in your package.json"
     end
+
+    use_animation_backend = feature_flags['USE_ANIMATION_BACKEND'] == 'true'
+    force_react_render_for_settled_animations = feature_flags['FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS'] == 'true'
+
+    if use_animation_backend && force_react_render_for_settled_animations
+      raise "[Reanimated] The feature flags `USE_ANIMATION_BACKEND` and `FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS` cannot be enabled simultaneously. If you want to use the animation backend, you need to explicitly disable `FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS` feature flag (enabled by default) in your package.json"
+    end
   end
 
   def get_static_feature_flags()

package/src/PropsRegistryGarbageCollector.ts

@@ -11,7 +11,6 @@ import { ReanimatedModule } from './ReanimatedModule';
 const FLUSH_INTERVAL_MS = 500;
 
 export const PropsRegistryGarbageCollector = {
-  viewsCount: 0,
   viewsMap: new Map<number, IAnimatedComponentInternal>(),
   intervalId: null as NodeJS.Timeout | null,
 
@@ -25,16 +24,14 @@ export const PropsRegistryGarbageCollector = {
       return;
     }
     this.viewsMap.set(viewTag, component);
-    this.viewsCount++;
-    if (this.viewsCount === 1) {
+    if (this.viewsMap.size === 1) {
       this.registerInterval();
     }
   },
 
   unregisterView(viewTag: number) {
-    this.viewsMap.delete(viewTag);
-    this.viewsCount--;
-    if (this.viewsCount === 0) {
+    const deleted = this.viewsMap.delete(viewTag);
+    if (deleted && this.viewsMap.size === 0) {
       this.unregisterInterval();
     }
   },

package/src/animation/styleAnimation.ts

@@ -73,7 +73,8 @@ interface NestedObjectEntry<T> {
 
 export function withStyleAnimation(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  styleAnimations: AnimatedStyle<any>
+  styleAnimations: AnimatedStyle<any>,
+  callback?: (finished: boolean) => void
 ): StyleLayoutAnimation {
   'worklet';
   return defineAnimation<StyleLayoutAnimation>({}, () => {
@@ -236,7 +237,7 @@ export function withStyleAnimation(
       }
     };
 
-    const callback = (finished: boolean): void => {
+    const styleAnimationCallback = (finished: boolean): void => {
       if (!finished) {
         const animationsToCheck: NestedObjectValues<AnimationObject>[] = [
           styleAnimations,
@@ -267,6 +268,7 @@ export function withStyleAnimation(
           }
         }
       }
+      callback?.(finished);
     };
 
     return {
@@ -275,7 +277,7 @@ export function withStyleAnimation(
       onStart,
       current: {},
       styleAnimations,
-      callback,
+      callback: styleAnimationCallback,
     } as StyleLayoutAnimation;
   });
 }

package/src/createAnimatedComponent/AnimatedComponent.tsx

@@ -51,7 +51,9 @@ if (IS_WEB) {
 }
 
 const FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS =
-  getStaticFeatureFlag('FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS') && !IS_WEB;
+  getStaticFeatureFlag('FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS') &&
+  !getStaticFeatureFlag('USE_ANIMATION_BACKEND') &&
+  !IS_WEB;
 
 export type Options<P> = {
   setNativeProps?: (ref: AnimatedComponentRef, props: P) => void;

package/src/layoutReanimation/animationsManager.ts

@@ -2,7 +2,7 @@
 
 import { runOnUISync } from 'react-native-worklets';
 
-import { withStyleAnimation } from '../animation';
+import { cancelAnimation, withStyleAnimation } from '../animation';
 import { SHOULD_BE_USE_WEB } from '../common';
 import type {
   LayoutAnimation,
@@ -102,9 +102,7 @@ function createLayoutAnimationManager(): {
         value._value = style.initialValues;
       }
 
-      const animation = withStyleAnimation(currentAnimation);
-
-      animation.callback = (finished?: boolean) => {
+      const animation = withStyleAnimation(currentAnimation, (finished) => {
         if (finished) {
           currentAnimationForTag.delete(tag);
           mutableValuesForTag.delete(tag);
@@ -112,9 +110,9 @@ function createLayoutAnimationManager(): {
           stopObservingProgress(tag, value, scheduleFlush, shouldRemoveView);
         }
         if (style.callback) {
-          style.callback(finished === undefined ? false : finished);
+          style.callback(finished);
         }
-      };
+      });
 
       startObservingProgress(tag, value, scheduleFlush);
       value.value = animation;
@@ -124,7 +122,11 @@ function createLayoutAnimationManager(): {
       if (!value) {
         return;
       }
-      stopObservingProgress(tag, value, scheduleFlush);
+      // native already made its cleanup, so we just do cleanup here on JS side
+      value.removeListener(tag + TAG_OFFSET);
+      cancelAnimation(value);
+      currentAnimationForTag.delete(tag);
+      mutableValuesForTag.delete(tag);
     },
   };
 }

package/src/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * 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 = '4.5.2';
+export const jsVersion = '4.5.4';