Remove unnecessary setViewStyle calls

Author: MatiPl01

packages/react-native-reanimated/src/ReanimatedModule/NativeReanimated.ts

@@ -187,7 +187,7 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
     this.#reanimatedModuleProxy.unsubscribeFromKeyboardEvents(listenerId);
   }
 
-  setViewStyle(viewTag: number, style: StyleProps) {
+  setViewStyle(viewTag: number, style: StyleProps | null) {
     this.#reanimatedModuleProxy.setViewStyle(viewTag, style);
   }
 

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/JSReanimated.ts

@@ -271,7 +271,7 @@ class JSReanimated implements IReanimatedModule {
     // noop
   }
 
-  setViewStyle(_viewTag: number, _style: StyleProps): void {
+  setViewStyle(_viewTag: number, _style: StyleProps | null): void {
     throw new ReanimatedError('setViewStyle is not available in JSReanimated.');
   }
 

packages/react-native-reanimated/src/ReanimatedModule/reanimatedModuleProxy.ts

@@ -60,7 +60,7 @@ export interface ReanimatedModuleProxy {
 
   setShouldAnimateExitingForTag(viewTag: number, shouldAnimate: boolean): void;
 
-  setViewStyle(viewTag: number, style: StyleProps): void;
+  setViewStyle(viewTag: number, style: StyleProps | null): void;
 
   markNodeAsRemovable(shadowNodeWrapper: ShadowNodeWrapper): void;
   unmarkNodeAsRemovable(viewTag: number): void;

packages/react-native-reanimated/src/css/native/managers/CSSManager.ts

@@ -18,7 +18,7 @@ export default class CSSManager implements ICSSManager {
   private readonly viewTag: number;
   private readonly viewName: string;
   private readonly styleBuilder: StyleBuilder<AnyRecord> | null = null;
-  private isFirstUpdate: boolean = true;
+  private isStyleSet = false;
 
   constructor({ shadowNodeWrapper, viewTag, viewName = 'RCTView' }: ViewInfo) {
     const tag = (this.viewTag = viewTag as number);
@@ -46,25 +46,20 @@ export default class CSSManager implements ICSSManager {
       );
     }
 
-    const normalizedStyle = this.styleBuilder?.buildFrom(filteredStyle);
+    const normalizedStyle = this.styleBuilder?.buildFrom(filteredStyle) ?? null;
 
-    // If the update is called during the first css style update, we won't
-    // trigger CSS transitions and set styles before attaching CSS transitions
-    if (this.isFirstUpdate && normalizedStyle) {
-      setViewStyle(this.viewTag, normalizedStyle);
-    }
-
-    this.cssTransitionsManager.update(transitionProperties, normalizedStyle ?? null);
+    this.cssTransitionsManager.update(transitionProperties, normalizedStyle);
     this.cssAnimationsManager.update(animationProperties);
 
-    // If the current update is not the fist one, we want to update CSS
-    // animations and transitions first and update the style then to make
-    // sure that the new transition is fired with new settings (like duration)
-    if (!this.isFirstUpdate && normalizedStyle) {
-      setViewStyle(this.viewTag, normalizedStyle);
+    if (normalizedStyle) {
+      if (animationProperties) {
+        setViewStyle(this.viewTag, normalizedStyle);
+        this.isStyleSet = true;
+      }
+    } else if (this.isStyleSet) {
+      setViewStyle(this.viewTag, null);
+      this.isStyleSet = false;      
     }
-
-    this.isFirstUpdate = false;
   }
 
   unmountCleanup(): void {

packages/react-native-reanimated/src/css/native/managers/CSSTransitionsManager.ts

@@ -46,36 +46,38 @@ export default class CSSTransitionsManager implements ICSSTransitionsManager {
       return;
     }
 
-    const propertyDiff =
-      transitionConfig.properties.length > 0
-        ? getChangedProps(previousStyle, style, transitionConfig.properties)
-        : null;
+    const propertyDiff = getChangedProps(
+      previousStyle,
+      style,
+      transitionConfig.properties
+    );
 
     this.previousStyle = style;
 
-    if (propertyDiff) {
-      const settingsDiff = this.getSettingsUpdates(
-        transitionConfig,
-        previousConfig
-      );
+    if (!propertyDiff) {
+      this.transitionConfig = transitionConfig;
+      return;
+    }
 
-      if (!previousConfig) {
-        registerCSSTransition(this.shadowNodeWrapper, {
-          properties: propertyDiff,
-          settings: transitionConfig.settings,
-          settingsUpdates: settingsDiff ?? undefined,
-        });
-      } else {
-        const updates: CSSTransitionUpdates = {
-          properties: propertyDiff,
-        };
-
-        if (settingsDiff) {
-          updates.settings = settingsDiff;
-        }
-
-        updateCSSTransition(this.viewTag, updates);
+    const settingsDiff = previousConfig
+      ? this.getSettingsUpdates(transitionConfig, previousConfig)
+      : null;
+
+    if (!previousConfig) {
+      registerCSSTransition(this.shadowNodeWrapper, {
+        properties: propertyDiff,
+        settings: transitionConfig.settings,
+      });
+    } else {
+      const updates: CSSTransitionUpdates = {
+        properties: propertyDiff,
+      };
+
+      if (settingsDiff) {
+        updates.settings = settingsDiff;
       }
+
+      updateCSSTransition(this.viewTag, updates);
     }
 
     this.transitionConfig = transitionConfig;

packages/react-native-reanimated/src/css/native/proxy.ts

@@ -5,13 +5,12 @@ import type {
   CSSAnimationUpdates,
   CSSTransitionUpdates,
   NormalizedCSSAnimationKeyframesConfig,
-  NormalizedCSSTransitionConfig,
   NormalizedNewCSSTransitionConfig,
 } from './types';
 
 // COMMON
 
-export function setViewStyle(viewTag: number, style: StyleProps) {
+export function setViewStyle(viewTag: number, style: StyleProps | null) {
   ReanimatedModule.setViewStyle(viewTag, style);
 }