Add support for animating all properties using native driver #27506

chrfalch · 2019-12-13T15:03:51Z

Summary

Native animation only supports properties that can be updated through the shadow view tree, limiting it to a small subset of properties and styles available for animation. Whenever a developer wants to animate something like size, color etc. they revert to JS based animation leading to complaints about stutters in the UX.

Inspired by the wide usage of Reanimated I've created a solution that uses the same principles as Reanimated. This is basically two separate paths to update a property - one is for shadow tree properties that can be synchronously updated through UIManager .synchronouslyUpdateViewOnUIThread, and one that uses a batched update queue that is updated through UIManager.updateView.

This might have some performance issues, but the result will be much smoother and faster than using JS based animation.

I'm aware that a Fabric based animation library is in the works, but believe that this PR can add value for developers until Fabric is available.

Changelog

[iOS][Added] Added support for animating unsupported props with useNativeDriver
[General][Added] Added support for animating all props using native driver
[Android][Added] Added support for animating all props with useNativeDriver

Test Plan

Added examples that shows native animations of size and color in RNTester
Removed unit tests for illegal native properties

Libraries/Animated/src/__tests__/AnimatedNative-test.js

JoshuaGross · 2019-12-16T21:48:42Z

Libraries/Animated/src/colorToRgba.js

+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+


let's add some basic tests for this?

Ah I see that you're just moving this, but if tests don't already exist, it'd be nice to add a few

JoshuaGross · 2019-12-16T21:53:05Z

Hey @chrfalch, thanks for doing this! In general I think this is something I'm supportive of, and seems like a fine thing to do. I'll need to spend some time with this to see if it has implications on native driver animations in Fabric, since they share most code currently. I'll try to set aside some time this week to play around with it.

facebook-github-bot

@JoshuaGross has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

janicduplessis

Looks great! I added some comments about naming that I found confusing.

Currently it seems like what is called shadow view props is actually non-layout props that are updatable directly on the ui thread. Shadow view props are the ones that need to be updated through the regular UIManager pipeline.

Libraries/Animated/src/NativeAnimatedHelper.js

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java

chrfalch · 2019-12-19T11:18:41Z

Thanks so much for the feedback. I’m currently unavailable for a few days :( will set a side time as soon as possible to fix the issues you pointed out.

- Added fix to interpolation node to make it work with colors - Added support for differentiating between shadow view nodes and nodes that needs to be updated through the uimanager - Added interfaces and configuration methods for setting up properties

- Added support for sharing the colorToRgba function - Added configuration of allowed shadow view properties on startup - Removed test to avoid using illegal props - Added correct handling of colors - Updated example with colors and size interpolation

- Added support for configuration of allowed properties from js - Fixed color interpolation in interpolation node - Added support for differentiating props in style and prop nodes - Made member getUIViewOperationQueue public in UIManager to be able to test if we are currently updating our view so we don't call dispatchViewUpdates to often.

- Removed validateStyles and the Styles whitelist. - Added static ui thread styles - Renamed methods after code review

- Removed configureProps from iOS - Renamed members from code review - Removed styles properties white list

…thread.

chrfalch · 2019-12-28T11:19:57Z

Hi, @JoshuaGross and @janicduplessis - how should we continue with this PR? I see that some of the tests are failing, but I think the test_ios_frameworks test is failing for everyone these days, and the test_android fail seems to be an infrastructure failure?

chrfalch · 2020-01-05T20:39:53Z

@chrfalch Looks like we got a part wrong. In the original implementation only style props are validated, this means that any regular prop should still go through synchronouslyUpdateViewOnUIThread. However we don't have this context anymore in RCTPropsAnimatedNode.

I suggest we invert our list and instead of having uiProps which are props that can be updated with synchronouslyUpdateViewOnUIThread we go with something like layoutProps which are props that need to use the regular UIManager pipeline (enqueueUpdateViewOnUIManager ). The list of layout props can be found here https://github.com/facebook/react-native/blob/master/React/Views/RCTViewManager.m#L339.

An example of this is animating the value of a slider https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js#L661. With the current changes it would go through enqueueUpdateViewOnUIManager instead of synchronouslyUpdateViewOnUIThread.

Great! Thanks - will see if I can make the required changes. Thanks for the pointers as well.

chrfalch · 2020-01-05T21:11:03Z

@chrfalch Looks like we got a part wrong. In the original implementation only style props are validated, this means that any regular prop should still go through synchronouslyUpdateViewOnUIThread. However we don't have this context anymore in RCTPropsAnimatedNode.
I suggest we invert our list and instead of having uiProps which are props that can be updated with synchronouslyUpdateViewOnUIThread we go with something like layoutProps which are props that need to use the regular UIManager pipeline (enqueueUpdateViewOnUIManager ). The list of layout props can be found here https://github.com/facebook/react-native/blob/master/React/Views/RCTViewManager.m#L339.
An example of this is animating the value of a slider https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js#L661. With the current changes it would go through enqueueUpdateViewOnUIManager instead of synchronouslyUpdateViewOnUIThread.

Great! Thanks - will see if I can make the required changes. Thanks for the pointers as well.

Should be fixed now, @janicduplessis :)

Btw: I have a use case where I'm creating an Animated TextInput and set its text property (I know it is not public) to update text from Animated. It looks like it needs to go the enqueueUpdateViewOnUIManager route to be updated - even though it is not a layout property.

Any suggestion on how this should be handled? Could this be an issue with other props like SVG properties that some people like to animate?

janicduplessis · 2020-01-05T21:47:54Z

Hmm maybe we could just expose the layoutProps array to make it possible to add to it from objc / java by getting the native animated module instance with bridge.moduleForClass. It can also be possible to add a new method on the native animated module like addLayoutProp. We might want to address this is a separate PR though.

janicduplessis · 2020-01-05T21:48:50Z

As for SVG, afaik it already works with the current implementation using synchronouslyUpdateViewOnUIThread.

chrfalch · 2020-01-05T22:10:07Z

Hmm maybe we could just expose the layoutProps array to make it possible to add to it from objc / java by getting the native animated module instance with bridge.moduleForClass. It can also be possible to add a new method on the native animated module like addLayoutProp. We might want to address this is a separate PR though.

What about adding support for updating it from JavaScript to make it easier for devs to use it?

Libraries/Animated/src/NativeAnimatedHelper.js

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

… that needs to be called through enqueueUpdateViewOnUIManager

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

janicduplessis

Left a few more comments, after those are resolved it is good to ship for me, I looked mostly at the iOS implementation. I'll let @JoshuaGross pick it up from here.

chrfalch · 2020-01-07T20:21:07Z

Left a few more comments, after those are resolved it is good to ship for me, I looked mostly at the iOS implementation. I'll let @JoshuaGross pick it up from here.

Thanks so much for helping out, @janicduplessis

@JoshuaGross: Ping me on Discord or here if you have questions.

JoshuaGross · 2020-01-16T19:00:01Z

@shergin or @sammy-SC do you want to test or review the iOS side of this PR?

facebook-github-bot

@JoshuaGross has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

ReactAndroid/src/main/java/com/facebook/react/animated/InterpolationAnimatedNode.java

chrfalch · 2020-01-17T07:16:40Z

@shergin or @sammy-SC do you want to test or review the iOS side of this PR?

@janicduplessis reviewed the iOS code - but feel free to review this part of the implementation if you want. :)

shergin

@chrfalch Is this change implied that we run layout during updating the layout props? If so, which exact change enables that?

Libraries/Animated/src/colorToRgba.js

Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.m

chrfalch · 2020-01-23T22:29:59Z

@chrfalch Is this change implied that we run layout during updating the layout props? If so, which exact change enables that?

I've added calls through an operation queue in RCTNativeAnimatedNodesManager.m that ends up calling enqueueUpdateViewOnUIManager for properties that need to use the layout pipeline.

Not sure if that was the answer you were looking for?

shergin · 2020-01-27T17:08:12Z

@chrfalch Thanks!
Looks good to me!

chrfalch · 2020-01-27T20:48:39Z

@chrfalch Thanks!
Looks good to me!

Thanks so much! Anyone specific I should poke to get it merged? I also discussed briefly with @JoshuaGross about having to run some internal codegen tools to update the API before merging. @shergin

terrysahaidak · 2020-01-28T13:17:30Z

After some testing realized fontSize, letterSpacing and lineHeight are missing in layoutProps array. They cannot be updated on UIThread, so animating them makes no effect right now.

chrfalch · 2020-01-29T12:05:49Z

After some testing realized fontSize, letterSpacing and lineHeight are missing in layoutProps array. They cannot be updated on UIThread, so animating them makes no effect right now.

We might also consider adding 'text' as a property to be passed through the layout cycle (It can be used in Animated version of TextInput).

JoshuaGross · 2020-02-04T01:45:03Z

Had a chat with @chrfalch offline, will summarize here:

While I see the value in this, this native Animated library may not be the right solution for animations longterm. It (and LayoutAnimations) have a number of issues in their current incarnation; aside from the APIs not being the nicest to use, it's very easy to get an app into a bad state (visual glitches or crashing) using these libraries, in ways that aren't super trivial to solve.

At the same time, as we're preparing for Fabric to be released, any major breaking changes to the core need to be supported in Fabric, and this increases the workload for the core team substantially and does actually push out the ship date of Fabric with every change we need to port to Fabric. With this change in particular, changing layout props requires a Yoga relayout, which in Fabric requires a C++ commit of a new shadow node - simply not possible at all with the current version of native Animated. This isn't a matter of "it would take a few weeks", we would have to completely rewrite Animated for Fabric to support this.

So our options are:

Merge this and live with a big inconsistency between this version of RN and Fabric... forever
Rewrite LayoutAnimations and Animated for Fabric
and/or, create a new animation API for Fabric

Since the current version of native Animated is compatible with Fabric, and because I want the migration to Fabric to be as trivial as possible, I'm very hesitant to merge this. At the same time, if we did rewrite Animated to support this in Fabric, it's not clear that we would even want that with the current API; if we're spending that amount of effort it makes sense to build a new, modern animation system with an API we can put more thought into. (I plan to do just that, but can't promise anything wrt timing)

I realize this is probably disappointing for some people, so I figured it would be helpful to see our rationale.

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 13, 2019

JoshuaGross reviewed Dec 16, 2019

View reviewed changes

Libraries/Animated/src/__tests__/AnimatedNative-test.js Show resolved Hide resolved

JoshuaGross reviewed Dec 16, 2019

View reviewed changes

facebook-github-bot reviewed Dec 16, 2019

View reviewed changes

janicduplessis reviewed Dec 17, 2019

View reviewed changes

terrysahaidak mentioned this pull request Dec 21, 2019

0.62.x Discussion react-native-community/releases#145

Closed

chrfalch and others added 18 commits December 21, 2019 14:25

Removed podfile changes from branch

7ce4990

[android] Trying to fix failing android test.

1dcc656

[ios] Fixed missing call to configure props in test setup.

d2303d4

[android] added calls to configureProps to get tests to work

9f6bd56

[android] fixed issue where property bags where swapped.

c183ceb

[android] Fixed issue with prop bags again..

c5597b5

Removed property configuration from Javascript side

5bcec89

- Removed validateStyles and the Styles whitelist. - Added static ui thread styles - Renamed methods after code review

Removed configure props and renamed members

7ea0191

- Removed configureProps from iOS - Renamed members from code review - Removed styles properties white list

Removed configure props

550ecf6

Added affirmative test for all properties

ce3c4ec

Added transform props to whitelist

5972744

Changed parameter for operation to be ReadableMap from WriteableMap

f08526e

Added test to verify that the left property is not updated on the ui …

ffebced

…thread.

Updated member names

345f716

Updated names

8f37658

chrfalch force-pushed the Feature/add-native-animation-of-all-props branch from a42aafa to 8f37658 Compare December 22, 2019 21:21

Moved processing of native props queue to updateProps() function

6ac3631

chrfalch requested a review from JoshuaGross January 1, 2020 10:06

Inverted list of props to include only layoutProps

fa28aae

janicduplessis reviewed Jan 5, 2020

View reviewed changes

Libraries/Animated/src/NativeAnimatedHelper.js Outdated Show resolved Hide resolved

janicduplessis reviewed Jan 5, 2020

View reviewed changes

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m Outdated Show resolved Hide resolved

Removed onLayout from layout props

5a459b8

osdnk reviewed Jan 6, 2020

View reviewed changes

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m Outdated Show resolved Hide resolved

Added addEnqueuedUpdateProp method to be able to configure properties…

f4b7662

… that needs to be called through enqueueUpdateViewOnUIManager

janicduplessis reviewed Jan 7, 2020

View reviewed changes

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m Outdated Show resolved Hide resolved

janicduplessis approved these changes Jan 7, 2020

View reviewed changes

chrfalch added 2 commits January 7, 2020 21:19

Removed validateStyles

f4395cf

Changed layoutProps to an NSSet

064b763

facebook-github-bot reviewed Jan 16, 2020

View reviewed changes

JoshuaGross reviewed Jan 16, 2020

View reviewed changes

ReactAndroid/src/main/java/com/facebook/react/animated/InterpolationAnimatedNode.java Show resolved Hide resolved

kelset mentioned this pull request Jan 21, 2020

0.62.x RC Discussion react-native-community/releases#157

Closed

6 tasks

shergin reviewed Jan 23, 2020

View reviewed changes

Libraries/Animated/src/colorToRgba.js Show resolved Hide resolved

Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.m Show resolved Hide resolved

JoshuaGross closed this Feb 4, 2020

Sharcoux mentioned this pull request Aug 17, 2020

Got error "Error: style property 'flexGrow' is not supported by native animated module" with AnimatedRangeSlider Sharcoux/slider#4

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for animating all properties using native driver #27506

Add support for animating all properties using native driver #27506

chrfalch commented Dec 13, 2019 •

edited

Loading

JoshuaGross Dec 16, 2019

JoshuaGross Dec 16, 2019

JoshuaGross commented Dec 16, 2019

facebook-github-bot left a comment

janicduplessis left a comment

chrfalch commented Dec 19, 2019

chrfalch commented Dec 28, 2019

chrfalch commented Jan 5, 2020

chrfalch commented Jan 5, 2020 •

edited

Loading

janicduplessis commented Jan 5, 2020

janicduplessis commented Jan 5, 2020

chrfalch commented Jan 5, 2020

janicduplessis left a comment

chrfalch commented Jan 7, 2020 •

edited

Loading

JoshuaGross commented Jan 16, 2020

facebook-github-bot left a comment

chrfalch commented Jan 17, 2020

shergin left a comment

chrfalch commented Jan 23, 2020

shergin commented Jan 27, 2020

chrfalch commented Jan 27, 2020 •

edited

Loading

terrysahaidak commented Jan 28, 2020

chrfalch commented Jan 29, 2020

JoshuaGross commented Feb 4, 2020

Add support for animating all properties using native driver #27506

Add support for animating all properties using native driver #27506

Conversation

chrfalch commented Dec 13, 2019 • edited Loading

Summary

Changelog

Test Plan

JoshuaGross Dec 16, 2019

Choose a reason for hiding this comment

JoshuaGross Dec 16, 2019

Choose a reason for hiding this comment

JoshuaGross commented Dec 16, 2019

facebook-github-bot left a comment

Choose a reason for hiding this comment

janicduplessis left a comment

Choose a reason for hiding this comment

chrfalch commented Dec 19, 2019

chrfalch commented Dec 28, 2019

chrfalch commented Jan 5, 2020

chrfalch commented Jan 5, 2020 • edited Loading

janicduplessis commented Jan 5, 2020

janicduplessis commented Jan 5, 2020

chrfalch commented Jan 5, 2020

janicduplessis left a comment

Choose a reason for hiding this comment

chrfalch commented Jan 7, 2020 • edited Loading

JoshuaGross commented Jan 16, 2020

facebook-github-bot left a comment

Choose a reason for hiding this comment

chrfalch commented Jan 17, 2020

shergin left a comment

Choose a reason for hiding this comment

chrfalch commented Jan 23, 2020

shergin commented Jan 27, 2020

chrfalch commented Jan 27, 2020 • edited Loading

terrysahaidak commented Jan 28, 2020

chrfalch commented Jan 29, 2020

JoshuaGross commented Feb 4, 2020

chrfalch commented Dec 13, 2019 •

edited

Loading

chrfalch commented Jan 5, 2020 •

edited

Loading

chrfalch commented Jan 7, 2020 •

edited

Loading

chrfalch commented Jan 27, 2020 •

edited

Loading