From 373537b2816340345c69503b9c1fcc95f8ebad32 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Fri, 29 Apr 2016 14:17:58 -0700 Subject: [PATCH] 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 | 23 +++++++++++++++---- Libraries/Utilities/buildStyleInterpolator.js | 5 ++-- React/Views/RCTViewManager.m | 7 ++++++ .../react/uimanager/BaseViewManager.java | 11 +++++++++ 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/Libraries/StyleSheet/TransformPropTypes.js b/Libraries/StyleSheet/TransformPropTypes.js index 9988b8216..3250b8aab 100644 --- a/Libraries/StyleSheet/TransformPropTypes.js +++ b/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.'), diff --git a/Libraries/Utilities/buildStyleInterpolator.js b/Libraries/Utilities/buildStyleInterpolator.js index ff51699b0..4f6d0f875 100644 --- a/Libraries/Utilities/buildStyleInterpolator.js +++ b/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, diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index eef814a2b..c9612c800 100644 --- a/React/Views/RCTViewManager.m +++ b/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:)]) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 694250539..0bcefba58 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -25,6 +25,7 @@ public abstract class BaseViewManager