From 88799308b8d1b91cd8babef87553970254012d58 Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Sun, 25 Feb 2024 17:25:50 +0530
Subject: [PATCH] translate regex to support %

---
 .../Libraries/StyleSheet/processTransform.js    |  8 ++++++--
 .../js/examples/Transform/TransformExample.js   | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 2 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/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 <View style={styles.translatePercentageView} />;
+}
+
 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 <TransformOriginExample />;
     },
   },
+  {
+    title: 'Translate Percentage',
+    description: "transform: 'translate(50%)'",
+    render(): Node {
+      return <TranslatePercentage />;
+    },
+  },
 ];