Deprecate transformMatrix and decomposedMatrix

Summary:
transformMatrix only worked on iOS and there is an equivalent API that (mostly)
works cross platform.

decomposedMatrix could technically be passed on Android but it wasn't document and explicitly flagged as not working.

My goal is to deprecate both uses and then the only supported API is the `transform: [{ matrix: ... }]` form.

The only difference is that on Android the matrix gets decomposed.

Currently there is some special cased magic that renames transform -> transformMatrix or decomposedMatrix depending on platform.

https://github.com/facebook/react/blob/master/src/renderers/native/ReactNative/ReactNativeAttributePayload.js#L50

Therefore I'm adding an alias for both native platforms called just "transform".

Next I'll swap over the JS to always target the name "transform". The only difference is how the value is marshalled over the bridge in processTransform.

To do this, I have to clean up a few callers. Mostly that's just swapping to the new API.

For buildInterpolator this is a bit trickier but this fixes it for all our use cases (which is only the Navigator in AdsManager).

Reviewed By: vjeux

Differential Revision: D3239960

fb-gh-sync-id: 838edb6644c6cdd0716834f712042f226ff3136f
fbshipit-source-id: 838edb6644c6cdd0716834f712042f226ff3136f

Libraries/StyleSheet/TransformPropTypes.js

@@ -21,13 +21,25 @@ var TransformMatrixPropType = function(
   propName : string,
   componentName : string
 ) : ?Error {
-  if (props.transform && props.transformMatrix) {
+  if (props[propName]) {
     return new Error(
-      'transformMatrix and transform styles cannot be used on the same ' +
-      'component'
+      'The transformMatrix style property is deprecated. ' +
+      'Use `transform: [{ matrix: ... }]` instead.'
+    );
+  }
+};
+
+var DecomposedMatrixPropType = function(
+  props : Object,
+  propName : string,
+  componentName : string
+) : ?Error {
+  if (props[propName]) {
+    return new Error(
+      'The decomposedMatrix style property is deprecated. ' +
+      'Use `transform: [...]` instead.'
     );
   }
-  return ArrayOfNumberPropType(props, propName, componentName);
 };
 
 var TransformPropTypes = {
@@ -47,7 +59,10 @@ var TransformPropTypes = {
       ReactPropTypes.shape({skewY: ReactPropTypes.string})
     ])
   ),
+
+  /* Deprecated */
   transformMatrix: TransformMatrixPropType,
+  decomposedMatrix: DecomposedMatrixPropType,
 
   /* Deprecated transform props used on Android only */
   scaleX: deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.'),

Libraries/Utilities/buildStyleInterpolator.js

@@ -461,8 +461,9 @@ for (var varIndex = 0; varIndex < 16; varIndex++) {
 }
 var setNextMatrixAndDetectChange = function(orderedMatrixOperations) {
   var fn = [
-    '  var transformMatrix = result.transformMatrix !== undefined ? ' +
-    'result.transformMatrix : (result.transformMatrix = []);'
+    '  var transform = result.transform !== undefined ? ' +
+    'result.transform : (result.transform = [{ matrix: [] }]);' +
+    '  var transformMatrix = transform[0].matrix;'
   ];
   fn.push.apply(
     fn,

React/Views/RCTViewManager.m

@@ -128,12 +128,19 @@ RCT_CUSTOM_VIEW_PROPERTY(shouldRasterizeIOS, BOOL, RCTView)
   view.layer.shouldRasterize = json ? [RCTConvert BOOL:json] : defaultView.layer.shouldRasterize;
   view.layer.rasterizationScale = view.layer.shouldRasterize ? [UIScreen mainScreen].scale : defaultView.layer.rasterizationScale;
 }
+// TODO: t11041683 Remove this duplicate property name.
 RCT_CUSTOM_VIEW_PROPERTY(transformMatrix, CATransform3D, RCTView)
 {
   view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
   // TODO: Improve this by enabling edge antialiasing only for transforms with rotation or skewing
   view.layer.allowsEdgeAntialiasing = !CATransform3DIsIdentity(view.layer.transform);
 }
+RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RCTView)
+{
+  view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
+  // TODO: Improve this by enabling edge antialiasing only for transforms with rotation or skewing
+  view.layer.allowsEdgeAntialiasing = !CATransform3DIsIdentity(view.layer.transform);
+}
 RCT_CUSTOM_VIEW_PROPERTY(pointerEvents, RCTPointerEvents, RCTView)
 {
   if ([view respondsToSelector:@selector(setPointerEvents:)]) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -25,6 +25,7 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
   private static final String PROP_DECOMPOSED_MATRIX_SCALE_Y = "scaleY";
   private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_X = "translateX";
   private static final String PROP_DECOMPOSED_MATRIX_TRANSLATE_Y = "translateY";
+  private static final String PROP_TRANSFORM = "transform";
   private static final String PROP_OPACITY = "opacity";
   private static final String PROP_ELEVATION = "elevation";
   private static final String PROP_RENDER_TO_HARDWARE_TEXTURE = "renderToHardwareTextureAndroid";
@@ -51,6 +52,7 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
     view.setBackgroundColor(backgroundColor);
   }
 
+  // TODO: t11041683 Remove this duplicate property name.
   @ReactProp(name = PROP_DECOMPOSED_MATRIX)
   public void setDecomposedMatrix(T view, ReadableMap decomposedMatrix) {
     if (decomposedMatrix == null) {
@@ -60,6 +62,15 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
     }
   }
 
+  @ReactProp(name = PROP_TRANSFORM)
+  public void setTransform(T view, ReadableMap decomposedMatrix) {
+    if (decomposedMatrix == null) {
+      resetTransformMatrix(view);
+    } else {
+      setTransformMatrix(view, decomposedMatrix);
+    }
+  }
+
   @ReactProp(name = PROP_OPACITY, defaultFloat = 1.f)
   public void setOpacity(T view, float opacity) {
     view.setAlpha(opacity);