Fix native animated style and transform node to call __makeNative once all the children are converted to native nodes (#20658)

Summary:
This PR fixes an issue I have found while playing with native animated driver nodes.

I discovered the bug when using animated views that have both animated props and styles. See this snack to see an example: https://snack.expo.io/B17SFXy8Q

In that example we set `opacity` and `style` props which both contain animated props. This is not an usual way to do that, as normally you would place `opacity` inside the `styles` in which case the bug won't surface. But this is only done for demo purposes and in practice the problem will occur if you have a custom native view that exposes props that are not styles and can be animated.

In the above example you get this error:

> Invariant Violation: Attempt to get native tag from node not marked as "native"

When `opacity` is moved into `styles` container the problem no longer occurs.

The problem turned out to be related to the initialization code responsible for creating native animated nodes. In all subclasses of `AnimatedWithChildren` (like `AimatedAddition`) we only call `super.__makeNative` after we call `__makeNative` method on the child nodes. This order was reversed in `AnimatedStyle` and `AnimatedTransform`. As a result when `super.__makeNative` is called in `AnimatedStyle`, we try to call `__getNativeTag` on children nodes not yet marked as native which results in the error described above ("Attempt to get native tag...").

We should instead follow the order of calling `super.__makeNative` that is used in the remaining subclasses of `AnimatedWithChildren`. Such that all the children nodes are first converted to native prior to calling superclass method. This is what this PR is changing.
Pull Request resolved: #20658

Differential Revision: D9297191

Pulled By: hramos

fbshipit-source-id: f5e394fb259ff514c7c1433edcb5fc89203f55e2

Author: kmagiera

Libraries/Animated/src/nodes/AnimatedStyle.js

@@ -95,13 +95,13 @@ class AnimatedStyle extends AnimatedWithChildren {
   }
 
   __makeNative() {
-    super.__makeNative();
     for (const key in this._style) {
       const value = this._style[key];
       if (value instanceof AnimatedNode) {
         value.__makeNative();
       }
     }
+    super.__makeNative();
   }
 
   __getNativeConfig(): Object {

Libraries/Animated/src/nodes/AnimatedTransform.js

@@ -22,7 +22,6 @@ class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __makeNative() {
-    super.__makeNative();
     this._transforms.forEach(transform => {
       for (const key in transform) {
         const value = transform[key];
@@ -31,6 +30,7 @@ class AnimatedTransform extends AnimatedWithChildren {
         }
       }
     });
+    super.__makeNative();
   }
 
   __getValue(): $ReadOnlyArray<Object> {