[NativeAnimated][Android] Add support for animated events #9253

janicduplessis · 2016-08-05T23:35:21Z

This adds support for Animated.event driven natively. This is WIP and would like feedback on how this is implemented.

At the moment, it works by providing a mapping between a view tag, an event name, an event path and an animated value when a view has a prop with a AnimatedEvent object. Then we can hook into EventDispatcher, check for events that target our view + event name and update the animated value using the event path.

For now it works with the onScroll event but it should be generic enough to work with anything.

ghost · 2016-08-05T23:35:49Z

By analyzing the blame information on this pull request, we identified @kmagiera and @ericvicenti to be potential reviewers.

janicduplessis · 2016-08-05T23:39:58Z

cc @brentvatne

janicduplessis · 2016-08-05T23:45:59Z

Other thought:

Should Animated Events be represented somehow as a node in the graph? I went with a separate data structure to just get it working.
We need to map event names properly. On Android events have different names than in JS, ie topScroll for the onScroll prop. There is a mapping of that in UIManager so it should be possible to use that to convert it properly.
Is there another way to attach the event to the view? Right now if the view uses a native driven event it need to be an animated view, ie: Animated.ScrollView.

brentvatne · 2016-08-06T00:25:51Z

Libraries/Animated/src/AnimatedImplementation.js

+        const prop = nextProps[key];
+        if (prop instanceof AnimatedEvent && prop.__isNative) {
+          // TODO: Map event names using the map in UIManager.
+          if (key === 'onScroll') {


Which props aside from onScroll do you think we might want to be able to bind natively to with Animated.event?

Actually pan responders would be a good example of these kinds of events

@brentvatne this approach will only work for "direct" events. That is because touch handling has a bubbling logic written in JS and we cannot determine which view is going to be responsible for handling the touch without running some JS code

brentvatne · 2016-08-06T01:04:08Z

This is so exciting!

Should Animated Events be represented somehow as a node in the graph? I went with a separate data structure to just get it working.

Not sure about this one, will leave it to someone else to comment on.

Is there another way to attach the event to the view? Right now if the view uses a native driven event it need to be an animated view, ie: Animated.ScrollView.

Another option would be to just make ScrollView take care of attaching the event, but this doesn't work for other views and leaks the responsibility for this outside of the Animated codebase.

We need to know:

what event to watch for (name of the prop -> event mapping)
react tag for the view
when to detach the event

I'm sure that there are ways we could work around this but I can't think of any solid ones, so I'm for Animated.ScrollView here.

cc @vjeux @sahrens

foghina · 2016-08-11T12:31:12Z

cc @kmagiera

kmagiera · 2016-08-11T13:17:55Z

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

@@ -9,6 +9,8 @@

 package com.facebook.react.animated;

+import android.util.Log;


revert this

facebook-github-bot · 2016-08-11T20:30:25Z

@janicduplessis updated the pull request.

ghost · 2016-08-11T20:30:58Z

@janicduplessis updated the pull request.

ghost · 2016-08-11T21:00:07Z

@janicduplessis updated the pull request.

kmagiera · 2016-08-12T07:11:25Z

Libraries/Animated/src/AnimatedImplementation.js

+    }
+
+    _attachNativeEvents(newProps) {
+      if (newProps !== this.props) {


This can perhaps be optimised so that we don't reattach native props every time when non relevant property gets changed. Also, I'm not sure if this statement can even evaluate to true (if props hasn't been updated componentWillReceiveProps will not be triggered)

I think the common case is to create a new event in every render so it should be fine to reattach everytime, I'll take another look see if I can improve it though.

<ScrollView onScroll={Animated.event({...}) />

We should perhaps add to the documentation that creating event in render method is not the most effective way

ghost · 2016-08-12T21:28:02Z

@janicduplessis updated the pull request.

ghost · 2016-08-15T07:47:32Z

@janicduplessis updated the pull request.

ghost · 2016-08-15T08:01:53Z

@janicduplessis updated the pull request.

ghost · 2016-09-10T02:07:08Z

@janicduplessis updated the pull request - view changes - changes since last import

ghost · 2016-09-10T02:07:18Z

@janicduplessis updated the pull request - view changes - changes since last import

foghina · 2016-09-16T09:53:46Z

@facebook-github-bot shipit

foghina · 2016-09-16T09:54:02Z

Just importing it again, see if I can fix the test somehow.

ghost · 2016-09-16T09:55:08Z

Thanks for importing. If you are an FB employee go to Phabricator to review internal test results.

ghost · 2016-09-16T23:48:12Z

I tried to merge this pull request into the Facebook internal repo but some checks failed. To unblock yourself please check the following: Does this pull request pass all open source tests on GitHub? If not please fix those. Does the code still apply cleanly on top of GitHub master? If not can please rebase. In all other cases this means some internal test failed, for example a part of a fb app won't work with this pull request. I've added the Import Failed label to this pull request so it is easy for someone at fb to find the pull request and check what failed. If you don't see anyone comment in a few days feel free to comment mentioning one of the core contributors to the project so they get a notification.

nihgwu · 2016-09-18T10:23:13Z

@janicduplessis how can I use this in a ListView, I've just tried but failed with warning Invalid prop 'onScroll' of type 'object' supplied to 'ListView', expected 'function'

janicduplessis · 2016-09-18T17:24:39Z

To use it with ListView you'll need to create an AnimatedListView using Animated.createAnimatedComponent.

nihgwu · 2016-09-18T17:40:37Z

I did that but still failed, have you tried it?

???? iPhone

? 2016?9?19??01:25?Janic Duplessis <notifications@github.com mailto:notifications@github.com> ???

To use it with ListView you'll need to create an AnimatedListView using Animated.createAnimatedComponent.

You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com//pull/9253#issuecomment-247860836, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ACeY8kSDrw2975LYMGSiQ0_dhMyuQrGzks5qrXP2gaJpZM4JeI2-.

janicduplessis · 2016-09-18T17:57:38Z

Ok, I think I know why. Does it work if you add

  getScrollableNode: function() {
    if (this._scrollComponent && this._scrollComponent.getScrollableNode) {
      return this._scrollComponent.getScrollableNode();
    }
  },

in ListView.js

nihgwu · 2016-09-19T02:44:31Z

@janicduplessis It's definitely awesome, working so great, say goodbye to bad scrolling effects, thank you again, wish this can be merged soon

foghina · 2016-09-19T12:23:57Z

BOOM.

nihgwu · 2016-09-19T13:30:38Z

@janicduplessis what about to add support for ListView

janicduplessis · 2016-09-19T16:28:04Z

I'll make another PR for the ListView fix.

Summary: This adds support for `Animated.event` driven natively. This is WIP and would like feedback on how this is implemented. At the moment, it works by providing a mapping between a view tag, an event name, an event path and an animated value when a view has a prop with a `AnimatedEvent` object. Then we can hook into `EventDispatcher`, check for events that target our view + event name and update the animated value using the event path. For now it works with the onScroll event but it should be generic enough to work with anything. Closes facebook/react-native#9253 Differential Revision: D3759844 Pulled By: foghina fbshipit-source-id: 86989c705847955bd65e6cf5a7d572ec7ccd3eb4

@janicduplessis

suggested by @janicduplessis in facebook#9253 (comment) I'm using this in my own apps

Summary: suggested by janicduplessis in #9253 (comment) I'm using this in my own apps Closes #11339 Differential Revision: D4325343 fbshipit-source-id: f1da26a2107093865f04e1d81245b33482776001

Summary: suggested by janicduplessis in facebook#9253 (comment) I'm using this in my own apps Closes facebook#11339 Differential Revision: D4325343 fbshipit-source-id: f1da26a2107093865f04e1d81245b33482776001

ghost added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Aug 5, 2016

ghost 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 Aug 5, 2016

brentvatne reviewed Aug 6, 2016
View reviewed changes

ghost 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 Aug 6, 2016

ghost 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 Aug 11, 2016

kmagiera reviewed Aug 11, 2016
View reviewed changes

ghost 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 Aug 11, 2016

janicduplessis force-pushed the animated-event-android branch from 77953a3 to 16a3566 Compare August 11, 2016 20:29

ghost 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 Aug 11, 2016

kmagiera reviewed Aug 12, 2016
View reviewed changes

janicduplessis changed the title ~~[WIP][NativeAnimated][Android] Add support for animated events~~ [NativeAnimated][Android] Add support for animated events Aug 12, 2016

ghost 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 Aug 12, 2016

ghost 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 Aug 15, 2016

ghost 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 Sep 9, 2016

ghost 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 Sep 10, 2016

ghost added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Sep 16, 2016

ghost 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 Sep 16, 2016

ghost added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. and removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Sep 16, 2016

ghost 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 Sep 18, 2016

ghost 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 Sep 19, 2016

ghost closed this in 6565929 Sep 19, 2016

ptomasroos mentioned this pull request Oct 6, 2016

Is offload animation ready for navigator? #9421

Closed

nickhudkins mentioned this pull request Oct 7, 2016

Offload NavigatorExperimental transition animations #10289

Closed

nihgwu added a commit to nihgwu/react-native that referenced this pull request Dec 7, 2016

fix ListView to work with Native Animated.event

5070738

suggested by @janicduplessis in facebook#9253 (comment) I'm using this in my own apps

nihgwu mentioned this pull request Dec 7, 2016

fix ListView to work with Native Animated.event #11339

Closed

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NativeAnimated][Android] Add support for animated events #9253

[NativeAnimated][Android] Add support for animated events #9253

janicduplessis commented Aug 5, 2016 •

edited

Loading

ghost commented Aug 5, 2016

janicduplessis commented Aug 5, 2016

janicduplessis commented Aug 5, 2016 •

edited

Loading

brentvatne Aug 6, 2016

brentvatne Aug 6, 2016

kmagiera Aug 11, 2016

brentvatne commented Aug 6, 2016

foghina commented Aug 11, 2016

kmagiera Aug 11, 2016

facebook-github-bot commented Aug 11, 2016

ghost commented Aug 11, 2016

ghost commented Aug 11, 2016

kmagiera Aug 12, 2016

janicduplessis Aug 12, 2016

kmagiera Aug 23, 2016

ghost commented Aug 12, 2016

ghost commented Aug 15, 2016

ghost commented Aug 15, 2016

ghost commented Sep 10, 2016

ghost commented Sep 10, 2016

foghina commented Sep 16, 2016

foghina commented Sep 16, 2016

ghost commented Sep 16, 2016

ghost commented Sep 16, 2016

nihgwu commented Sep 18, 2016

janicduplessis commented Sep 18, 2016

nihgwu commented Sep 18, 2016

janicduplessis commented Sep 18, 2016

nihgwu commented Sep 19, 2016

foghina commented Sep 19, 2016

nihgwu commented Sep 19, 2016

janicduplessis commented Sep 19, 2016

		@@ -9,6 +9,8 @@

		package com.facebook.react.animated;

		import android.util.Log;

[NativeAnimated][Android] Add support for animated events #9253

[NativeAnimated][Android] Add support for animated events #9253

Conversation

janicduplessis commented Aug 5, 2016 • edited Loading

ghost commented Aug 5, 2016

janicduplessis commented Aug 5, 2016

janicduplessis commented Aug 5, 2016 • edited Loading

brentvatne Aug 6, 2016

Choose a reason for hiding this comment

brentvatne Aug 6, 2016

Choose a reason for hiding this comment

kmagiera Aug 11, 2016

Choose a reason for hiding this comment

brentvatne commented Aug 6, 2016

foghina commented Aug 11, 2016

kmagiera Aug 11, 2016

Choose a reason for hiding this comment

facebook-github-bot commented Aug 11, 2016

ghost commented Aug 11, 2016

ghost commented Aug 11, 2016

kmagiera Aug 12, 2016

Choose a reason for hiding this comment

janicduplessis Aug 12, 2016

Choose a reason for hiding this comment

kmagiera Aug 23, 2016

Choose a reason for hiding this comment

ghost commented Aug 12, 2016

ghost commented Aug 15, 2016

ghost commented Aug 15, 2016

ghost commented Sep 10, 2016

ghost commented Sep 10, 2016

foghina commented Sep 16, 2016

foghina commented Sep 16, 2016

ghost commented Sep 16, 2016

ghost commented Sep 16, 2016

nihgwu commented Sep 18, 2016

janicduplessis commented Sep 18, 2016

nihgwu commented Sep 18, 2016

janicduplessis commented Sep 18, 2016

nihgwu commented Sep 19, 2016

foghina commented Sep 19, 2016

nihgwu commented Sep 19, 2016

janicduplessis commented Sep 19, 2016

janicduplessis commented Aug 5, 2016 •

edited

Loading

janicduplessis commented Aug 5, 2016 •

edited

Loading