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