Add support for animating all properties using native driver

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -21,6 +21,7 @@ import type {
 import type {AnimationConfig, EndCallback} from './animations/Animation';
 import type {InterpolationConfigType} from './nodes/AnimatedInterpolation';
 import invariant from 'invariant';
+import {colorToRgba} from './colorToRgba';
 
 let __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
 let __nativeAnimationIdCount = 1; /* used for started animations */
@@ -151,35 +152,10 @@ const API = {
       animatedNodeTag,
     );
   },
-};
-
-/**
- * Styles allowed by the native animated implementation.
- *
- * In general native animated implementation should support any numeric property that doesn't need
- * to be updated through the shadow view hierarchy (all non-layout properties).
- */
-const STYLES_WHITELIST = {
-  opacity: true,
-  transform: true,
-  borderRadius: true,
-  borderBottomEndRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderBottomStartRadius: true,
-  borderTopEndRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderTopStartRadius: true,
-  elevation: true,
-  /* ios styles */
-  shadowOpacity: true,
-  shadowRadius: true,
-  /* legacy android transform properties */
-  scaleX: true,
-  scaleY: true,
-  translateX: true,
-  translateY: true,
+  addEnqueuedUpdateProp(prop: string) {
+    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    NativeAnimatedModule.addEnqueuedUpdateProp(prop);
+  },
 };
 
 const TRANSFORM_WHITELIST = {
@@ -204,7 +180,11 @@ const SUPPORTED_INTERPOLATION_PARAMS = {
 };
 
 function addWhitelistedStyleProp(prop: string): void {
-  STYLES_WHITELIST[prop] = true;
+  console.warn(
+    'addWhitelistedStyleProp is now deprecated and no longer in use. ' +
+      'The native animated module now supports animating all properties ' +
+      'when the useNativeDriver flag is set to true.',
+  );
 }
 
 function addWhitelistedTransformProp(prop: string): void {
@@ -242,16 +222,6 @@ function validateTransform(
   });
 }
 
-function validateStyles(styles: {[key: string]: ?number, ...}): void {
-  for (const key in styles) {
-    if (!STYLES_WHITELIST.hasOwnProperty(key)) {
-      throw new Error(
-        `Style property '${key}' is not supported by native animated module`,
-      );
-    }
-  }
-}
-
 function validateInterpolation(config: InterpolationConfigType): void {
   for (const key in config) {
     if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
@@ -312,7 +282,7 @@ function transformDataType(value: number | string): number | string {
     const radians = (degrees * Math.PI) / 180.0;
     return radians;
   } else {
-    return value;
+    return colorToRgba(value);
   }
 }
 
@@ -321,7 +291,6 @@ module.exports = {
   addWhitelistedStyleProp,
   addWhitelistedTransformProp,
   addWhitelistedInterpolationParam,
-  validateStyles,
   validateTransform,
   validateInterpolation,
   generateNewNodeTag,

Libraries/Animated/src/NativeAnimatedModule.js

@@ -57,6 +57,7 @@ export interface Spec extends TurboModule {
     eventName: string,
     animatedNodeTag: number,
   ) => void;
+  +addEnqueuedUpdateProp: (prop: string) => void;
 
   // Events
   +addListener: (eventName: string) => void;

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -642,7 +642,7 @@ describe('Native Animated', () => {
       }
     });
 
-    it('fails for unsupported styles', () => {
+    it('allows all properties', () => {
       const left = new Animated.Value(0);
 
       TestRenderer.create(<Animated.View style={{left}} />);
@@ -652,7 +652,7 @@ describe('Native Animated', () => {
         duration: 50,
         useNativeDriver: true,
       });
-      expect(animation.start).toThrowError(/left/);
+      expect(animation.start).not.toThrowError();
     });
 
     it('works for any `static` props and styles', () => {

Libraries/Animated/src/colorToRgba.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+/* eslint no-bitwise: 0 */
+
+'use strict';
+
+const normalizeColor = require('../../StyleSheet/normalizeColor');
+
+function colorToRgba(input: string): string {
+  let int32Color = normalizeColor(input);
+  if (int32Color === null) {
+    return input;
+  }
+
+  int32Color = int32Color || 0;
+
+  const r = (int32Color & 0xff000000) >>> 24;
+  const g = (int32Color & 0x00ff0000) >>> 16;
+  const b = (int32Color & 0x0000ff00) >>> 8;
+  const a = (int32Color & 0x000000ff) / 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+export {colorToRgba};

Libraries/Animated/src/nodes/AnimatedInterpolation.js

@@ -8,16 +8,15 @@
  * @format
  */
 
-/* eslint no-bitwise: 0 */
-
 'use strict';
 
+import {colorToRgba} from '../colorToRgba';
+
 const AnimatedNode = require('./AnimatedNode');
 const AnimatedWithChildren = require('./AnimatedWithChildren');
 const NativeAnimatedHelper = require('../NativeAnimatedHelper');
 
 const invariant = require('invariant');
-const normalizeColor = require('../../../StyleSheet/normalizeColor');
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
@@ -168,22 +167,6 @@ function interpolate(
   return result;
 }
 
-function colorToRgba(input: string): string {
-  let int32Color = normalizeColor(input);
-  if (int32Color === null) {
-    return input;
-  }
-
-  int32Color = int32Color || 0;
-
-  const r = (int32Color & 0xff000000) >>> 24;
-  const g = (int32Color & 0x00ff0000) >>> 16;
-  const b = (int32Color & 0x0000ff00) >>> 8;
-  const a = (int32Color & 0x000000ff) / 255;
-
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
-}
-
 const stringShapeRegex = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g;
 
 /**

Libraries/Animated/src/nodes/AnimatedStyle.js

@@ -116,7 +116,6 @@ class AnimatedStyle extends AnimatedWithChildren {
       // Non-animated styles are set using `setNativeProps`, no need
       // to pass those as a part of the node config
     }
-    NativeAnimatedHelper.validateStyles(styleConfig);
     return {
       type: 'style',
       style: styleConfig,

Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.m

@@ -133,32 +133,27 @@ - (void)performUpdate
   if (_hasStringOutput) {
     // 'rgba(0, 100, 200, 0)'
     // ->
-    // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
+    // numberic argb color
     if (_numVals > 1) {
-      NSString *text = _soutputRange[0];
-      NSMutableString *formattedText = [NSMutableString stringWithString:text];
-      NSUInteger i = _numVals;
-      for (NSTextCheckingResult *match in [_matches reverseObjectEnumerator]) {
+      NSMutableArray<NSNumber*>* colors = [[NSMutableArray alloc] initWithCapacity:_numVals];
+      for (int i=0; i < _numVals; i++) {
         CGFloat val = RCTInterpolateValueInRange(inputValue,
                                                           _inputRange,
-                                                          _outputs[--i],
+                                                          _outputs[i],
                                                           _extrapolateLeft,
                                                           _extrapolateRight);
-        NSString *str;
         if (_shouldRound) {
           // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
           // round the opacity (4th column).
           bool isAlpha = i == 3;
-          CGFloat rounded = isAlpha ? round(val * 1000) / 1000 : round(val);
-          str = isAlpha ? [NSString stringWithFormat:@"%1.3f", rounded] : [NSString stringWithFormat:@"%1.0f", rounded];
+          CGFloat rounded = isAlpha ? round(val * 1000) / 1000 : round(val) / 255;
+          [colors addObject:[NSNumber numberWithDouble:rounded]];
         } else {
-          NSNumber *numberValue = [NSNumber numberWithDouble:val];
-          str = [numberValue stringValue];
+          NSNumber *numberValue = [NSNumber numberWithDouble:val / 255.0];
+          [colors addObject:numberValue];
         }
-
-        [formattedText replaceCharactersInRange:[match range] withString:str];
       }
-      self.animatedObject = formattedText;
+      self.animatedObject = colors;
     } else {
       self.animatedObject = [regex stringByReplacingMatchesInString:_soutputRange[0]
                                                  options:0

Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m

@@ -11,6 +11,7 @@
 #import <React/RCTSurfacePresenterStub.h>
 #import <React/RCTUIManager.h>
 
+#import <React/RCTNativeAnimatedNodesManager.h>
 #import <React/RCTAnimationUtils.h>
 #import <React/RCTStyleAnimatedNode.h>
 #import <React/RCTValueAnimatedNode.h>
@@ -67,9 +68,25 @@ - (void)updateView
     [_bridge.surfacePresenter synchronouslyUpdateViewOnUIThread:_connectedViewTag
                                                           props:_propsDictionary];
   } else {
-    [_bridge.uiManager synchronouslyUpdateViewOnUIThread:_connectedViewTag
-                                                viewName:_connectedViewName
-                                                   props:_propsDictionary];
+    NSMutableDictionary *layoutProps = [NSMutableDictionary new];
+    NSMutableDictionary *props = [NSMutableDictionary new];
+
+    for (NSString *key in _propsDictionary.allKeys) {
+      if([self.manager.layoutProps containsObject: key]) {
+        [layoutProps setObject:_propsDictionary[key] forKey:key];
+      } else {
+        [props setObject:_propsDictionary[key] forKey:key];
+      }
+    }
+
+    if (props.count > 0) {
+      [_bridge.uiManager synchronouslyUpdateViewOnUIThread:_connectedViewTag
+                                                  viewName:_connectedViewName
+                                                     props:props];
+    }
+    if (layoutProps.count > 0) {
+      [self.manager enqueueUpdateViewOnUIManager:_connectedViewTag viewName:_connectedViewName props:layoutProps];
+    }
   }
 }
 

Libraries/NativeAnimation/Nodes/RCTStyleAnimatedNode.m

@@ -39,7 +39,11 @@ - (void)performUpdate
     if (node) {
       if ([node isKindOfClass:[RCTValueAnimatedNode class]]) {
         RCTValueAnimatedNode *parentNode = (RCTValueAnimatedNode *)node;
-        [self->_propsDictionary setObject:@(parentNode.value) forKey:property];
+        if(parentNode.animatedObject != nil) {
+          [self->_propsDictionary setObject:parentNode.animatedObject forKey:property];
+        } else {
+          [self->_propsDictionary setObject:@(parentNode.value) forKey:property];
+        }
       } else if ([node isKindOfClass:[RCTTransformAnimatedNode class]]) {
         RCTTransformAnimatedNode *parentNode = (RCTTransformAnimatedNode *)node;
         [self->_propsDictionary addEntriesFromDictionary:parentNode.propsDictionary];

Libraries/NativeAnimation/RCTNativeAnimatedModule.mm

@@ -216,6 +216,11 @@ - (void)setBridge:(RCTBridge *)bridge
   }];
 }
 
+RCT_EXPORT_METHOD(addEnqueuedUpdateProp:(NSString*)propName)
+{
+  [_nodesManager addEnqueuedUpdateProp: propName];
+}
+
 #pragma mark -- Batch handling
 
 - (void)addOperationBlock:(AnimatedOperation)operation

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h

@@ -13,8 +13,16 @@
 
 @interface RCTNativeAnimatedNodesManager : NSObject
 
+@property (nonatomic, copy, readonly) NSSet<NSString*>* layoutProps;
+
 - (nonnull instancetype)initWithBridge:(nonnull RCTBridge *)bridge;
 
+- (void)addEnqueuedUpdateProp:(NSString*)propName;
+
+- (void)enqueueUpdateViewOnUIManager:(nonnull NSNumber *)reactTag
+                               viewName:(NSString *) viewName
+                                  props:(NSMutableDictionary *)props;
+
 - (void)updateAnimations;
 
 - (void)stepAnimations:(nonnull CADisplayLink *)displaylink;