diff --git a/src/animationBuilder.tsx b/src/animationBuilder.tsx index 90324ac78d7..fcc0b2a0aa9 100644 --- a/src/animationBuilder.tsx +++ b/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,55 @@ const mockTargetValues: LayoutAnimationsValues = { currentBorderRadius: 0, }; +function getCommonProperties( + layoutStyle: StyleProps, + componentStyle: StyleProps | Array +) { + let componentStyleFlat = Array.isArray(componentStyle) + ? componentStyle.flat() + : [componentStyle]; + + componentStyleFlat = componentStyleFlat.map((style) => + 'initial' in style + ? style.initial.value // Include properties of animated style + : style + ); + + const componentStylesKeys = componentStyleFlat.flatMap((style) => + Object.keys(style) + ); + + const commonKeys = Object.keys(layoutStyle).filter((key) => + componentStylesKeys.includes(key) + ); + + return commonKeys; +} + +function maybeReportOverwrittenProperties( + layoutAnimationStyle: StyleProps, + style: NestedArray, + displayName: string +) { + const commonProperties = getCommonProperties(layoutAnimationStyle, style); + + if (commonProperties.length > 0) { + console.warn( + `[Reanimated] ${ + commonProperties.length === 1 ? 'Property' : 'Properties' + } "${commonProperties.join( + ', ' + )}" of ${displayName} may be overwritten by a layout animation. Please wrap your component with an animated view and apply the layout animation on the wrapper.` + ); + } +} + export function maybeBuild( layoutAnimationOrBuilder: | ILayoutAnimationBuilder | LayoutAnimationFunction | Keyframe, - style: StyleProps | undefined, + style: NestedArray | undefined, displayName: string ): LayoutAnimationFunction | Keyframe { const isAnimationBuilder = ( @@ -42,21 +86,12 @@ 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 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__ && style) { + maybeReportOverwrittenProperties( + layoutAnimation.animations, + style, + displayName ); }