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 facebook#18220

Differential Revision: D7542334

Pulled By: hramos

fbshipit-source-id: 208472e5d8f5a04ca3c3a99adce77b035e331ef1

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);

React/Modules/RCTUIManager.m

@@ -595,6 +595,10 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
         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 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
         }
 
         [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 @@ - (void)_removeChildren:(NSArray<UIView *> *)children
     [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 {

ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/AnimatedPropertyType.java

@@ -8,6 +8,8 @@
  */
 /* package */ enum AnimatedPropertyType {
   OPACITY("opacity"),
+  SCALE_X("scaleX"),
+  SCALE_Y("scaleY"),
   SCALE_XY("scaleXY");
 
   private final String mName;

ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java

@@ -42,6 +42,32 @@ Animation createAnimationImpl(View view, int x, int y, int width, int height) {
               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);