Updated LayoutAnimation to accept 'translateX' animations.

Author: Ian MacDonald

Libraries/LayoutAnimation/LayoutAnimation.js

@@ -31,6 +31,7 @@ var Types = keyMirror(TypesEnum);
 var PropertiesEnum = {
   opacity: true,
   scaleXY: true,
+  translateX: true,
 };
 var Properties = keyMirror(PropertiesEnum);
 
@@ -45,6 +46,7 @@ var animType = PropTypes.shape({
   property: PropTypes.oneOf( // Only applies to create/delete
     Object.keys(Properties)
   ),
+  param: PropTypes.number,
 });
 
 type Anim = {
@@ -54,6 +56,7 @@ type Anim = {
   initialVelocity?: number,
   type?: $Enum<typeof TypesEnum>,
   property?: $Enum<typeof PropertiesEnum>,
+  param?: number,
 }
 
 var configType = PropTypes.shape({

React/Modules/RCTUIManager.m

@@ -62,6 +62,7 @@ @interface RCTAnimation : NSObject
 @property (nonatomic, readonly) CGFloat springDamping;
 @property (nonatomic, readonly) CGFloat initialVelocity;
 @property (nonatomic, readonly) RCTAnimationType animationType;
+@property (nonatomic, readonly) CGFloat param;
 
 @end
 
@@ -140,6 +141,7 @@ - (instancetype)initWithDuration:(NSTimeInterval)duration dictionary:(NSDictiona
       _springDamping = [RCTConvert CGFloat:config[@"springDamping"]];
       _initialVelocity = [RCTConvert CGFloat:config[@"initialVelocity"]];
     }
+    _param = [RCTConvert CGFloat:config[@"param"]];
   }
   return self;
 }
@@ -651,12 +653,17 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
 
         CATransform3D finalTransform = view.layer.transform;
         CGFloat finalOpacity = view.layer.opacity;
+        CGPoint finalPos = view.layer.position;
 
         NSString *property = createAnimation.property;
         if ([property isEqualToString:@"scaleXY"]) {
           view.layer.transform = CATransform3DMakeScale(0, 0, 0);
         } else if ([property isEqualToString:@"opacity"]) {
           view.layer.opacity = 0.0;
+        } else if ([property isEqualToString:@"translateX"]) {
+          CGPoint pos = view.layer.position;
+          pos.x += createAnimation.param;
+          view.layer.position = pos;
         } else {
           RCTLogError(@"Unsupported layout animation createConfig property %@",
                       createAnimation.property);
@@ -667,6 +674,8 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
             view.layer.transform = finalTransform;
           } else if ([property isEqualToString:@"opacity"]) {
             view.layer.opacity = finalOpacity;
+          } else if ([property isEqualToString:@"translateX"]) {
+            view.layer.position = finalPos;
           }
           if (updateBlock) {
             updateBlock(self, viewRegistry);
@@ -829,6 +838,10 @@ - (void)_removeChildren:(NSArray<UIView *> *)children
         removedChild.layer.transform = CATransform3DMakeScale(0.001, 0.001, 0.001);
       } else if ([property isEqualToString:@"opacity"]) {
         removedChild.layer.opacity = 0.0;
+      } else if ([property isEqualToString:@"translateX"]) {
+        CGPoint pos = removedChild.layer.position;
+        pos.x += deleteAnimation.param;
+        removedChild.layer.position = pos;
       } else {
         RCTLogError(@"Unsupported layout animation createConfig property %@",
                     deleteAnimation.property);
@@ -987,12 +1000,9 @@ - (void)_manageChildren:(NSNumber *)containerTag
     // When performing a delete animation, views are not removed immediately
     // from their container so we need to offset the insertion index if a view
     // that will be removed appears earlier than the view we are inserting.
-    if (isUIViewRegistry && _viewsToBeDeleted.count > 0) {
-      for (NSInteger index = 0; index < insertAtIndex; index++) {
-        UIView *subview = ((UIView *)container).reactSubviews[index];
-        if ([_viewsToBeDeleted containsObject:subview]) {
-          insertAtIndex++;
-        }
+    if (isUIViewRegistry && removeAtIndices.count > 0) {
+      if ([removeAtIndices containsObject:reactIndex]) {
+        insertAtIndex++;
       }
     }
 

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

@@ -48,11 +48,13 @@ InterpolatorType.EASE_IN_EASE_OUT, new AccelerateDecelerateInterpolator(),
 
   protected @Nullable AnimatedPropertyType mAnimatedProperty;
   protected int mDurationMs;
+  protected double mAnimatedParam;
 
   public void reset() {
     mAnimatedProperty = null;
     mDurationMs = 0;
     mDelayMs = 0;
+    mAnimatedParam = 0;
     mInterpolator = null;
   }
 
@@ -61,6 +63,7 @@ public void initializeFromConfig(ReadableMap data, int globalDuration) {
         AnimatedPropertyType.fromString(data.getString("property")) : null;
     mDurationMs = data.hasKey("duration") ? data.getInt("duration") : globalDuration;
     mDelayMs = data.hasKey("delay") ? data.getInt("delay") : 0;
+    mAnimatedParam = data.hasKey("param") ? data.getDouble("param") : 0;
     if (!data.hasKey("type")) {
       throw new IllegalArgumentException("Missing interpolation type.");
     }

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

@@ -8,7 +8,8 @@
  */
 /* package */ enum AnimatedPropertyType {
   OPACITY("opacity"),
-  SCALE_XY("scaleXY");
+  SCALE_XY("scaleXY"),
+  TRANSATE_X("translateX");
 
   private final String mName;
 

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

@@ -5,6 +5,7 @@
 import android.view.View;
 import android.view.animation.Animation;
 import android.view.animation.ScaleAnimation;
+import android.view.animation.TranslateAnimation;
 
 import com.facebook.react.uimanager.IllegalViewOperationException;
 
@@ -42,6 +43,15 @@ Animation createAnimationImpl(View view, int x, int y, int width, int height) {
               Animation.RELATIVE_TO_SELF,
               .5f);
         }
+        case TRANSFORM_X: {
+          float fromValue = isReverse() ? 0.0f : mAnimatedParam;
+          float toValue = isReverse() ? mAnimatedParam : 0.0f;
+          return new TranslateAnimation(
+              fromValue,
+              toValue,
+              0.0f,
+              0.0f);
+        }
         default:
           throw new IllegalViewOperationException(
               "Missing animation for property : " + mAnimatedProperty);