Fix warning about overwriting style with layout animation

src/animationBuilder.tsx

@@ -5,6 +5,7 @@ import type {
   LayoutAnimationsValues,
 } from './reanimated2/layoutReanimation';
 import type { StyleProps } from './reanimated2/commonTypes';
+import type { NestedArray } from './createAnimatedComponent/commonTypes';
 
 const mockTargetValues: LayoutAnimationsValues = {
   targetOriginX: 0,
@@ -25,12 +26,52 @@ const mockTargetValues: LayoutAnimationsValues = {
   currentBorderRadius: 0,
 };
 
+function maybeReportOverwrittenProperties(
+  layoutAnimationStyle: StyleProps,
+  style: NestedArray<StyleProps>,
+  displayName: string
+) {
+  function getCommonProperties(
+    layoutStyle: object,
+    secondStyle: object | Array<object>
+  ) {
+    const secondStyleFlat = Array.isArray(secondStyle)
+      ? secondStyle.flat()
+      : [secondStyle];
+    const commonKeys: Array<string> = [];
+
+    secondStyleFlat.forEach((s) => {
+      if ('initial' in s) {
+        s = s.initial.value;
+      }
+
+      const commonStyleKeys = Object.keys(s).filter((key) =>
+        Object.prototype.hasOwnProperty.call(layoutStyle, key)
+      );
+      commonKeys.push(...commonStyleKeys);
+    });
+    return commonKeys;
+  }
+
+  const commonProperties = getCommonProperties(layoutAnimationStyle, style);
+
+  if (commonProperties.length > 0) {
+    console.warn(
+      `[Reanimated] ${
+        commonProperties.length === 1 ? 'Property' : 'Properties: '
+      } "${commonProperties.join(
+        ', '
+      )}" of ${displayName} may be overwritten with layout animation. Please create a wrapper with the layout animation you want to apply.`
+    );
+  }
+}
+
 export function maybeBuild(
   layoutAnimationOrBuilder:
     | ILayoutAnimationBuilder
     | LayoutAnimationFunction
     | Keyframe,
-  style: StyleProps | undefined,
+  style: NestedArray<StyleProps> | undefined,
   displayName: string
 ): LayoutAnimationFunction | Keyframe {
   const isAnimationBuilder = (
@@ -42,21 +83,13 @@ export function maybeBuild(
   if (isAnimationBuilder(layoutAnimationOrBuilder)) {
     const animationFactory = layoutAnimationOrBuilder.build();
     const layoutAnimation = animationFactory(mockTargetValues);
-    const animatedStyle = layoutAnimation.animations;
-
-    const getCommonProperties = (obj1: object, obj2: object) =>
-      Object.keys(obj1).filter((key) =>
-        Object.prototype.hasOwnProperty.call(obj2, key)
-      );
+    const layoutAnimationStyle = layoutAnimation.animations;
 
-    const commonProperties = getCommonProperties(animatedStyle, style || {});
-    if (commonProperties.length > 0) {
-      console.warn(
-        `[Reanimated] ${
-          commonProperties.length === 1 ? 'Property' : 'Properties: '
-        } "${commonProperties.join(
-          ', '
-        )}" of ${displayName} may be overwritten with layout animation. Please create a wrapper with the layout animation you want to apply.`
+    if (__DEV__) {
+      maybeReportOverwrittenProperties(
+        layoutAnimationStyle,
+        style || {},
+        displayName
       );
     }