Introduce RCTObjectAnimatedNode (#36804)

Summary:
Pull Request resolved: #36804

AnimatedObject is a more generic version of AnimatedTransform, able to handle animated values within arrays and objects. This is useful for props of native components that may need to be animated per field.

This diff adds the native (iOS) counterpart to AnimatedObject node in JS. The node handles array and map value types.

Changelog:
[Internal][Added] - Introduce ObjectAnimatedNode iOS-side node for handling array and object prop values

Reviewed By: philIip

Differential Revision: D44678162

fbshipit-source-id: 7cdc075229a55fcb450f23ba5667b3ddd48c24df

packages/react-native/Libraries/NativeAnimation/Nodes/RCTObjectAnimatedNode.h

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTAnimatedNode.h"
+
+@interface RCTObjectAnimatedNode : RCTAnimatedNode
+
+@property (nonatomic, strong, readonly) id value;
+
+@end

packages/react-native/Libraries/NativeAnimation/Nodes/RCTObjectAnimatedNode.m

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTObjectAnimatedNode.h"
+#import "RCTValueAnimatedNode.h"
+
+NSString *const VALUE_KEY = @"value";
+NSString *const NODE_TAG_KEY = @"nodeTag";
+
+@implementation RCTObjectAnimatedNode
+
+- (void)performUpdate
+{
+  [super performUpdate];
+
+  id value = self.config[VALUE_KEY];
+  if ([value isKindOfClass:[NSDictionary class]]) {
+    _value = [self _performUpdateHelperDictionary:(NSDictionary *)value];
+  } else if ([value isKindOfClass:[NSArray class]]) {
+    _value = [self _performUpdateHelperArray:(NSArray *)value];
+  }
+}
+
+- (NSDictionary<NSString *, id> *)_performUpdateHelperDictionary:(NSDictionary<NSString *, id> *)source
+{
+  NSMutableDictionary<NSString *, id> *result = [NSMutableDictionary new];
+  for (NSString *key in source) {
+    result[key] = [self _convertValue:source[key]];
+  }
+  return result;
+}
+
+- (NSArray *)_performUpdateHelperArray:(NSArray *)source
+{
+  NSMutableArray *result = [NSMutableArray array];
+  for (id value in source) {
+    [result addObject:[self _convertValue:value]];
+  }
+  return result;
+}
+
+- (id)_convertValue:(id)value
+{
+  if ([value isKindOfClass:[NSDictionary class]]) {
+    NSDictionary<NSString *, id> *dict = (NSDictionary *)value;
+    id nodeTag = [dict objectForKey:NODE_TAG_KEY];
+    if (nodeTag && [nodeTag isKindOfClass:[NSNumber class]]) {
+      RCTAnimatedNode *node = [self.parentNodes objectForKey:(NSNumber *)nodeTag];
+      if ([node isKindOfClass:[RCTValueAnimatedNode class]]) {
+        RCTValueAnimatedNode *valueNode = (RCTValueAnimatedNode *)node;
+        return @(valueNode.value);
+      }
+    }
+    return [self _performUpdateHelperDictionary:dict];
+  } else if ([value isKindOfClass:[NSArray class]]) {
+    return [self _performUpdateHelperArray:(NSArray *)value];
+  } else {
+    return value;
+  }
+}
+
+@end

packages/react-native/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m

@@ -9,7 +9,7 @@
 
 #import <React/RCTAnimationUtils.h>
 #import <React/RCTColorAnimatedNode.h>
-#import <React/RCTLog.h>
+#import <React/RCTObjectAnimatedNode.h>
 #import <React/RCTStyleAnimatedNode.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTValueAnimatedNode.h>
@@ -131,6 +131,10 @@ - (void)performUpdate
       RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)parentNode;
       NSString *property = [self propertyNameForParentTag:parentTag];
       _propsDictionary[property] = @(colorAnimatedNode.color);
+    } else if ([parentNode isKindOfClass:[RCTObjectAnimatedNode class]]) {
+      RCTObjectAnimatedNode *objectAnimatedNode = (RCTObjectAnimatedNode *)parentNode;
+      NSString *property = [self propertyNameForParentTag:parentTag];
+      _propsDictionary[property] = objectAnimatedNode.value;
     }
   }
 

packages/react-native/Libraries/NativeAnimation/Nodes/RCTStyleAnimatedNode.m

@@ -7,6 +7,7 @@
 
 #import <React/RCTAnimationUtils.h>
 #import <React/RCTColorAnimatedNode.h>
+#import <React/RCTObjectAnimatedNode.h>
 #import <React/RCTStyleAnimatedNode.h>
 #import <React/RCTTransformAnimatedNode.h>
 #import <React/RCTValueAnimatedNode.h>
@@ -50,6 +51,9 @@ - (void)performUpdate
       } else if ([node isKindOfClass:[RCTColorAnimatedNode class]]) {
         RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)node;
         _propsDictionary[property] = @(colorAnimatedNode.color);
+      } else if ([node isKindOfClass:[RCTObjectAnimatedNode class]]) {
+        RCTObjectAnimatedNode *objectAnimatedNode = (RCTObjectAnimatedNode *)node;
+        _propsDictionary[property] = objectAnimatedNode.value;
       }
     }
   }];

packages/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

@@ -21,6 +21,7 @@
 #import <React/RCTInterpolationAnimatedNode.h>
 #import <React/RCTModuloAnimatedNode.h>
 #import <React/RCTMultiplicationAnimatedNode.h>
+#import <React/RCTObjectAnimatedNode.h>
 #import <React/RCTPropsAnimatedNode.h>
 #import <React/RCTSpringAnimation.h>
 #import <React/RCTStyleAnimatedNode.h>
@@ -97,7 +98,8 @@ - (void)createAnimatedNode:(NSNumber *)tag config:(NSDictionary<NSString *, id>
       @"modulus" : [RCTModuloAnimatedNode class],
       @"subtraction" : [RCTSubtractionAnimatedNode class],
       @"transform" : [RCTTransformAnimatedNode class],
-      @"tracking" : [RCTTrackingAnimatedNode class]
+      @"tracking" : [RCTTrackingAnimatedNode class],
+      @"object" : [RCTObjectAnimatedNode class],
     };
   });