From 3372541a2a7ffc38311ba02f9183ba96edc6dfd8 Mon Sep 17 00:00:00 2001
From: Liamandrew <liam.e.andrew@gmail.com>
Date: Fri, 6 Apr 2018 17:39:54 -0700
Subject: [PATCH] Add ability for Animated views to be created with scale X or
 scale Y

Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

*Accidentally closed previous PR*

Sometimes it can be useful to have an animated view be created with either scale X or scale Y in cases where scaleXY might not be as visually appealing.

Test Plan
Tested on both ios and android in the sample project:

https://github.com/Liamandrew/ScaleAnimationSample

![scaleanimation](https://user-images.githubusercontent.com/30114733/37023697-d0aa7372-217a-11e8-8d3b-2958c63ad83a.gif)
Closes https://github.com/facebook/react-native/pull/18220

Differential Revision: D7542334

Pulled By: hramos

fbshipit-source-id: 208472e5d8f5a04ca3c3a99adce77b035e331ef1
---
 Libraries/LayoutAnimation/LayoutAnimation.js  |  2 ++
 React/Modules/RCTUIManager.m                  | 14 +++++++++-
 .../layoutanimation/AnimatedPropertyType.java |  2 ++
 .../layoutanimation/BaseLayoutAnimation.java  | 26 +++++++++++++++++++
 4 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/Libraries/LayoutAnimation/LayoutAnimation.js b/Libraries/LayoutAnimation/LayoutAnimation.js
index fe4a2cc2b..f04feca93 100644
--- a/Libraries/LayoutAnimation/LayoutAnimation.js
+++ b/Libraries/LayoutAnimation/LayoutAnimation.js
@@ -32,6 +32,8 @@ const Types = keyMirror(TypesEnum);
 
 const PropertiesEnum = {
   opacity: true,
+  scaleX: true,
+  scaleY: true,
   scaleXY: true,
 };
 const Properties = keyMirror(PropertiesEnum);
diff --git a/React/Modules/RCTUIManager.m b/React/Modules/RCTUIManager.m
index 5dcce4658..49b0f774e 100644
--- a/React/Modules/RCTUIManager.m
+++ b/React/Modules/RCTUIManager.m
@@ -595,6 +595,10 @@ static NSDictionary *deviceOrientationEventBody(UIDeviceOrientation orientation)
         NSString *property = creatingLayoutAnimation.property;
         if ([property isEqualToString:@"scaleXY"]) {
           view.layer.transform = CATransform3DMakeScale(0, 0, 0);
+        } else if ([property isEqualToString:@"scaleX"]) {
+        view.layer.transform = CATransform3DMakeScale(0, 1, 0);
+        } else if ([property isEqualToString:@"scaleY"]) {
+        view.layer.transform = CATransform3DMakeScale(1, 0, 0);
         } else if ([property isEqualToString:@"opacity"]) {
           view.layer.opacity = 0.0;
         } else {
@@ -603,7 +607,11 @@ static NSDictionary *deviceOrientationEventBody(UIDeviceOrientation orientation)
         }
 
         [creatingLayoutAnimation performAnimations:^{
-          if ([property isEqualToString:@"scaleXY"]) {
+          if (
+            [property isEqualToString:@"scaleX"] ||
+            [property isEqualToString:@"scaleY"] ||
+            [property isEqualToString:@"scaleXY"]
+          ) {
             view.layer.transform = finalTransform;
           } else if ([property isEqualToString:@"opacity"]) {
             view.layer.opacity = finalOpacity;
@@ -738,6 +746,10 @@ RCT_EXPORT_METHOD(removeSubviewsFromContainerWithID:(nonnull NSNumber *)containe
     [deletingLayoutAnimation performAnimations:^{
       if ([property isEqualToString:@"scaleXY"]) {
         removedChild.layer.transform = CATransform3DMakeScale(0.001, 0.001, 0.001);
+      } else if ([property isEqualToString:@"scaleX"]) {
+      removedChild.layer.transform = CATransform3DMakeScale(0.001, 1, 0.001);
+      } else if ([property isEqualToString:@"scaleY"]) {
+      removedChild.layer.transform = CATransform3DMakeScale(1, 0.001, 0.001);
       } else if ([property isEqualToString:@"opacity"]) {
         removedChild.layer.opacity = 0.0;
       } else {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/AnimatedPropertyType.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/AnimatedPropertyType.java
index 51a9d246c..b97979974 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/AnimatedPropertyType.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/AnimatedPropertyType.java
@@ -8,6 +8,8 @@ package com.facebook.react.uimanager.layoutanimation;
  */
 /* package */ enum AnimatedPropertyType {
   OPACITY("opacity"),
+  SCALE_X("scaleX"),
+  SCALE_Y("scaleY"),
   SCALE_XY("scaleXY");
 
   private final String mName;
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java
index f4fa2ea5c..be06aedbc 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java
@@ -42,6 +42,32 @@ import com.facebook.react.uimanager.IllegalViewOperationException;
               Animation.RELATIVE_TO_SELF,
               .5f);
         }
+        case SCALE_X: {
+          float fromValue = isReverse() ? 1.0f : 0.0f;
+          float toValue = isReverse() ? 0.0f : 1.0f;
+          return new ScaleAnimation(
+              fromValue,
+              toValue,
+              1f,
+              1f,
+              Animation.RELATIVE_TO_SELF,
+              .5f,
+              Animation.RELATIVE_TO_SELF,
+              0f);
+        }
+        case SCALE_Y: {
+          float fromValue = isReverse() ? 1.0f : 0.0f;
+          float toValue = isReverse() ? 0.0f : 1.0f;
+          return new ScaleAnimation(
+              1f,
+              1f,
+              fromValue,
+              toValue,
+              Animation.RELATIVE_TO_SELF,
+              0f,
+              Animation.RELATIVE_TO_SELF,
+              .5f);
+        }
         default:
           throw new IllegalViewOperationException(
               "Missing animation for property : " + mAnimatedProperty);