Skip to content

Commit

Permalink
[fix] Animated works with compiled styles
Browse files Browse the repository at this point in the history
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
  • Loading branch information
necolas committed Aug 30, 2022
1 parent a34c895 commit 4c678d2
Showing 1 changed file with 26 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down

0 comments on commit 4c678d2

Please sign in to comment.