Fix connection of animated nodes and scroll offset with useNativeDriver.

Add example showing regression before this fix is applied.

Author: msand

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -29,11 +29,24 @@ type EventMapping = {
 
 let nativeEventEmitter;
 
+let queueConnections = false;
+let queue = [];
+
 /**
  * Simple wrappers around NativeAnimatedModule to provide flow and autocmplete support for
  * the native module methods
  */
 const API = {
+  enableQueue: function(): void {
+    queueConnections = true;
+  },
+  disableQueue: function(): void {
+    queueConnections = false;
+    while (queue.length) {
+      const args = queue.shift();
+      NativeAnimatedModule.connectAnimatedNodes(args[0], args[1]);
+    }
+  },
   createAnimatedNode: function(tag: ?number, config: Object): void {
     assertNativeAnimatedModule();
     NativeAnimatedModule.createAnimatedNode(tag, config);
@@ -48,6 +61,10 @@ const API = {
   },
   connectAnimatedNodes: function(parentTag: ?number, childTag: ?number): void {
     assertNativeAnimatedModule();
+    if (queueConnections) {
+      queue.push([parentTag, childTag]);
+      return;
+    }
     NativeAnimatedModule.connectAnimatedNodes(parentTag, childTag);
   },
   disconnectAnimatedNodes: function(

Libraries/Animated/src/animations/Animation.js

@@ -56,8 +56,9 @@ class Animation {
     onEnd && onEnd(result);
   }
   __startNativeAnimation(animatedValue: AnimatedValue): void {
+    NativeAnimatedHelper.API.enableQueue();
     animatedValue.__makeNative();
-    animatedValue.__connectAnimatedNodes();
+    NativeAnimatedHelper.API.disableQueue();
     this.__nativeId = NativeAnimatedHelper.generateNewAnimationId();
     NativeAnimatedHelper.API.startAnimatingNode(
       this.__nativeId,

Libraries/Animated/src/nodes/AnimatedNode.js

@@ -35,18 +35,12 @@ class AnimatedNode {
 
   /* Methods and props used by native Animated impl */
   __isNative: boolean;
-  __isConnected: boolean;
   __nativeTag: ?number;
   __makeNative() {
     if (!this.__isNative) {
       throw new Error('This node cannot be made a "native" animated node');
     }
   }
-  __connectAnimatedNodes() {
-    if (!this.__isNative) {
-      throw new Error('This node cannot be connected natively');
-    }
-  }
   __getNativeTag(): ?number {
     NativeAnimatedHelper.assertNativeAnimatedModule();
     invariant(

Libraries/Animated/src/nodes/AnimatedWithChildren.js

@@ -25,15 +25,6 @@ class AnimatedWithChildren extends AnimatedNode {
       this.__isNative = true;
       for (const child of this._children) {
         child.__makeNative();
-      }
-    }
-  }
-
-  __connectAnimatedNodes() {
-    if (!this.__isConnected) {
-      this.__isConnected = true;
-      for (const child of this._children) {
-        child.__connectAnimatedNodes();
         NativeAnimatedHelper.API.connectAnimatedNodes(
           this.__getNativeTag(),
           child.__getNativeTag(),

RNTester/js/RNTesterList.android.js

@@ -59,6 +59,10 @@ const ComponentExamples: Array<RNTesterExample> = [
     key: 'ScrollViewSimpleExample',
     module: require('./ScrollViewSimpleExample'),
   },
+  {
+    key: 'ScrollViewAnimatedExample',
+    module: require('./ScrollViewAnimatedExample'),
+  },
   {
     key: 'SectionListExample',
     module: require('./SectionListExample'),

RNTester/js/RNTesterList.ios.js

@@ -98,6 +98,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('./ScrollViewSimpleExample'),
     supportsTVOS: true,
   },
+  {
+    key: 'ScrollViewAnimatedExample',
+    module: require('./ScrollViewAnimatedExample'),
+    supportsTVOS: true,
+  },
   {
     key: 'SafeAreaViewExample',
     module: require('./SafeAreaViewExample'),

RNTester/js/ScrollViewAnimatedExample.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {Component} = React;
+const {
+  StyleSheet,
+  Text,
+  View,
+  Animated,
+  Easing,
+  TouchableOpacity,
+  Dimensions,
+} = ReactNative;
+
+class ScrollViewAnimatedExample extends Component<{}> {
+  _scrollViewPos = new Animated.Value(0);
+
+  startAnimation = () => {
+    this._scrollViewPos.setValue(0);
+    Animated.timing(this._scrollViewPos, {
+      toValue: 100,
+      duration: 10000,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  render() {
+    const interpolated = this._scrollViewPos.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 0.1],
+    });
+    const interpolated2 = this._scrollViewPos.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '1deg'],
+    });
+    return (
+      <View style={styles.container}>
+        <Animated.View
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'black',
+            transform: [{translateX: interpolated}, {rotate: interpolated2}],
+          }}
+        />
+        <Animated.ScrollView
+          horizontal
+          scrollEventThrottle={16}
+          onScroll={Animated.event(
+            [{nativeEvent: {contentOffset: {x: this._scrollViewPos}}}],
+            {useNativeDriver: true},
+          )}>
+          <TouchableOpacity onPress={this.startAnimation}>
+            <View style={styles.button}>
+              <Text>Scroll me horizontally</Text>
+            </View>
+          </TouchableOpacity>
+        </Animated.ScrollView>
+      </View>
+    );
+  }
+}
+
+const {width, height} = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  button: {
+    margin: 50,
+    width: width,
+    marginRight: width,
+    height: height / 2,
+  },
+});
+
+exports.title = '<ScrollViewAnimated>';
+exports.description = 'Component that is animated when ScrollView is offset.';
+
+exports.examples = [
+  {
+    title: 'Animated by scroll view',
+    render: function(): React.Element<typeof ScrollViewAnimatedExample> {
+      return <ScrollViewAnimatedExample />;
+    },
+  },
+];