From 4f9394e47b85c7ad7e3c4a50c914030d144d1a7a Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Tue, 12 May 2020 16:54:19 +0200 Subject: [PATCH 1/3] adding example in RNTester app --- .../js/examples/Transform/TransformExample.js | 49 ++++++++++++++----- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/RNTester/js/examples/Transform/TransformExample.js b/RNTester/js/examples/Transform/TransformExample.js index a42a00c105742f..ca00e224e29675 100644 --- a/RNTester/js/examples/Transform/TransformExample.js +++ b/RNTester/js/examples/Transform/TransformExample.js @@ -122,19 +122,41 @@ const styles = StyleSheet.create({ height: 500, }, box1: { - left: 0, - backgroundColor: 'green', - height: 50, - position: 'absolute', - top: 0, + justifyContent: 'center', + alignItems: 'center', + marginBottom: 60, + width: 200, + height: 200, + backgroundColor: 'grey', transform: [ {translateX: 100}, {translateY: 50}, {rotate: '30deg'}, - {scaleX: 2}, - {scaleY: 2}, + {scaleX: 1.2}, + {scaleY: 1.2}, ], - width: 50, + borderRadius: 10, + borderWidth: 5, + }, + box1container: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + margin: 10, + padding: 10, + borderWidth: 2, + borderColor: 'red', + backgroundColor: 'white', + height: 100, + borderRadius: 10, + overflow: 'hidden', + }, + box1child: { + width: 40, + height: 440, + borderWidth: 4, + borderColor: 'green', + backgroundColor: 'yellow', }, box2: { left: 0, @@ -247,13 +269,18 @@ exports.examples = [ }, }, { - title: 'Translate, Rotate, Scale', + title: 'Translate, Rotate, Scale. Children is set to overflow hidden.', description: - "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2", + "overflow: hidden, translateX: 100, translateY: 50, rotate: '30deg', scaleX: 1.2, scaleY: 1.2", render(): Node { return ( - + + + ROUD + + + ); }, From 3c8c8d3c9b7b2d883939e98fab0a1ad4933e17f8 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Tue, 12 May 2020 17:03:52 +0200 Subject: [PATCH 2/3] issue sdk24-28 clipPath and LAYER_TYPE_NONE --- .../java/com/facebook/react/views/view/ReactViewGroup.java | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java index a8f162163a8562..483dca382ab89e 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java @@ -859,6 +859,12 @@ private void dispatchOverflowDraw(Canvas canvas) { Math.max(bottomLeftBorderRadius - borderWidth.bottom, 0), }, Path.Direction.CW); + // for sdk 24-28 fix issue with clipPath and LAYER_TYPE_NONE + // https://github.com/facebook/react-native/issues/18266 + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N + && Build.VERSION.SDK_INT <= Build.VERSION_CODES.P) { + setLayerType(View.LAYER_TYPE_HARDWARE, null); + } canvas.clipPath(mPath); hasClipPath = true; } From e1fc40e0fbb9419de4ff9bd3eb5945f2f7a8c702 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 24 Feb 2021 17:53:32 +0100 Subject: [PATCH 3/3] code review from shergin https://github.com/facebook/react-native/pull/28881/files#r426931832 --- .../facebook/react/views/view/ReactViewGroup.java | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java index fb38d8855b3810..9c13795b4f0067 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java @@ -262,6 +262,12 @@ public void setBorderColor(int position, float rgb, float alpha) { public void setBorderRadius(float borderRadius) { ReactViewBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground(); backgroundDrawable.setRadius(borderRadius); + // for sdk 24-28 fix issue with clipPath and LAYER_TYPE_NONE + // https://github.com/facebook/react-native/issues/18266 + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N + && Build.VERSION.SDK_INT <= Build.VERSION_CODES.P) { + setLayerType(View.LAYER_TYPE_HARDWARE, null); + } } public void setBorderRadius(float borderRadius, int position) { @@ -866,12 +872,6 @@ private void dispatchOverflowDraw(Canvas canvas) { Math.max(bottomLeftBorderRadius - borderWidth.bottom, 0), }, Path.Direction.CW); - // for sdk 24-28 fix issue with clipPath and LAYER_TYPE_NONE - // https://github.com/facebook/react-native/issues/18266 - if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N - && Build.VERSION.SDK_INT <= Build.VERSION_CODES.P) { - setLayerType(View.LAYER_TYPE_HARDWARE, null); - } canvas.clipPath(mPath); hasClipPath = true; }