Add support for nested AnimatedValues in AnimatedStyle (like shadowOffset) #11030
Conversation
|
By analyzing the blame information on this pull request, we identified @janicduplessis and @yungsters to be potential reviewers. |
|
Does this going to affect perf in all cases when using |
|
Closing after one month with no activity. @tuckerconnelly ping me if you're still interested in landing this. |
|
@hramos @janicduplessis @tuckerconnelly I'd love this PR as well. If performance is a concern perhaps we could whitelist certain props so it doesn't walk all of them or limit the walking to one level deep? Alternatively, there is a |
|
Performance wise this shouldn't have an impact since almost all styles are not objects. My main concern is that it doesn't work with native animated. It should be possible to make it work and will require changes to AnimatedStyleNode to support Map<string, int | Map>. I'm fine shipping this if we add a validation that makes sure we don't use useNativeDriver with nested styles. |
| } | ||
| } | ||
| return style; | ||
| return { ...prev, [curr]: value }; |
There was a problem hiding this comment.
Let's avoid creating a new object at each iterations and just mutate the initial one.
| } | ||
| } else { | ||
| style[key] = value; | ||
| } else if (typeof value === 'object') { |
There was a problem hiding this comment.
I think this will cause issues with Array and null, if I remember correctly both of those will have type object but we don't want to traverse those.
|
Sorry for not looking at this earlier, if the original author or someone else want to makes the changes from my review and previous comment we could ship this. |
Summary: This adds the ability to nest animated styles and is a follow up to #11030 . **Test plan (required)** Verify a component with a shadowOffset animation animates. Example: ``` <Animated.View style={{ shadowOffset: { width: 0, height: this._pressAnim.interpolate({ inputRange: [0, 1], outputRange: [20, 5], }), }, }}, /> ```  Closes #12909 Differential Revision: D4723933 fbshipit-source-id: 751d7ceb4f9bb22283fb14a5e597730ffd1d9ff6
Motiviation
Wanted to animate iOS's
shadowOffset, which is an object, butAnimatedStyleonly ran__getValueone-level deep.Created a recursive function that walked all the styles and evaluated them.
Test plan
Added
shadowOffsetto the style props in the end-to-endAnimatedtest