[fix] Animated works with compiled styles

Animated should now work with compiled and extracted styles. The
original styles are passed to components, rather than being flattened
into a new object that cannot be used by the style runtime to either
lookup the results of StyleSheet.create calls or consume extracted
styles. Inline styles that use AnimatedValue are moved into a seperate
object that is appended to the original styles.

Fix #2387
This commit is contained in:
Nicolas Gallagher
2022-08-29 13:07:44 -07:00
committed by Nicolas Gallagher
parent e68c327707
commit 1f5d0925a5

View File

@@ -19,19 +19,32 @@ import StyleSheet from '../../../../exports/StyleSheet';
const flattenStyle = StyleSheet.flatten;
function createAnimatedStyle(inputStyle: any): Object {
const style = flattenStyle(inputStyle);
const animatedStyles = {}
for (const key in style) {
const value = style[key];
if (key === 'transform') {
animatedStyles[key] = new AnimatedTransform(value);
}
else if (value instanceof AnimatedNode) {
animatedStyles[key] = value;
}
else if (value && !Array.isArray(value) && typeof value === 'object') {
animatedStyles[key] = createAnimatedStyle(value);
}
}
return animatedStyles;
}
class AnimatedStyle extends AnimatedWithChildren {
_inputStyle: any;
_style: Object;
constructor(style: any) {
super();
style = flattenStyle(style) || {};
if (style.transform) {
style = {
...style,
transform: new AnimatedTransform(style.transform),
};
}
this._style = style;
this._inputStyle = style;
this._style = createAnimatedStyle(style);
}
// Recursively get values for nested styles (like iOS's shadowOffset)
@@ -55,8 +68,11 @@ class AnimatedStyle extends AnimatedWithChildren {
return updatedStyle;
}
__getValue(): Object {
return this._walkStyleAndGetValues(this._style);
__getValue(): Array<Object> {
return [
this._inputStyle,
this._walkStyleAndGetValues(this._style)
];
}
// Recursively get animated values for nested styles (like iOS's shadowOffset)