From 0543dab5314915233bf59d8c8066cfdfcb6005d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Fri, 1 Apr 2022 12:29:47 +0200 Subject: [PATCH 1/4] Make sure style does not regenerate between renders if it is the same. --- src/createAnimatedComponent.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/createAnimatedComponent.tsx b/src/createAnimatedComponent.tsx index 1cf0c3f5689..74982f8f166 100644 --- a/src/createAnimatedComponent.tsx +++ b/src/createAnimatedComponent.tsx @@ -195,6 +195,7 @@ export default function createAnimatedComponent( _isFirstRender = true; animatedStyle: { value: StyleProps } = { value: {} }; initialStyle = {}; + _lastSentStyle?: StyleProps; sv: SharedValue> | null; _propsAnimated?: PropsAnimated; _component: ComponentRef | null = null; @@ -580,14 +581,24 @@ export default function createAnimatedComponent( _filterNonAnimatedStyle(inputStyle: StyleProps) { const style: StyleProps = {}; + let changed = false; for (const key in inputStyle) { const value = inputStyle[key]; if (!hasAnimatedNodes(value)) { style[key] = value; + changed = changed || style[key] !== this._lastSentStyle?.[key]; } else if (value instanceof AnimatedValue) { // if any style in animated component is set directly to the `Value` we set those styles to the first value of `Value` node in order // to avoid flash of default styles when `Value` is being asynchrounously sent via bridge and initialized in the native side. style[key] = value._startingValue; + changed = changed || style[key] !== this._lastSentStyle?.[key]; + } + } + if (!changed) { + const lastKeys = Object.keys(this._lastSentStyle); + const inputKeys = Object.keys(inputStyle); + if (lastKeys.every((k) => inputKeys.includes(k))) { + return this._lastSentStyle; } } return style; From ed167ad760292c4d060b4e78bc7b50bd26b4a1b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Fri, 1 Apr 2022 14:32:21 +0200 Subject: [PATCH 2/4] Fix lint and fix missing assignment --- src/createAnimatedComponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/createAnimatedComponent.tsx b/src/createAnimatedComponent.tsx index 74982f8f166..ffac760019d 100644 --- a/src/createAnimatedComponent.tsx +++ b/src/createAnimatedComponent.tsx @@ -195,7 +195,7 @@ export default function createAnimatedComponent( _isFirstRender = true; animatedStyle: { value: StyleProps } = { value: {} }; initialStyle = {}; - _lastSentStyle?: StyleProps; + _lastSentStyle: StyleProps = {}; sv: SharedValue> | null; _propsAnimated?: PropsAnimated; _component: ComponentRef | null = null; @@ -601,6 +601,7 @@ export default function createAnimatedComponent( return this._lastSentStyle; } } + this._lastSentStyle = style; return style; } From 01683959b58bbb86c67f1ff31a7f7073d018bcb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Fri, 1 Apr 2022 14:35:02 +0200 Subject: [PATCH 3/4] Remove unneeded ? --- src/createAnimatedComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/createAnimatedComponent.tsx b/src/createAnimatedComponent.tsx index ffac760019d..0f0b840b37b 100644 --- a/src/createAnimatedComponent.tsx +++ b/src/createAnimatedComponent.tsx @@ -586,12 +586,12 @@ export default function createAnimatedComponent( const value = inputStyle[key]; if (!hasAnimatedNodes(value)) { style[key] = value; - changed = changed || style[key] !== this._lastSentStyle?.[key]; + changed = changed || style[key] !== this._lastSentStyle[key]; } else if (value instanceof AnimatedValue) { // if any style in animated component is set directly to the `Value` we set those styles to the first value of `Value` node in order // to avoid flash of default styles when `Value` is being asynchrounously sent via bridge and initialized in the native side. style[key] = value._startingValue; - changed = changed || style[key] !== this._lastSentStyle?.[key]; + changed = changed || style[key] !== this._lastSentStyle[key]; } } if (!changed) { From 06743c946bd64c2dcd098bcd8aaac396330c0799 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Wed, 27 Apr 2022 17:23:55 +0200 Subject: [PATCH 4/4] Avoid double loop --- src/createAnimatedComponent.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/createAnimatedComponent.tsx b/src/createAnimatedComponent.tsx index 0f0b840b37b..8701bbf1714 100644 --- a/src/createAnimatedComponent.tsx +++ b/src/createAnimatedComponent.tsx @@ -595,9 +595,15 @@ export default function createAnimatedComponent( } } if (!changed) { - const lastKeys = Object.keys(this._lastSentStyle); - const inputKeys = Object.keys(inputStyle); - if (lastKeys.every((k) => inputKeys.includes(k))) { + const inputKeys = new Set(Object.keys(inputStyle)); + let equalKeys = true; + for (const key in this._lastSentStyle) { + if (!inputKeys.has(key)) { + equalKeys = false; + break; + } + } + if (equalKeys) { return this._lastSentStyle; } }