Fix connection of AnimatedNodes and creation of redundant AnimatedNodes

When using one AnimatedValue to interpolate several properties in one
View, it caused several redundant AnimatedNodes to be created for the
same AnimatedProps.

Additionally, the connections to the AnimatedProps were made before the
native node for the AnimatedProps was created, causing them not to work.
This splits the connection creation out from the makeNative call,
and calls it after all the required nodes are created.

Test App.js:
```jsx
import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Animated } from 'react-native';
import { Svg, Rect, Path } from 'react-native-svg';

const { width, height } = Dimensions.get('window');
const AnimatedRect = Animated.createAnimatedComponent(Rect);
const AnimatedPath = Animated.createAnimatedComponent(Path);

function getInitialState() {
  const anim = new Animated.Value(0);
  const fillOpacity = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });
  const offset = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 10],
  });
  const strokeOpacity = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
    extrapolateRight: 'clamp',
  });
  const path = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['M20,20L20,80L80,80L80,20Z', 'M40,40L33,60L60,60L65,40Z'],
  });
  const fill = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.99)'],
  });
  const oneToFivePx = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['1px', '5px'],
  });
  return { anim, fillOpacity, offset, strokeOpacity, path, fill, oneToFivePx };
}

export default class App extends Component {
  state = getInitialState();

  componentDidMount() {
    const { anim } = this.state;
    Animated.timing(anim, {
      toValue: 1,
      duration: 10000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    const { fillOpacity, offset, strokeOpacity, path, fill, oneToFivePx } = this.state;
    return (
      <View style={styles.container}>
        <Svg width={width} height={height} viewBox="0 0 100 100">
          <AnimatedRect
            x="5"
            y="5"
            width="90"
            height="90"
            stroke="blue"
            fill={fill}
            strokeDasharray="1 1"
            strokeWidth={oneToFivePx}
            strokeDashoffset={offset}
            strokeOpacity={strokeOpacity}
            fillOpacity={fillOpacity}
          />
          <AnimatedPath
            d={path}
            stroke="blue"
          />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
  },
});
```

Author: msand

Libraries/Animated/src/animations/Animation.js

@@ -57,6 +57,7 @@ class Animation {
   }
   __startNativeAnimation(animatedValue: AnimatedValue): void {
     animatedValue.__makeNative();
+    animatedValue.__connectAnimatedNodes();
     this.__nativeId = NativeAnimatedHelper.generateNewAnimationId();
     NativeAnimatedHelper.API.startAnimatingNode(
       this.__nativeId,

Libraries/Animated/src/nodes/AnimatedNode.js

@@ -35,12 +35,18 @@ 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(
@@ -49,11 +55,11 @@ class AnimatedNode {
     );
     if (this.__nativeTag == null) {
       const nativeTag: ?number = NativeAnimatedHelper.generateNewNodeTag();
+      this.__nativeTag = nativeTag;
       NativeAnimatedHelper.API.createAnimatedNode(
         nativeTag,
         this.__getNativeConfig(),
       );
-      this.__nativeTag = nativeTag;
     }
     return this.__nativeTag;
   }

Libraries/Animated/src/nodes/AnimatedWithChildren.js

@@ -25,6 +25,15 @@ 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(),