From 145a69d62a24fcf593bbddc3cf1005cc20716ed8 Mon Sep 17 00:00:00 2001 From: Nishan Date: Mon, 19 Feb 2024 12:00:41 +0530 Subject: [PATCH 01/11] android translate percentage support --- .../react/uimanager/BaseViewManager.java | 9 +++---- .../react/uimanager/TransformHelper.java | 25 +++++++++++++++++-- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 3e3d86e87dcf0c..e3990dae37d505 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -157,7 +157,7 @@ public void onLayoutChange( if ((currentHeight != oldHeight || currentWidth != oldWidth)) { ReadableArray transformOrigin = (ReadableArray) v.getTag(R.id.transform_origin); ReadableArray transformMatrix = (ReadableArray) v.getTag(R.id.transform); - if (transformMatrix != null && transformOrigin != null) { + if (transformMatrix != null || transformOrigin != null) { setTransformProperty((T) v, transformMatrix, transformOrigin); } } @@ -177,6 +177,7 @@ public void setBackgroundColor(@NonNull T view, int backgroundColor) { public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) { view.setTag(R.id.transform, matrix); view.setTag(R.id.invalidate_transform, true); + view.addOnLayoutChangeListener(this); } @Override @@ -184,11 +185,7 @@ public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) { public void setTransformOrigin(@NonNull T view, @Nullable ReadableArray transformOrigin) { view.setTag(R.id.transform_origin, transformOrigin); view.setTag(R.id.invalidate_transform, true); - if (transformOrigin != null) { - view.addOnLayoutChangeListener(this); - } else { - view.removeOnLayoutChangeListener(this); - } + view.addOnLayoutChangeListener(this); } @Override diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java index 5a5a9ddaa92750..cd2b9ce20af8f6 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java @@ -108,9 +108,30 @@ public static void processTransform( double z = value.size() > 2 ? value.getDouble(2) : 0d; MatrixMathHelper.applyTranslate3D(helperMatrix, x, y, z); } else if ("translateX".equals(transformType)) { - MatrixMathHelper.applyTranslate2D(helperMatrix, transform.getDouble(transformType), 0d); + double translateValue = 0; + if (transform.getType(transformType) == ReadableType.String) { + String stringValue = transform.getString(transformType); + if (stringValue.endsWith("%")) { + double percentageValue = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); + translateValue = viewWidth * percentageValue / 100.0; + } + } else { + translateValue = transform.getDouble(transformType); + } + MatrixMathHelper.applyTranslate2D(helperMatrix, translateValue, 0d); } else if ("translateY".equals(transformType)) { - MatrixMathHelper.applyTranslate2D(helperMatrix, 0d, transform.getDouble(transformType)); + double translateValue = 0; + if (transform.getType(transformType) == ReadableType.String) { + String stringValue = transform.getString(transformType); + if (stringValue.endsWith("%")) { + stringValue = stringValue.substring(0, stringValue.length() - 1); + double percentageValue = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); + translateValue = viewHeight * percentageValue / 100.0; + } + } else { + translateValue = transform.getDouble(transformType); + } + MatrixMathHelper.applyTranslate2D(helperMatrix, 0d, translateValue); } else if ("skewX".equals(transformType)) { MatrixMathHelper.applySkewX(helperMatrix, convertToRadians(transform, transformType)); } else if ("skewY".equals(transformType)) { From 42ebf7cbd9974f28c9e2b8af1afa2466bf1af04f Mon Sep 17 00:00:00 2001 From: Nishan Date: Sat, 24 Feb 2024 20:05:54 +0530 Subject: [PATCH 02/11] process transform update --- .../react-native/Libraries/StyleSheet/processTransform.js | 8 ++++++++ .../com/facebook/react/uimanager/BaseViewManager.java | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index a703ac47161462..195d186a5a525b 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -256,6 +256,14 @@ function _validateTransform( break; case 'translateX': case 'translateY': + invariant( + typeof value === 'number' || + (typeof value === 'string' && value.endsWith('%')), + 'Transform with key of "%s" must be number or a percentage. Passed value: %s.', + key, + stringifySafe(transformation), + ); + break; case 'scale': case 'scaleX': case 'scaleY': diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index e3990dae37d505..562ced4576d6fb 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -134,7 +134,7 @@ protected T prepareToRecycleView(@NonNull ThemedReactContext reactContext, T vie return view; } - // Currently. onLayout listener is only attached when transform origin prop is being used. + // Currently, layout listener is only attached when transform or transformOrigin is set. @Override public void onLayoutChange( View v, From f25cf046baca201c447378b54eab781ed3fdaa57 Mon Sep 17 00:00:00 2001 From: Nishan Date: Sun, 25 Feb 2024 19:21:17 +0530 Subject: [PATCH 03/11] translate regex to support % --- .../Libraries/StyleSheet/processTransform.js | 8 +++-- .../react/uimanager/TransformHelper.java | 35 ++++++++++++------- .../js/examples/Transform/TransformExample.js | 17 +++++++++ 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index 195d186a5a525b..3eba9a50fe3423 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -69,7 +69,7 @@ const _getKeyAndValueFromCSSTransform: ( | $TEMPORARY$string<'translateY'>, args: string, ) => {key: string, value?: number[] | number | string} = (key, args) => { - const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+)?/g); + const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z%]+)?/g); switch (key) { case 'matrix': @@ -88,7 +88,11 @@ const _getKeyAndValueFromCSSTransform: ( missingUnitOfMeasurement = true; } - parsedArgs.push(value); + if (unitOfMeasurement === '%') { + parsedArgs.push(`${value}%`); + } else { + parsedArgs.push(value); + } } if (__DEV__) { diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java index cd2b9ce20af8f6..7a42da4eca56ef 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java @@ -103,18 +103,24 @@ public static void processTransform( MatrixMathHelper.applyScaleY(helperMatrix, transform.getDouble(transformType)); } else if ("translate".equals(transformType)) { ReadableArray value = transform.getArray(transformType); - double x = value.getDouble(0); - double y = value.getDouble(1); + double x = 0; + if (value.getType(0) == ReadableType.String) { + x = parsePercentageToValue(value.getString(0), viewWidth); + } else { + x = value.getDouble(0); + } + double y = 0; + if (value.getType(1) == ReadableType.String) { + y = parsePercentageToValue(value.getString(1), viewHeight); + } else { + y = value.getDouble(1); + } double z = value.size() > 2 ? value.getDouble(2) : 0d; MatrixMathHelper.applyTranslate3D(helperMatrix, x, y, z); } else if ("translateX".equals(transformType)) { double translateValue = 0; if (transform.getType(transformType) == ReadableType.String) { - String stringValue = transform.getString(transformType); - if (stringValue.endsWith("%")) { - double percentageValue = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); - translateValue = viewWidth * percentageValue / 100.0; - } + translateValue = parsePercentageToValue(transform.getString(transformType), viewWidth); } else { translateValue = transform.getDouble(transformType); } @@ -122,12 +128,7 @@ public static void processTransform( } else if ("translateY".equals(transformType)) { double translateValue = 0; if (transform.getType(transformType) == ReadableType.String) { - String stringValue = transform.getString(transformType); - if (stringValue.endsWith("%")) { - stringValue = stringValue.substring(0, stringValue.length() - 1); - double percentageValue = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); - translateValue = viewHeight * percentageValue / 100.0; - } + translateValue = parsePercentageToValue(transform.getString(transformType), viewHeight); } else { translateValue = transform.getDouble(transformType); } @@ -151,6 +152,14 @@ public static void processTransform( } } + private static double parsePercentageToValue(String stringValue, double dimension) { + if (stringValue.endsWith("%")) { + double percentage = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); + return percentage * dimension / 100.0; + } else { + return Double.parseDouble(stringValue); + } + } private static float[] getTranslateForTransformOrigin( float viewWidth, float viewHeight, ReadableArray transformOrigin) { if (transformOrigin == null || (viewHeight == 0 && viewWidth == 0)) { diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js index 75370c931cc47c..b163d8ba1587ce 100644 --- a/packages/rn-tester/js/examples/Transform/TransformExample.js +++ b/packages/rn-tester/js/examples/Transform/TransformExample.js @@ -139,6 +139,10 @@ function Flip() { ); } +function TranslatePercentage() { + return ; +} + const styles = StyleSheet.create({ container: { height: 500, @@ -277,6 +281,12 @@ const styles = StyleSheet.create({ height: 100, transformOrigin: 'top left', }, + translatePercentageView: { + transform: 'translate(50%)', + padding: 50, + alignSelf: 'flex-start', + backgroundColor: 'lightblue', + }, }); exports.title = 'Transforms'; @@ -396,4 +406,11 @@ exports.examples = [ return ; }, }, + { + title: 'Translate Percentage', + description: "transform: 'translate(50%)'", + render(): Node { + return ; + }, + }, ]; From 4faf27ebae2d60e2193078a3b38fe369b4fe37cb Mon Sep 17 00:00:00 2001 From: Nishan Date: Sun, 25 Feb 2024 19:28:52 +0530 Subject: [PATCH 04/11] translate percentage test --- .../__tests__/__snapshots__/processTransform-test.js.snap | 2 +- .../Libraries/StyleSheet/__tests__/processTransform-test.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap b/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap index dc8d045189ea5e..119c7344a130ba 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap +++ b/packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransform-test.js.snap @@ -32,7 +32,7 @@ exports[`processTransform validation should throw when passing an invalid angle exports[`processTransform validation should throw when passing an invalid angle prop 4`] = `"Rotate transform must be expressed in degrees (deg) or radians (rad): {\\"skewX\\":\\"10drg\\"}"`; -exports[`processTransform validation should throw when passing an invalid value to a number prop 1`] = `"Transform with key of \\"translateY\\" must be a number: {\\"translateY\\":\\"20deg\\"}"`; +exports[`processTransform validation should throw when passing an invalid value to a number prop 1`] = `"Transform with key of \\"translateY\\" must be number or a percentage. Passed value: {\\"translateY\\":\\"20deg\\"}."`; exports[`processTransform validation should throw when passing an invalid value to a number prop 2`] = `"Transform with key of \\"scale\\" must be a number: {\\"scale\\":{\\"x\\":10,\\"y\\":10}}"`; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js index 66ce708c033897..fe7c5d2851505f 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js @@ -34,6 +34,11 @@ describe('processTransform', () => { ); }); + it('should accept a percentage translate transform', () => { + processTransform([{translateY: '20%'}, {translateX: '10%'}]); + processTransform('translateX(10%)'); + }); + it('should throw on object with multiple properties', () => { expect(() => processTransform([{scale: 0.5, translateY: 10}]), From 91812cde68707d2fa7520a180977ae0845c3388f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nishan=20=28o=5E=E2=96=BD=5Eo=29?= Date: Sun, 31 Mar 2024 01:27:03 +0530 Subject: [PATCH 05/11] Update packages/react-native/Libraries/StyleSheet/processTransform.js Co-authored-by: Pieter De Baets --- packages/react-native/Libraries/StyleSheet/processTransform.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index 3eba9a50fe3423..b88ba2ea6a4ab3 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -69,7 +69,7 @@ const _getKeyAndValueFromCSSTransform: ( | $TEMPORARY$string<'translateY'>, args: string, ) => {key: string, value?: number[] | number | string} = (key, args) => { - const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z%]+)?/g); + const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g); switch (key) { case 'matrix': From 274ba797ca0406505ac151eb72433090b91f06b3 Mon Sep 17 00:00:00 2001 From: Nishan Date: Sun, 31 Mar 2024 21:24:24 +0530 Subject: [PATCH 06/11] flow check fix --- packages/react-native/Libraries/StyleSheet/processTransform.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index b88ba2ea6a4ab3..49435279de9aa6 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -68,7 +68,7 @@ const _getKeyAndValueFromCSSTransform: ( | $TEMPORARY$string<'translateX'> | $TEMPORARY$string<'translateY'>, args: string, -) => {key: string, value?: number[] | number | string} = (key, args) => { +) => {key: string, value?: number[] | string[] | number | string} = (key, args) => { const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g); switch (key) { From f6a528cb193b8a44ecf94e4e1eae4f77474dbe87 Mon Sep 17 00:00:00 2001 From: Nishan Date: Sun, 31 Mar 2024 21:30:52 +0530 Subject: [PATCH 07/11] prettier fix --- .../react-native/Libraries/StyleSheet/processTransform.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index 49435279de9aa6..bcc870d7778ae4 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -68,7 +68,10 @@ const _getKeyAndValueFromCSSTransform: ( | $TEMPORARY$string<'translateX'> | $TEMPORARY$string<'translateY'>, args: string, -) => {key: string, value?: number[] | string[] | number | string} = (key, args) => { +) => {key: string, value?: number[] | string[] | number | string} = ( + key, + args, +) => { const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g); switch (key) { From eaee88ba8fbe76bee57bca70fbe6e65cec2c9c2f Mon Sep 17 00:00:00 2001 From: Nishan Date: Sun, 31 Mar 2024 21:50:16 +0530 Subject: [PATCH 08/11] fix flow check --- packages/react-native/Libraries/StyleSheet/processTransform.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/processTransform.js b/packages/react-native/Libraries/StyleSheet/processTransform.js index bcc870d7778ae4..6310a4b5c77550 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransform.js +++ b/packages/react-native/Libraries/StyleSheet/processTransform.js @@ -68,7 +68,7 @@ const _getKeyAndValueFromCSSTransform: ( | $TEMPORARY$string<'translateX'> | $TEMPORARY$string<'translateY'>, args: string, -) => {key: string, value?: number[] | string[] | number | string} = ( +) => {key: string, value?: Array | number | string} = ( key, args, ) => { From 6b1a151a72d9daac021479d1cb4dcb20ada0b0cb Mon Sep 17 00:00:00 2001 From: Nishan Date: Wed, 22 May 2024 23:26:48 +0530 Subject: [PATCH 09/11] handle NumberFormatException exception --- .../react/uimanager/TransformHelper.java | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java index 7a42da4eca56ef..547b5017dbe4c2 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java @@ -105,13 +105,13 @@ public static void processTransform( ReadableArray value = transform.getArray(transformType); double x = 0; if (value.getType(0) == ReadableType.String) { - x = parsePercentageToValue(value.getString(0), viewWidth); + x = parseTranslateValue(value.getString(0), viewWidth); } else { x = value.getDouble(0); } double y = 0; if (value.getType(1) == ReadableType.String) { - y = parsePercentageToValue(value.getString(1), viewHeight); + y = parseTranslateValue(value.getString(1), viewHeight); } else { y = value.getDouble(1); } @@ -120,7 +120,7 @@ public static void processTransform( } else if ("translateX".equals(transformType)) { double translateValue = 0; if (transform.getType(transformType) == ReadableType.String) { - translateValue = parsePercentageToValue(transform.getString(transformType), viewWidth); + translateValue = parseTranslateValue(transform.getString(transformType), viewWidth); } else { translateValue = transform.getDouble(transformType); } @@ -128,7 +128,7 @@ public static void processTransform( } else if ("translateY".equals(transformType)) { double translateValue = 0; if (transform.getType(transformType) == ReadableType.String) { - translateValue = parsePercentageToValue(transform.getString(transformType), viewHeight); + translateValue = parseTranslateValue(transform.getString(transformType), viewHeight); } else { translateValue = transform.getDouble(transformType); } @@ -152,13 +152,18 @@ public static void processTransform( } } - private static double parsePercentageToValue(String stringValue, double dimension) { - if (stringValue.endsWith("%")) { - double percentage = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); - return percentage * dimension / 100.0; - } else { - return Double.parseDouble(stringValue); + private static double parseTranslateValue(String stringValue, double dimension) { + try { + if (stringValue.endsWith("%")) { + double percentage = Double.parseDouble(stringValue.substring(0, stringValue.length() - 1)); + return percentage * dimension / 100.0; + } else { + return Double.parseDouble(stringValue); + } + } catch (NumberFormatException e) { + FLog.w(ReactConstants.TAG, "Invalid translate value: " + stringValue); } + return 0; } private static float[] getTranslateForTransformOrigin( float viewWidth, float viewHeight, ReadableArray transformOrigin) { From bf8e03b85c24728aae71d91dedb6527ebd672173 Mon Sep 17 00:00:00 2001 From: Nishan Date: Wed, 22 May 2024 23:31:34 +0530 Subject: [PATCH 10/11] rename transforms array --- .../com/facebook/react/uimanager/BaseViewManager.java | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 4305df4c470642..8deef586bc787d 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -170,9 +170,9 @@ public void onLayoutChange( if ((currentHeight != oldHeight || currentWidth != oldWidth)) { ReadableArray transformOrigin = (ReadableArray) v.getTag(R.id.transform_origin); - ReadableArray transformMatrix = (ReadableArray) v.getTag(R.id.transform); - if (transformMatrix != null || transformOrigin != null) { - setTransformProperty((T) v, transformMatrix, transformOrigin); + ReadableArray transforms = (ReadableArray) v.getTag(R.id.transform); + if (transforms != null || transformOrigin != null) { + setTransformProperty((T) v, transforms, transformOrigin); } } } @@ -621,8 +621,8 @@ protected void onAfterUpdateTransaction(@NonNull T view) { Boolean invalidateTransform = (Boolean) view.getTag(R.id.invalidate_transform); if (invalidateTransform != null && invalidateTransform) { ReadableArray transformOrigin = (ReadableArray) view.getTag(R.id.transform_origin); - ReadableArray transformMatrix = (ReadableArray) view.getTag(R.id.transform); - setTransformProperty(view, transformMatrix, transformOrigin); + ReadableArray transforms = (ReadableArray) view.getTag(R.id.transform); + setTransformProperty(view, transforms, transformOrigin); view.setTag(R.id.invalidate_transform, false); } From 5e705110ba1b26b76b9ca33f1d67b81c9725faba Mon Sep 17 00:00:00 2001 From: Nishan Date: Wed, 22 May 2024 23:50:57 +0530 Subject: [PATCH 11/11] move add layout listener to after update transaction --- .../java/com/facebook/react/uimanager/BaseViewManager.java | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 8deef586bc787d..4012c71fe19b81 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -197,7 +197,6 @@ public void setFilter(@NonNull T view, @Nullable ReadableArray filter) { public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) { view.setTag(R.id.transform, matrix); view.setTag(R.id.invalidate_transform, true); - view.addOnLayoutChangeListener(this); } @Override @@ -205,7 +204,6 @@ public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) { public void setTransformOrigin(@NonNull T view, @Nullable ReadableArray transformOrigin) { view.setTag(R.id.transform_origin, transformOrigin); view.setTag(R.id.invalidate_transform, true); - view.addOnLayoutChangeListener(this); } @Override @@ -620,6 +618,7 @@ protected void onAfterUpdateTransaction(@NonNull T view) { Boolean invalidateTransform = (Boolean) view.getTag(R.id.invalidate_transform); if (invalidateTransform != null && invalidateTransform) { + view.addOnLayoutChangeListener(this); ReadableArray transformOrigin = (ReadableArray) view.getTag(R.id.transform_origin); ReadableArray transforms = (ReadableArray) view.getTag(R.id.transform); setTransformProperty(view, transforms, transformOrigin);