From 8ff5b88c56bd38aecc9bd4a61cc832713ed88acb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miko=C5=82aj=20Szyd=C5=82owski?= <9szydlowski9@gmail.com>
Date: Tue, 9 Jul 2024 11:50:32 +0200
Subject: [PATCH] Revert dynamic styles PR  (#6218)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Unfortunately, turns out the PR with dynamic styles #5268 introduced
more problems than it solved. Thus, proposing a revert.
This revert most likely fixed:
-
https://github.com/software-mansion/react-native-reanimated/issues/6203
-
https://github.com/software-mansion/react-native-reanimated/issues/6102
-
https://github.com/software-mansion/react-native-reanimated/issues/6037

as well as one more not-published issue and potentially a few more.

## Notes

Even if it gets approved, to be merged ONLY after @tjzel agrees with
everything

## Test plan

😢 😭
---
 .../src/examples/DynamicStylesExample.tsx     | 216 ------------------
 apps/common-app/src/examples/index.ts         |   6 -
 .../InlinePropManager.ts                      |   4 +-
 .../createAnimatedComponent/PropsFilter.tsx   |  28 +--
 4 files changed, 5 insertions(+), 249 deletions(-)
 delete mode 100644 apps/common-app/src/examples/DynamicStylesExample.tsx

diff --git a/apps/common-app/src/examples/DynamicStylesExample.tsx b/apps/common-app/src/examples/DynamicStylesExample.tsx
deleted file mode 100644
index fa538f49c19..00000000000
--- a/apps/common-app/src/examples/DynamicStylesExample.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { Text, StyleSheet, View, Button } from 'react-native';
-
-import React from 'react';
-
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-export default function DynamicStylesExample() {
-  const [extraStyle, setExtraStyle] = React.useState(false);
-  const [rerender, setRerender] = React.useState(false);
-
-  const widthShared = useSharedValue(80);
-  const backgroundColorShared = useSharedValue<string>('rgb(255,127,63)');
-
-  const animatedWidthStyle = useAnimatedStyle(() => ({
-    width: widthShared.value,
-  }));
-  const animatedBackgroundColorStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: backgroundColorShared.value,
-    };
-  });
-
-  function handleChangeProps() {
-    setExtraStyle((extraStyle) => !extraStyle);
-  }
-
-  function handleAnimate() {
-    widthShared.value = withTiming((Math.random() * 160) / 2 + 40, {
-      duration: 1000,
-    });
-
-    const r = Math.random() * 256;
-    const g = Math.random() * 256;
-    const b = Math.random() * 256;
-
-    backgroundColorShared.value = withTiming(`rgb(${r},${g},${b})`, {
-      duration: 1500,
-    });
-  }
-
-  function handleForceRerender() {
-    setRerender(!rerender);
-  }
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>State: {String(rerender)}</Text>
-      <View style={styles.columnContainer}>
-        <View style={styles.column}>
-          <Text style={styles.text}>InlineStyles</Text>
-
-          <Text style={styles.text}>Same length array</Text>
-          <Animated.View
-            accessible={rerender}
-            style={[
-              styles.box,
-              { width: widthShared },
-              extraStyle ? { backgroundColor: backgroundColorShared } : null,
-            ]}
-          />
-
-          <Text style={styles.text}>Different length array</Text>
-          <Animated.View
-            accessible={rerender}
-            style={
-              extraStyle
-                ? [
-                    styles.box,
-                    { width: widthShared },
-                    { backgroundColor: backgroundColorShared },
-                  ]
-                : [styles.box, { width: widthShared }]
-            }
-          />
-          <Text style={styles.text}>Same length extra plain style array</Text>
-          <Animated.View
-            accessible={rerender}
-            style={[
-              styles.box,
-              { width: widthShared },
-              extraStyle ? { backgroundColor: backgroundColorShared } : null,
-              extraStyle ? styles.radius : null,
-            ]}
-          />
-          <Text style={styles.text}>
-            Different length extra plain style array
-          </Text>
-          <Animated.View
-            accessible={rerender}
-            style={
-              extraStyle
-                ? [
-                    styles.box,
-                    { width: widthShared },
-                    { backgroundColor: backgroundColorShared },
-                    styles.radius,
-                  ]
-                : [styles.box, { width: widthShared }]
-            }
-          />
-          <Text style={styles.text}>
-            Two animated styles independent of state
-          </Text>
-          <Animated.View
-            accessible={rerender}
-            style={[
-              styles.box,
-              { width: widthShared },
-              { backgroundColor: backgroundColorShared },
-            ]}
-          />
-        </View>
-        <View style={styles.column}>
-          <Text style={styles.text}>useAnimatedStyle</Text>
-
-          <Text style={styles.text}>Same length array</Text>
-          <Animated.View
-            accessible={rerender}
-            style={[
-              styles.box,
-              animatedWidthStyle,
-              extraStyle ? animatedBackgroundColorStyle : null,
-            ]}
-          />
-          <Text style={styles.text}>Different length array</Text>
-          <Animated.View
-            accessible={rerender}
-            style={
-              extraStyle
-                ? [styles.box, animatedWidthStyle, animatedBackgroundColorStyle]
-                : [styles.box, animatedWidthStyle]
-            }
-          />
-          <Text style={styles.text}>Same length extra plain style array</Text>
-          <Animated.View
-            accessible={rerender}
-            style={[
-              styles.box,
-              animatedWidthStyle,
-              extraStyle ? animatedBackgroundColorStyle : null,
-              extraStyle ? styles.radius : null,
-            ]}
-          />
-          <Text style={styles.text}>
-            Different length extra plain style array
-          </Text>
-          <Animated.View
-            accessible={rerender}
-            style={
-              extraStyle
-                ? [
-                    styles.box,
-                    animatedWidthStyle,
-                    animatedBackgroundColorStyle,
-                    styles.radius,
-                  ]
-                : [styles.box, animatedWidthStyle]
-            }
-          />
-          <Text style={styles.text}>
-            Two animated styles independent of state
-          </Text>
-          <Animated.View
-            accessible={rerender}
-            style={[
-              styles.box,
-              animatedWidthStyle,
-              animatedBackgroundColorStyle,
-            ]}
-          />
-        </View>
-      </View>
-
-      <Text style={styles.text}>
-        {extraStyle ? '' : 'no '}extra animated style
-      </Text>
-      <Button title="Add/remove animated style" onPress={handleChangeProps} />
-      <Button title="Force rerender" onPress={handleForceRerender} />
-      <Button title="Animate" onPress={handleAnimate} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  columnContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    width: '100%',
-  },
-  box: {
-    height: 50,
-    width: 50,
-    borderWidth: 1,
-  },
-  radius: {
-    borderWidth: 10,
-  },
-  column: {
-    maxWidth: '50%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    maxWidth: 180,
-    textAlign: 'center',
-  },
-});
diff --git a/apps/common-app/src/examples/index.ts b/apps/common-app/src/examples/index.ts
index 2d25ddace84..309bda12a12 100644
--- a/apps/common-app/src/examples/index.ts
+++ b/apps/common-app/src/examples/index.ts
@@ -116,7 +116,6 @@ import WobbleExample from './WobbleExample';
 import WorkletExample from './WorkletExample';
 import WorkletRuntimeExample from './WorkletRuntimeExample';
 import NestedLayoutAnimationConfig from './LayoutAnimations/NestedLayoutAnimationConfig';
-import DynamicStylesExample from './DynamicStylesExample';
 import WithClampExample from './WithClampExample';
 import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 import RuntimeTestsExample from './RuntimeTests/RuntimeTestsExample';
@@ -491,11 +490,6 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Log test',
     screen: LogExample,
   },
-  DynamicStylesExample: {
-    icon: '🧨',
-    title: 'Dynamically appending/removing styles',
-    screen: DynamicStylesExample,
-  },
   WorkletFactoryCrash: {
     icon: '🏭',
     title: 'Worklet factory crash',
diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts b/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts
index 70df5cc53e2..62dd90d22a7 100644
--- a/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts
+++ b/packages/react-native-reanimated/src/createAnimatedComponent/InlinePropManager.ts
@@ -107,9 +107,9 @@ export function hasInlineStyles(style: StyleProps): boolean {
 
 export function getInlineStyle(
   style: Record<string, unknown>,
-  shouldGetInitialStyle: boolean
+  isFirstRender: boolean
 ) {
-  if (shouldGetInitialStyle) {
+  if (isFirstRender) {
     return getInlinePropsUpdate(style);
   }
   const newStyle: StyleProps = {};
diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
index e1d9493989a..9eeb6bb5c52 100644
--- a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
+++ b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
@@ -1,6 +1,5 @@
 'use strict';
 
-import { shallowEqual } from '../hook/utils';
 import type { StyleProps } from '../commonTypes';
 import { isSharedValue } from '../isSharedValue';
 import { isChromeDebugger } from '../PlatformChecker';
@@ -24,30 +23,22 @@ function dummyListener() {
 
 export class PropsFilter implements IPropsFilter {
   private _initialStyle = {};
-  private _previousProps: React.Component['props'] | null = null;
-  private _requiresNewInitials = true;
 
   public filterNonAnimatedProps(
     component: React.Component<unknown, unknown> & IAnimatedComponentInternal
   ): Record<string, unknown> {
     const inputProps =
       component.props as AnimatedComponentProps<InitialComponentProps>;
-
-    this._maybePrepareForNewInitials(inputProps);
-
     const props: Record<string, unknown> = {};
     for (const key in inputProps) {
       const value = inputProps[key];
       if (key === 'style') {
         const styleProp = inputProps.style;
         const styles = flattenArray<StyleProps>(styleProp ?? []);
-        if (this._requiresNewInitials) {
-          this._initialStyle = {};
-        }
         const processedStyle: StyleProps = styles.map((style) => {
           if (style && style.viewDescriptors) {
             // this is how we recognize styles returned by useAnimatedStyle
-            if (this._requiresNewInitials) {
+            if (component._isFirstRender) {
               this._initialStyle = {
                 ...style.initial.value,
                 ...this._initialStyle,
@@ -56,7 +47,7 @@ export class PropsFilter implements IPropsFilter {
             }
             return this._initialStyle;
           } else if (hasInlineStyles(style)) {
-            return getInlineStyle(style, this._requiresNewInitials);
+            return getInlineStyle(style, component._isFirstRender);
           } else {
             return style;
           }
@@ -88,26 +79,13 @@ export class PropsFilter implements IPropsFilter {
           props[key] = dummyListener;
         }
       } else if (isSharedValue(value)) {
-        if (this._requiresNewInitials) {
+        if (component._isFirstRender) {
           props[key] = value.value;
         }
       } else if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
         props[key] = value;
       }
     }
-    this._requiresNewInitials = false;
     return props;
   }
-
-  private _maybePrepareForNewInitials(
-    inputProps: AnimatedComponentProps<InitialComponentProps>
-  ) {
-    if (this._previousProps && inputProps.style) {
-      this._requiresNewInitials = !shallowEqual(
-        this._previousProps,
-        inputProps
-      );
-    }
-    this._previousProps = inputProps;
-  }
 }