Support color animation with native driver for iOS (#1513)

Summary:
Adds support for Animated.Color with native driver for iOS. Reads the native config for the rbga channel AnimatedNodes, and on update(), converts the values into a SharedColor.

Followup changes will include support for platform colors.

Ran update_pods: https://www.internalfb.com/intern/wiki/React_Native/Preparing_to_Ship/Open_Source_Pods/

Changelog:
[iOS][Added] - Support running animations with AnimatedColor with native driver

Reviewed By: sammy-SC

Differential Revision: D33860583

fbshipit-source-id: 990ad0f754a21e3939f2cb233bcfa793ef12eb14

# Conflicts:
#	packages/rn-tester/Podfile.lock

Co-authored-by: Genki Kondo <[email protected]>

Author: christophpurrer

Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.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 <React/RCTAnimatedNode.h>
+
+@interface RCTColorAnimatedNode : RCTAnimatedNode
+
+@property (nonatomic, assign) int32_t color;
+
+@end

Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.m

@@ -0,0 +1,30 @@
+/*
+ * 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 <React/RCTColorAnimatedNode.h>
+#import <React/RCTValueAnimatedNode.h>
+
+@implementation RCTColorAnimatedNode
+
+- (void)performUpdate
+{
+  [super performUpdate];
+
+  RCTValueAnimatedNode *rNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"r"]];
+  RCTValueAnimatedNode *gNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"g"]];
+  RCTValueAnimatedNode *bNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"b"]];
+  RCTValueAnimatedNode *aNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"a"]];
+
+  _color = ((int)round(aNode.value * 255) & 0xff) << 24 |
+      ((int)round(rNode.value) & 0xff) << 16 |
+      ((int)round(gNode.value) & 0xff) << 8 |
+      ((int)round(bNode.value) & 0xff);
+
+  // TODO (T111179606): Support platform colors for color animations
+}
+
+@end

Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m

@@ -12,6 +12,7 @@
 #import <React/RCTStyleAnimatedNode.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTValueAnimatedNode.h>
+#import <React/RCTColorAnimatedNode.h>
 
 @implementation RCTPropsAnimatedNode
 {
@@ -118,17 +119,21 @@ - (void)performUpdate
   for (NSNumber *parentTag in self.parentNodes.keyEnumerator) {
     RCTAnimatedNode *parentNode = [self.parentNodes objectForKey:parentTag];
     if ([parentNode isKindOfClass:[RCTStyleAnimatedNode class]]) {
-      [self->_propsDictionary addEntriesFromDictionary:[(RCTStyleAnimatedNode *)parentNode propsDictionary]];
-
+      RCTStyleAnimatedNode *styleAnimatedNode = (RCTStyleAnimatedNode *)parentNode;
+      [_propsDictionary addEntriesFromDictionary:styleAnimatedNode.propsDictionary];
     } else if ([parentNode isKindOfClass:[RCTValueAnimatedNode class]]) {
+      RCTValueAnimatedNode *valueAnimatedNode = (RCTValueAnimatedNode *)parentNode;
       NSString *property = [self propertyNameForParentTag:parentTag];
-      id animatedObject = [(RCTValueAnimatedNode *)parentNode animatedObject];
+      id animatedObject = valueAnimatedNode.animatedObject;
       if (animatedObject) {
-        self->_propsDictionary[property] = animatedObject;
+        _propsDictionary[property] = animatedObject;
       } else {
-        CGFloat value = [(RCTValueAnimatedNode *)parentNode value];
-        self->_propsDictionary[property] = @(value);
+        _propsDictionary[property] = @(valueAnimatedNode.value);
       }
+    } else if ([parentNode isKindOfClass:[RCTColorAnimatedNode class]]) {
+      RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)parentNode;
+      NSString *property = [self propertyNameForParentTag:parentTag];
+      _propsDictionary[property] = @(colorAnimatedNode.color);
     }
   }
 

Libraries/NativeAnimation/Nodes/RCTStyleAnimatedNode.m

@@ -9,6 +9,7 @@
 #import <React/RCTAnimationUtils.h>
 #import <React/RCTValueAnimatedNode.h>
 #import <React/RCTTransformAnimatedNode.h>
+#import <React/RCTColorAnimatedNode.h>
 
 @implementation RCTStyleAnimatedNode
 {
@@ -38,11 +39,14 @@ - (void)performUpdate
     RCTAnimatedNode *node = [self.parentNodes objectForKey:nodeTag];
     if (node) {
       if ([node isKindOfClass:[RCTValueAnimatedNode class]]) {
-        RCTValueAnimatedNode *parentNode = (RCTValueAnimatedNode *)node;
-        [self->_propsDictionary setObject:@(parentNode.value) forKey:property];
+        RCTValueAnimatedNode *valueAnimatedNode = (RCTValueAnimatedNode *)node;
+        _propsDictionary[property] = @(valueAnimatedNode.value);
       } else if ([node isKindOfClass:[RCTTransformAnimatedNode class]]) {
-        RCTTransformAnimatedNode *parentNode = (RCTTransformAnimatedNode *)node;
-        [self->_propsDictionary addEntriesFromDictionary:parentNode.propsDictionary];
+        RCTTransformAnimatedNode *transformAnimatedNode = (RCTTransformAnimatedNode *)node;
+        [_propsDictionary addEntriesFromDictionary:transformAnimatedNode.propsDictionary];
+      } else if ([node isKindOfClass:[RCTColorAnimatedNode class]]) {
+        RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)node;
+        _propsDictionary[property] = @(colorAnimatedNode.color);
       }
     }
   }];

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

@@ -12,6 +12,7 @@
 #import <React/RCTAdditionAnimatedNode.h>
 #import <React/RCTAnimatedNode.h>
 #import <React/RCTAnimationDriver.h>
+#import <React/RCTColorAnimatedNode.h>
 #import <React/RCTDiffClampAnimatedNode.h>
 #import <React/RCTDivisionAnimatedNode.h>
 #import <React/RCTEventAnimation.h>
@@ -86,6 +87,7 @@ - (void)createAnimatedNode:(NSNumber *)tag
   dispatch_once(&mapToken, ^{
     map = @{@"style" : [RCTStyleAnimatedNode class],
             @"value" : [RCTValueAnimatedNode class],
+            @"color" : [RCTColorAnimatedNode class],
             @"props" : [RCTPropsAnimatedNode class],
             @"interpolation" : [RCTInterpolationAnimatedNode class],
             @"addition" : [RCTAdditionAnimatedNode class],

Libraries/NativeAnimation/React-RCTAnimation.podspec

@@ -29,7 +29,7 @@ Pod::Spec.new do |s|
   s.platforms              = { :ios => "11.0", :osx => "10.15" } # TODO(macOS GH#214)
   s.compiler_flags         = folly_compiler_flags + ' -Wno-nullability-completeness'
   s.source                 = source
-  s.source_files           = "{Drivers/*,Nodes/*,*}.{m,mm}"
+  s.source_files           = "**/*.{h,m,mm}"
   s.preserve_paths         = "package.json", "LICENSE", "LICENSE-docs"
   s.header_dir             = "RCTAnimation"
   s.pod_target_xcconfig    = {

React/Fabric/Mounting/RCTMountingManager.mm

@@ -15,6 +15,7 @@
 #import <React/RCTFollyConvert.h>
 #import <React/RCTLog.h>
 #import <React/RCTUtils.h>
+#import <react/config/ReactNativeConfig.h>
 #import <react/renderer/components/root/RootShadowNode.h>
 #import <react/renderer/core/LayoutableShadowNode.h>
 #import <react/renderer/core/RawProps.h>
@@ -318,6 +319,11 @@ - (void)synchronouslyUpdateViewOnUIThread:(ReactTag)reactTag
   if (props[@"opacity"] && componentView.layer.opacity != (float)newViewProps.opacity) {
     componentView.layer.opacity = newViewProps.opacity;
   }
+
+  auto reactNativeConfig = _contextContainer->at<std::shared_ptr<ReactNativeConfig const>>("ReactNativeConfig");
+  if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:finalize_updates_on_synchronous_update_view_ios")) {
+    [componentView finalizeUpdates:RNComponentViewUpdateMaskProps];
+  }
 }
 
 - (void)synchronouslyDispatchCommandOnUIThread:(ReactTag)reactTag

ReactCommon/react/renderer/graphics/platform/ios/Color.h

@@ -7,7 +7,6 @@
 
 #pragma once
 
-#include <butter/optional.h>
 #include <cmath>
 #include <optional>