Add listener for non-value animated node #22883

osdnk · 2019-01-06T13:48:29Z

Changelog:

[Changed][General] Move callback-related logic to AnimatedNode class in order to make it possible to add the listener for other animated nodes than AnimatedValue.

I observed that native code appears to be fully prepared for listening not only to animated value but animated nodes generally. Therefore I managed to modify js code for exposing addListener method from AnimatedNode class instead of AnimatedValue. It called for some minor changes, which are not breaking.

If you're fine with these changes, I could add proper docs if needed.

Test Plan:

The most simple example to verify whether it works is to use code like this.

export default class App extends Component<Props> {
  constructor(props) {
    super(props)
    this.A = new Animated.Value(0);
    this.B = Animated.add(this.A, 10)
    this.B.addListener(({ value }) => console.log(value))

    Animated.timing(
      // Animate value over time
      this.A, // The value to drive
      {
        useNativeDriver: false,
        duration: 5000,
        toValue: 100, // Animate to final value of 1
      },
    ).start();
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.View style={{ width: 100, height: 100, backgroundColor: 'red', transform: [{ translateX: this.B }] }}/>
      </View>
    );
  }
}

You might switch useNativeDriver in order to verify my solution with and without native driver support.

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-01-06T13:49:35Z

Libraries/Animated/src/nodes/AnimatedValue.js

Missing type annotation for value.

analysis-bot · 2019-01-06T13:49:35Z

Libraries/Animated/src/nodes/AnimatedValue.js

@@ -321,9 +242,7 @@ class AnimatedValue extends AnimatedWithChildren {
    if (flush) {
      _flush(this);


Cannot call this._callListeners because property _callListeners is missing in AnimatedValue [1].

But it's in superclass

pull-bot · 2019-01-06T13:49:43Z

	Messages
📖	📋 Missing Summary - Can you add a Summary? To do so, add a "## Summary" section to your PR description. This is a good place to explain the motivation for making this change.
📖	📋 Missing Test Plan - Can you add a Test Plan? To do so, add a "## Test Plan" section to your PR description. A Test Plan lets us know how these changes were tested.
📖	📋 Missing Changelog - Can you add a Changelog? To do so, add a "## Changelog" section to your PR description. A changelog entry has the following format: `[CATEGORY] [TYPE] - Message`.

Generated by 🚫 dangerJS against 196859c

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-01-06T13:55:46Z

Libraries/Animated/src/nodes/AnimatedValue.js

@@ -321,9 +242,7 @@ class AnimatedValue extends AnimatedWithChildren {
    if (flush) {
      _flush(this);


Cannot call this._callListeners because property _callListeners is missing in AnimatedValue [1].

osdnk · 2019-01-06T14:19:18Z

iOS tests appear to fail in not-related places

matthargett · 2019-01-23T19:45:29Z

can you rebase against master to see if the latest CI fixes there make this PR go green?

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-01-24T23:23:02Z

Libraries/Animated/src/nodes/AnimatedValue.js

@@ -321,9 +242,7 @@ class AnimatedValue extends AnimatedWithChildren {
    if (flush) {
      _flush(this);


Cannot call this._callListeners because property _callListeners is missing in AnimatedValue [1].

matthargett

CI failures are unrelated, probably another merge from master would work now, but I'd like to see if any issues are found in FB's CI.

facebook-github-bot

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

cpojer · 2019-02-12T15:35:56Z

CI is failing because of a Flow error, so this definitely doesn't seem to be ready yet. At FB, it's failing because we access _listeners somewhere where we shouldn't, but I can fix that once this PR is actually ready. It also seems to break about 20 tests at this time but I'm unsure whether that is because of mocking or if the Flow error on this PR is pointing at the same issue. Either way, I can try again once this is actually working.

Merge changes from master

osdnk · 2019-02-16T12:22:58Z

Libraries/Animated/src/nodes/AnimatedNode.js

+   *
+   * See http://facebook.github.io/react-native/docs/animatedvalue.html#addlistener
+   */
+  addListener(callback: any): string {


I know it's not perfect to use any, but we need to override this type in AnimatedValueXY with another type which is related to another logic. 😭

@osdnk maybe we can use callback: (value: any) => mixed instead?

callback: (value: any) => void

@osdnk using mixed or any is better in this case. void will prevent async functions to be used for the listener: https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVUCuA7AxgFwEs5swBDAEwoDU5CKAZQgZ3wFNs2AnAClzJgwARmVwBrAFxgeANwGY2UstgCeASjABeAHxgZdChoDeAX3RY8REuSoBZQgA82jFu069+gkeKmz5i8lUNHTAAW0dnYzNUShoDJlYObh4yZhU8aWDdI1QwMGBgMAo4MGY4ULZ8AAtCbABzVBM1AG50WPsnF0T3FLSMniywHLyCopKyiurahqbmoA

Okay, well, I didn't want to do it previously, cause it changes existing code

cpojer · 2019-03-22T10:23:34Z

cc @mattharget let me know when this is ready for shipping

osdnk · 2019-03-22T11:24:11Z

@cpojer @matthargett forgot second "t" 😃

cpojer · 2019-04-08T22:56:30Z

Still waiting for a review on this PR.

matthargett

Thanks for adding tests and fixing the flow issues!

cpojer

Let's give this a try.

facebook-github-bot

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

react-native-bot · 2019-04-09T17:15:06Z

This pull request was successfully merged by @osdnk in 68a5cee.

^{When will my fix make it into a release? | Upcoming Releases}

Summary: Changelog: ---------- [Changed][General] Move callback-related logic to `AnimatedNode` class in order to make it possible to add the listener for other animated nodes than `AnimatedValue`. I observed that native code appears to be fully prepared for listening not only to animated value but animated nodes generally. Therefore I managed to modify js code for exposing `addListener` method from `AnimatedNode` class instead of `AnimatedValue`. It called for some minor changes, which are not breaking. If you're fine with these changes, I could add proper docs if needed. Pull Request resolved: facebook#22883 Differential Revision: D14041747 Pulled By: cpojer fbshipit-source-id: 94c68024ceaa259d9bb145bf4b3107af0b15db88

Summary: Changelog: ---------- [Changed][General] Move callback-related logic to `AnimatedNode` class in order to make it possible to add the listener for other animated nodes than `AnimatedValue`. I observed that native code appears to be fully prepared for listening not only to animated value but animated nodes generally. Therefore I managed to modify js code for exposing `addListener` method from `AnimatedNode` class instead of `AnimatedValue`. It called for some minor changes, which are not breaking. If you're fine with these changes, I could add proper docs if needed. Pull Request resolved: #22883 Differential Revision: D14041747 Pulled By: cpojer fbshipit-source-id: 94c68024ceaa259d9bb145bf4b3107af0b15db88

osdnk added 2 commits January 5, 2019 16:43

Add listeners handling for not-value animated nodes as well

e73e81c

Fix types

fb301f8

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Tests This PR adds or edits a test case. labels Jan 6, 2019

analysis-bot suggested changes Jan 6, 2019

View reviewed changes

Add missing type

3537e56

analysis-bot suggested changes Jan 6, 2019

View reviewed changes

react-native-bot added API: Animated 🔶APIs labels Jan 6, 2019

osdnk changed the title ~~Add listener for non value animated node~~ Add listener for non-value animated node Jan 6, 2019

hramos added the ✅Changelog label Jan 15, 2019

Merge from facebook/master

446e668

analysis-bot suggested changes Jan 24, 2019

View reviewed changes

hramos removed the 🔶APIs label Jan 24, 2019

matthargett approved these changes Feb 11, 2019

View reviewed changes

facebook-github-bot reviewed Feb 12, 2019

View reviewed changes

osdnk added 2 commits February 16, 2019 13:14

Fix flow warns

9f3f01e

Merge from facebook/master

d7fa6ee

Merge changes from master

osdnk commented Feb 16, 2019

View reviewed changes

osdnk added 2 commits February 16, 2019 13:47

Enhance flow types

5f8931e

void -> mixed

196859c

matthargett approved these changes Apr 8, 2019

View reviewed changes

cpojer approved these changes Apr 8, 2019

View reviewed changes

facebook-github-bot approved these changes Apr 8, 2019

View reviewed changes

facebook-github-bot closed this in 68a5cee Apr 9, 2019

react-native-bot added the Merged This PR has been merged. label Apr 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add listener for non-value animated node #22883

Add listener for non-value animated node #22883

osdnk commented Jan 6, 2019 •

edited

Loading

analysis-bot left a comment

analysis-bot Jan 6, 2019

analysis-bot Jan 6, 2019

osdnk Jan 6, 2019

pull-bot commented Jan 6, 2019 •

edited

Loading

analysis-bot left a comment

analysis-bot Jan 6, 2019

osdnk commented Jan 6, 2019

matthargett commented Jan 23, 2019

analysis-bot left a comment

analysis-bot Jan 24, 2019

matthargett left a comment

facebook-github-bot left a comment

cpojer commented Feb 12, 2019

osdnk Feb 16, 2019

satya164 Feb 16, 2019

osdnk Feb 16, 2019

satya164 Feb 16, 2019

osdnk Feb 16, 2019

cpojer commented Mar 22, 2019

osdnk commented Mar 22, 2019

cpojer commented Apr 8, 2019

matthargett left a comment

cpojer left a comment

facebook-github-bot left a comment

react-native-bot commented Apr 9, 2019

		@@ -321,9 +242,7 @@ class AnimatedValue extends AnimatedWithChildren {
		if (flush) {
		_flush(this);

Add listener for non-value animated node #22883

Add listener for non-value animated node #22883

Conversation

osdnk commented Jan 6, 2019 • edited Loading

Changelog:

Test Plan:

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pull-bot commented Jan 6, 2019 • edited Loading

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

osdnk commented Jan 6, 2019

matthargett commented Jan 23, 2019

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthargett left a comment

Choose a reason for hiding this comment

facebook-github-bot left a comment

Choose a reason for hiding this comment

cpojer commented Feb 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cpojer commented Mar 22, 2019

osdnk commented Mar 22, 2019

cpojer commented Apr 8, 2019

matthargett left a comment

Choose a reason for hiding this comment

cpojer left a comment

Choose a reason for hiding this comment

facebook-github-bot left a comment

Choose a reason for hiding this comment

react-native-bot commented Apr 9, 2019

osdnk commented Jan 6, 2019 •

edited

Loading

pull-bot commented Jan 6, 2019 •

edited

Loading