From 75505993f0523ebf5f1ad68ee30e91e6879b28a3 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys@swmansion.com>
Date: Mon, 13 Aug 2018 10:14:31 -0700
Subject: [PATCH] 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: https://github.com/facebook/react-native/pull/20658

Differential Revision: D9297191

Pulled By: hramos

fbshipit-source-id: f5e394fb259ff514c7c1433edcb5fc89203f55e2
---
 Libraries/Animated/src/nodes/AnimatedStyle.js     | 2 +-
 Libraries/Animated/src/nodes/AnimatedTransform.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Libraries/Animated/src/nodes/AnimatedStyle.js b/Libraries/Animated/src/nodes/AnimatedStyle.js
index 990b960a336..89d959f487d 100644
--- a/Libraries/Animated/src/nodes/AnimatedStyle.js
+++ b/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 {
diff --git a/Libraries/Animated/src/nodes/AnimatedTransform.js b/Libraries/Animated/src/nodes/AnimatedTransform.js
index 1706923394e..537326e58ff 100644
--- a/Libraries/Animated/src/nodes/AnimatedTransform.js
+++ b/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> {